当前位置: 首页 > news >正文

Flutter 进阶:实现带圆角的 CircularProgressIndicator

在 Flutter 中,我们经常使用 CircularProgressIndicator 来展示加载进度。但是你是否注意到:它的进度端始终是“平头”的(直角)

这在一些 UI 设计中并不美观,特别是想实现类似 Apple 健身环那样“前端圆清澈”效果时,就需要一个带圆角的圆形进度条。


🛠 方法一:使用 CustomPaint 自绘圆角进度

Flutter 的 Canvas 提供了绘制弧形和给进度端点设置样式的能力,我们只需设置 Paint.strokeCap = StrokeCap.round 就可以让进度端头变成圆角。

→ 实现代码:

class RoundedCircularProgressIndicator extends StatelessWidget {final double progress;final double size;final double strokeWidth;final Color backgroundColor;final Color progressColor;const RoundedCircularProgressIndicator({super.key,required this.progress,this.size = 40.0,this.strokeWidth = 6.0,this.backgroundColor = const Color(0xFFE0E0E0),this.progressColor = Colors.blue,});Widget build(BuildContext context) {return SizedBox(width: size,height: size,child: CustomPaint(painter: _RoundedCircularProgressPainter(progress: progress,strokeWidth: strokeWidth,backgroundColor: backgroundColor,progressColor: progressColor,),),);}
}class _RoundedCircularProgressPainter extends CustomPainter {final double progress;final double strokeWidth;final Color backgroundColor;final Color progressColor;_RoundedCircularProgressPainter({required this.progress,required this.strokeWidth,required this.backgroundColor,required this.progressColor,});void paint(Canvas canvas, Size size) {final center = size.center(Offset.zero);final radius = (size.width - strokeWidth) / 2;final rect = Rect.fromCircle(center: center, radius: radius);final backgroundPaint = Paint()..color = backgroundColor..style = PaintingStyle.stroke..strokeWidth = strokeWidth;final progressPaint = Paint()..color = progressColor..style = PaintingStyle.stroke..strokeWidth = strokeWidth..strokeCap = StrokeCap.round; // 圆角关键canvas.drawArc(rect, 0, 2 * pi, false, backgroundPaint);canvas.drawArc(rect, -pi / 2, 2 * pi * progress, false, progressPaint);}bool shouldRepaint(CustomPainter oldDelegate) => true;
}

→ 使用示例:

RoundedCircularProgressIndicator(progress: 0.75,size: 80,strokeWidth: 10,backgroundColor: Colors.grey.shade300,progressColor: Colors.green,
),

效果:圆角端头,进度从顶部开始顺时针绘制,大气现代。


📆 方法二:使用第三方库 percent_indicator

percent_indicator 是非常流行的进度指示器库,支持 circularStrokeCap: CircularStrokeCap.round

安装依赖

dependencies:percent_indicator: ^4.2.5

使用示例

CircularPercentIndicator(radius: 40.0,lineWidth: 8.0,percent: 0.6,circularStrokeCap: CircularStrokeCap.round,backgroundColor: Colors.grey.shade300,progressColor: Colors.purple,
),

很方便,适合快速开发场景。


❌ Flutter 自带的 CircularProgressIndicator 存在的限制

Flutter 默认的 CircularProgressIndicator 没有揭露 strokeCap 设置,不支持圆角端。

如果你想要实现“前端圆角”效果,当前只能选择:

  1. 自绘
  2. 第三方库

📊 方法对比

方法是否支持圆角自定义能力使用难度推荐度
CustomPaint 自绘⭐⭐⭐⭐
percent_indicator⭐⭐⭐⭐
CircularProgressIndicator⭐⭐

✅ 总结

本文介绍了如何在 Flutter 中实现 带圆角的圆形进度条,通过:

  • 自绘 CustomPaint
  • 第三方库 percent_indicator

这些技巧可以使进度 UI 更加精致,满足更复杂的产品设计需求。


🐾 后记

如果你正在开发带上传进度、音频处理、视频模块等场景,圆角进度条会大大提升用户体验。

欢迎点赞、收藏、评论!有任何 Flutter 相关问题也可以留言一起探讨!

http://www.dtcms.com/a/265613.html

相关文章:

  • 解决安装SunloginClient问题记录(Ubuntu 24.04.2)
  • 删除docker镜像后如何正确清理残余
  • 前端的一些报错
  • AIX 环境磁盘空间管理指南
  • 从零开始构建Airbyte数据管道:PostgreSQL到BigQuery实战指南
  • CentOS系统高效部署fastGPT全攻略
  • 两级缓存 Caffeine + Redis 架构:原理、实现与实践
  • 跨云架构:性能、成本与合规的平衡艺术
  • Linux 73 LAMP4
  • 渗透测试中 phpinfo() 的信息利用分析
  • Java接口报错:Packet for query is too large - 解决方案与架构思考
  • 从0到1搭建同城O2O外卖平台:外卖系统源码架构解析与实战指南
  • 前置代理重构网络访问的「中转站」
  • YOLOv2 正负样本分配机制详解
  • ollama bge-m3 Embending模型永久加载 does not support generate
  • Spring注解之@Repository
  • 采样点不一致:总线通信的隐形杀手
  • C++之红黑树认识与实现
  • Go应用容器化完全指南:构建最小化安全镜像的终极实践
  • Jenkins的最佳替代方案TeamCity:优势、差异对比及常见问题解答
  • 使用 HiveMQ Broker 写入 TDengine
  • C#,VB.NET从JSON数据里提取数组中的对象节点值
  • 【论】电力-交通融合网协同优化:迎接电动汽车时代的挑战
  • .NET 8.0 Redis 教程
  • Pytorch中expand()和repeat()函数使用详解和实战示例
  • github在线图床
  • 一篇文章掌握Docker
  • Redis 持久化详解、使用及注意事项
  • 关于使用cursor tunnel链接vscode(避免1006 issue的做法)
  • ASP 安装使用教程