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 设置,不支持圆角端。
如果你想要实现“前端圆角”效果,当前只能选择:
- 自绘
- 第三方库
📊 方法对比
方法 | 是否支持圆角 | 自定义能力 | 使用难度 | 推荐度 |
---|---|---|---|---|
CustomPaint 自绘 | ✅ | 高 | 中 | ⭐⭐⭐⭐ |
percent_indicator | ✅ | 中 | 低 | ⭐⭐⭐⭐ |
CircularProgressIndicator | ❌ | 低 | 低 | ⭐⭐ |
✅ 总结
本文介绍了如何在 Flutter 中实现 带圆角的圆形进度条,通过:
- 自绘
CustomPaint
- 第三方库
percent_indicator
这些技巧可以使进度 UI 更加精致,满足更复杂的产品设计需求。
🐾 后记
如果你正在开发带上传进度、音频处理、视频模块等场景,圆角进度条会大大提升用户体验。
欢迎点赞、收藏、评论!有任何 Flutter 相关问题也可以留言一起探讨!