Flutter开发圆形计时进度条RingProgressBar

约定不等于承诺〃 2024-03-26 17:14 104阅读 0赞

*  **演示**

先看效果图：

![e02d4daf148c466291c29e2205451831.png][]![97770f6dd15d4708b342862682f9b782.png][]

由于无法截取动态图，我就截过程中的两张图片表达了，我想应该能看得懂。

*  **功能**

1.设置进度条半径

2.设置进度条宽度

3.设置进度条最大值

4.设置进度条背景色以及前景色

5.是否显示进度条文字

6.文字样式设置

7.点击进度条和进度条计时完成回调

8.进度条是倒计时还是正计时设置

*  **代码**

import 'dart:async';
    import 'dart:math';
    
    import 'package:flutter/material.dart';
    
    class RingProgressBar extends StatefulWidget {
      /// 半径
      final double radius;
    
      /// 环颜色
      final Color? ringColor;
    
      /// 环背景颜色
      final Color? ringBgColor;
    
      /// 环中间文字
      final Color? textColor;
    
      /// 环中间文字大小
      final double? textSize;
    
      /// 环宽度
      final double strokeWidth;
    
      /// 是否显示环中间文本
      final bool isShowText;
    
      /// 环是否是倒计时，true：是倒计时，false：顺计时
      final bool? isCountDown;
    
      /// 计时截至值
      final int? maxProgress;
    
      final VoidCallback? callback;
    
      const RingProgressBar(
          {super.key,
          required this.radius,
          required this.strokeWidth,
          this.ringColor,
          this.ringBgColor,
          this.isShowText = false,
          this.textSize,
          this.textColor,
          this.isCountDown = true,
          this.maxProgress,
          this.callback});
    
      @override
      State<StatefulWidget> createState() => _RingProgressBarState();
    }
    
    class _RingProgressBarState extends State<RingProgressBar> {
      /// 进度条当前进度值
      double _value = 0;
      /// 进度条当前进度文本
      String _text = "0";
      /// 计时器
      Timer? timer;
    
      @override
      void initState() {
        super.initState();
        int count = 0;
        //计时器，每1毫秒执行一次
        const period = Duration(milliseconds: 1);
        timer = Timer.periodic(period, (timer) {
          count++;
          double max = (widget.maxProgress ?? 0) * 1000;
          //计时器结束条件
          if (widget.maxProgress == null ||
              widget.maxProgress == 0 ||
              count >= max) {
            timer.cancel();
            if (widget.callback != null) {
              //执行完成回调
              widget.callback!();
            }
          }
          //只有当widget状态为mounted时才执行setState防止内存泄露
          if (mounted) {
            setState(() {
              _value = count / max;
              _text = widget.isCountDown ?? true
                  ? ((widget.maxProgress ?? 0) - (count ~/ 1000)).toString()
                  : (count ~/ 1000).toString();
            });
          }
        });
      }
    
      @override
      void dispose() {
        //退出时关闭计时器防止内存泄露
        timer?.cancel();
        super.dispose();
      }
    
      @override
      Widget build(BuildContext context) {
        return InkWell(
            highlightColor: Colors.transparent,
            splashColor: Colors.transparent,
            onTap: () {
              if (widget.callback != null) {
                //点击控件回调
                widget.callback!();
              }
            },
            child: Container(
              width: widget.radius * 2,
              height: widget.radius * 2,
              color: Colors.transparent,
              child: Stack(
                alignment: Alignment.center,
                fit: StackFit.expand,
                children: [
                  CustomPaint(
                    size: Size(widget.radius * 2, widget.radius * 2),
                    painter: _RingPrinter(this, _value),
                  ),
                  Center(
                    widthFactor: widget.radius * 2,
                    heightFactor: widget.radius * 2,
                    child: widget.isShowText
                        ? Text(
                            _text,
                            style: TextStyle(
                                color: widget.textColor, fontSize: widget.textSize),
                          )
                        : Container(),
                  ),
                ],
              ),
            ));
      }
    }
    
    class _RingPrinter extends CustomPainter {
      /// state对象
      final _RingProgressBarState state;
    
      /// 控制值:0.0->1.0，会控制绘制0.0*2*pi->1.0*2*pi即从0开始绘制一个完整的圆
      final double _value;
    
      _RingPrinter(this.state, this._value);
    
      @override
      void paint(Canvas canvas, Size size) {
        //画笔
        Paint paint = Paint()
          ..color = state.widget.ringColor ?? Colors.transparent
          ..style = PaintingStyle.stroke
          ..strokeWidth = state.widget.strokeWidth
          ..isAntiAlias = true;
        //圆心偏移值
        double offset = state.widget.radius;
        //以offset为圆形，画半径减边线宽度一半为半径的圆
        Rect rect = Rect.fromCircle(
            center: Offset(offset, offset),
            radius: state.widget.radius - state.widget.strokeWidth / 2);
        paint.color = state.widget.ringBgColor ?? Colors.grey;
        //画圆背景
        canvas.drawCircle(Offset(offset, offset),
            state.widget.radius - state.widget.strokeWidth / 2, paint);
        paint.color = state.widget.ringColor ?? Colors.blueAccent;
        //让边界有弧形过渡
        paint.strokeCap = StrokeCap.round;
        //画进度条
        canvas.drawArc(rect, -0.5 * pi, _value * 2 * pi, false, paint);
      }
    
      @override
      bool shouldRepaint(covariant CustomPainter oldDelegate) {
        return true;
      }
    }

关键代码 ，该代码可以控制从0.0\*2.pi->1.0\*2\*pi从0开始绘制一个完整的圆，-0.5\*pi这个参数是让进度条从12点钟方向开始绘制，系统默认从3点钟方向开始绘制。

//画进度条
    canvas.drawArc(rect, -0.5 * pi, _value * 2 * pi, false, paint);

代码可以直接复制下来使用，注释非常完善，欢迎指正。

[e02d4daf148c466291c29e2205451831.png]: https://img-blog.csdnimg.cn/e02d4daf148c466291c29e2205451831.png
[97770f6dd15d4708b342862682f9b782.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/e20538cd5f8e4eba8c5ef040732ee43e.png