Flutter 自定义圆形进度条

最新推荐文章于 2024-07-26 15:38:13 发布

wapchief

最新推荐文章于 2024-07-26 15:38:13 发布

阅读量2.6k

点赞数

分类专栏： Flutter 文章标签： flutter flutter自定义view

本文链接：https://blog.youkuaiyun.com/wapchief/article/details/100082948

版权

Flutter 专栏收录该内容

20 篇文章

订阅专栏

本文详细介绍了一种自定义圆形进度条的实现方法，通过Flutter的CustomPainter类创建了一个CircleProgressBar组件，该组件能够根据传入的进度参数动态地更新显示效果。文章深入解析了画布(Canvas)、画笔(Paint)的使用，以及如何通过弧形(Arc)来表现进度状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图


//进度条
class CircleProgressBar extends CustomPainter {
  Paint _paintBackground;
  Paint _paintFore;
  final double pi = 3.1415926;
  var progress; //0-360

  CircleProgressBar(this.progress) {
    _paintBackground = Paint()
      ..color = Colors.transparent
      ..strokeCap = StrokeCap.round
      ..style = PaintingStyle.stroke
      ..strokeWidth = 1.0
      ..isAntiAlias = true;
    _paintFore = Paint()
      ..color = Color(BaseTheme.BASE_COLOR)
      ..strokeCap = StrokeCap.round
      ..style = PaintingStyle.stroke
      ..strokeWidth = 1.0
      ..isAntiAlias = true;
  }

  updateProgress(int pg) {
    this.progress = pg;
    print(progress);
  }

  @override
  void paint(Canvas canvas, Size size) {
    //绘制流程
    canvas.drawCircle(Offset(size.width / 2, size.height / 2), size.width / 2,
        _paintBackground);
    Rect rect = Rect.fromCircle(
      center: Offset(size.width / 2, size.height / 2),
      radius: size.width / 2,
    );
    canvas.drawArc(
        rect,
        -pi / 2, //圆开始的位置（正上方）
        360 * progress / 100 * 3.14 / 180,
        false,
        _paintFore);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    //刷新布局的时候告诉Flutter是否需要重绘
    return true;
  }
}