flutter 自定义圆形进度条

最新推荐文章于 2024-09-29 09:11:42 发布
最新推荐文章于 2024-09-29 09:11:42 发布
阅读量1.7k 收藏 13
点赞数 3
分类专栏： flutter 文章标签： flutter html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/moasad/article/details/120092182
版权

原文是谁写的我也不知道，但是搜了这么多，没一个能用的，大多数的都没实时刷新，在自己的debug和学习下，进行了改进，这次可以直接用了xdm。

学习的笔记也记录在这里了

绘制需要的要素
1.纸: Canvas 画布对象
2.笔: Paint 画笔对象
3.形: Path 路径对象
4.色: Color 颜色对象

使用StreamController来进行实时的局部刷新

效果图：
在这里插入图片描述

程序主入口

void main() => runApp(MaterialApp(
    title: 'Flutter Demo',
    theme: ThemeData(
      primarySwatch: Colors.blue,
    ),
    home: Scaffold(
        appBar: AppBar(
          title: Text("Flutter 之旅"),
        ),
        body: CircleProgressWidget(
            progress: Progress(
                backgroundColor: Colors.grey,
                value: 0.0,
                radius: 100,
                completeText: "完成",
                color: Color(0xff46bcf6),
                strokeWidth: 4)
        ), 
    )
));

1.定义描述对象类Progress

1.1:定义描述对象类Progress

将需要变化的属性抽离出一个描述类

///信息描述类 [value]为进度，在0~1之间,进度条颜色[color]，
///未完成的颜色[backgroundColor],圆的半径[radius],线宽[strokeWidth]
///小点的个数[dotCount] 样式[style] 完成后的显示文字[completeText]
class Progress {
  double value;
  Color color;
  Color backgroundColor;
  double radius;
  double strokeWidth;
  int dotCount;
  TextStyle style;
  String completeText;
 
  Progress({this.value, //初始化函数
      this.color,
      this.backgroundColor,
      this.radius,
      this.strokeWidth,
      this.completeText="OK",
       this.style,
      this.dotCount = 40
      });
}

1.2自定义ProgressPainter

绘制逻辑

class ProgressPainter extends CustomPainter {
  Progress _progress;
  Paint _paint; //绘制的对象
  Paint _arrowPaint;//箭头的画笔
  Path _arrowPath;//箭头的路径
  double _radius;//半径
 
  ProgressPainter(
    this._progress,
  ) {
    _arrowPath=Path();
    _arrowPaint=Paint();
    _paint = Paint();
    _radius = _progress.radius - _progress.strokeWidth / 2;
  }
 
  @override
  void paint(Canvas canvas, Size size) { 
  //这个是我们定义painter时必须实现的方法，其中canvas就是提供出我们绘制的核心，
  //size是告诉我们画板的大小（通过CustomPaint的size或者child确定）
    Rect rect = Offset.zero & size;
    canvas.clipRect(rect); //裁剪区域
  }
 
  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

2.绘制

2.1:绘制进度条

如果直接用给定的半径，你会发现是这样的。原因很简单，因为Canvas画圆半径是内圆加一半线粗。
于是我们需要校正一下半径:通过平移一半线粗再缩小一半线粗的半径。

_radius = _progress.radius - _progress.strokeWidth / 2;
 
 @override
  void paint(Canvas canvas, Size size) {
    canvas.translate(_progress.strokeWidth / 2, _progress.strokeWidth / 2);

在这里插入图片描述
背景直接画圆，进度使用drawArc方法，要注意的是Flutter中使用的是弧度!!。

save操作会保存此前的所有绘制内容和canvas状态。在调用该函数之后的绘制操作和变换操作，会重新记录。当你调用restore()之后，会把save到restore之间所进行的操作与之前的内容进行合并，之后再使用局部更新的StreamController来更新状态

drawProgress(Canvas canvas) {
  canvas.save();
  _paint//背景
    ..style = PaintingStyle.stroke
    ..color = _progress.backgroundColor
    ..strokeWidth = _progress.strokeWidth;
  canvas.drawCircle(Offset(_radius, _radius), _radius, _paint);
  
  _paint//进度
    ..color = _progress.color
    ..strokeWidth = _progress.strokeWidth * 1.2
    ..strokeCap = StrokeCap.round;
  double sweepAngle = _progress.value * 360; //完成角度
  canvas.drawArc(Rect.fromLTRB(0, 0, _radius * 2, _radius * 2),
      -90 / 180 * pi, sweepAngle / 180 * pi, false, _paint);
  canvas.restore();
}

2.2:绘制箭头

其实箭头还是蛮好画的，注意relativeLineTo和lineTo结合使用，可能会更方便。

drawArrow(Canvas canvas) {
  canvas.save();
  canvas.translate(_radius, _radius);
  canvas.rotate((180 + _progress.value * 360) / 180 * pi);
  var half = _radius / 2;
  var eg = _radius / 50; //单位长
  _arrowPath.moveTo(0, -half - eg * 2);//1
  _arrowPath.relativeLineTo(eg * 2, eg * 6);//2
  _arrowPath.lineTo(0, -half + eg * 2);//3
  _arrowPath.lineTo(0, -half - eg * 2);//1
  _arrowPath.relativeLineTo(-eg * 2, eg * 6);
  _arrowPath.lineTo(0, -half + eg * 2);
  _arrowPath.lineTo(0, -half - eg * 2);
  canvas.drawPath(_arrowPath, _arrowPaint);
  canvas.restore();
}

2.3:绘制点

绘制点的时候要注意颜色的把控，判断进度条是否到达，然后更改颜色
在这里插入图片描述

void drawDot(Canvas canvas) {
  canvas.save();
  int num = _progress.dotCount;
  canvas.translate(_radius, _radius);
  for (double i = 0; i < num; i++) {
    canvas.save();
    double deg = 360 / num * i;
    canvas.rotate(deg / 180 * pi);
    _paint
      ..strokeWidth = _progress.strokeWidth / 2
      ..color = _progress.backgroundColor
      ..strokeCap = StrokeCap.round;
    if (i * (360 / num) <= _progress.value * 360) {
      _paint..color = _progress.color;
    }
    canvas.drawLine(
        Offset(0, _radius * 3 / 4), Offset(0, _radius * 4 / 5), _paint);
    canvas.restore();
  }
  canvas.restore();
}

3.组装使用

使用_streamController来更新进度条状态

class CircleProgressWidget extends StatefulWidget {
  final Progress progress;

  CircleProgressWidget({Key key, this.progress}) : super(key: key);

  @override
  _CircleProgressWidgetState createState() => _CircleProgressWidgetState(this.progress);
}

class _CircleProgressWidgetState extends State<CircleProgressWidget> {

  Progress progress;
  _CircleProgressWidgetState(this.progress);

  ///计时器
  Timer _timer;
  ///倒计时6秒
  double totalTimeNumber = 10000;
  ///当前的时间
  double currentTimeNumber = 10000;
  StreamController<double> _streamController = StreamController();

  @override
  void initState(){
    startTimer();
  }

  @override
  void dispose(){
    _streamController.close();
    _timer.cancel();
  }

  void startTimer() {
    ///间隔100毫秒执行时间
    _timer = Timer.periodic(Duration(milliseconds: 100), (timer) {
      ///间隔100毫秒执行一次 每次减100
      currentTimeNumber -= 100;

      ///如果计完成取消定时
      if (currentTimeNumber <= 0) {
        _timer.cancel();
        currentTimeNumber = 0;
      }
      ///流数据更新
      progress.value = (totalTimeNumber-currentTimeNumber)/totalTimeNumber;
      _streamController.add((totalTimeNumber-currentTimeNumber)/totalTimeNumber);
    });
  }

  @override
  Widget build(BuildContext context) {
    var progress = Container(
      width: widget.progress.radius * 2,
      height: widget.progress.radius * 2,
      child: CustomPaint(
        painter: ProgressPainter(widget.progress),
      ),
    );
    String txt = "${(100 * widget.progress.value).toStringAsFixed(1)} %";
    var text = Text(
      widget.progress.value == 1.0 ? widget.progress.completeText : txt,
      style: widget.progress.style ??
          TextStyle(fontSize: widget.progress.radius / 6),
    );
    return Scaffold(
        body: Container(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height, //容器填充满整个屏幕
          child: StreamBuilder<double>(
            stream: _streamController.stream,
            initialData: 0,
            builder: (BuildContext context, AsyncSnapshot<double> snapshot) {
              return Stack(
                alignment: Alignment.center,
                children: [
                  Text(
                    widget.progress.value == 1.0 ? widget.progress.completeText : "${(100 * widget.progress.value).toStringAsFixed(1)} %",
                    style: widget.progress.style ??
                        TextStyle(fontSize: widget.progress.radius / 6),
                  ),
                  Container(
                    width: widget.progress.radius * 2,
                    height: widget.progress.radius * 2,
                    child: CustomPaint(
                      painter: ProgressPainter(widget.progress),
                    ),
                  ),

                ],
              );
            },
          ),
        )
    );
  }
}

4.全部代码

import 'dart:async';
import 'dart:math';
import 'package:flutter/material.dart';

///信息描述类 [value]为进度，在0~1之间,进度条颜色[color]，
///未完成的颜色[backgroundColor],圆的半径[radius],线宽[strokeWidth]
///小点的个数[dotCount] 样式[style] 完成后的显示文字[completeText]
class Progress {
  double value;
  Color color;
  Color backgroundColor;
  double radius;
  double strokeWidth;
  int dotCount;
  TextStyle style;
  String completeText;

  Progress(
      {this.value,
        this.color,
        this.backgroundColor,
        this.radius,
        this.strokeWidth,
        this.completeText = "OK",
        this.style,
        this.dotCount = 40
      }
      );
}

class CircleProgressWidget extends StatefulWidget {
  final Progress progress;

  CircleProgressWidget({Key key, this.progress}) : super(key: key);

  @override
  _CircleProgressWidgetState createState() => _CircleProgressWidgetState(this.progress);
}

class _CircleProgressWidgetState extends State<CircleProgressWidget> {

  Progress progress;
  _CircleProgressWidgetState(this.progress);

  ///计时器
  Timer _timer;
  ///倒计时6秒
  double totalTimeNumber = 10000;
  ///当前的时间
  double currentTimeNumber = 10000;
  StreamController<double> _streamController = StreamController();

  @override
  void initState(){
    startTimer();
  }

  @override
  void dispose(){
    _streamController.close();
    _timer.cancel();
  }

  void startTimer() {
    ///间隔100毫秒执行时间
    _timer = Timer.periodic(Duration(milliseconds: 100), (timer) {
      ///间隔100毫秒执行一次 每次减100
      currentTimeNumber -= 100;

      ///如果计完成取消定时
      if (currentTimeNumber <= 0) {
        _timer.cancel();
        currentTimeNumber = 0;
      }
      ///流数据更新
      progress.value = (totalTimeNumber-currentTimeNumber)/totalTimeNumber;
      _streamController.add((totalTimeNumber-currentTimeNumber)/totalTimeNumber);
    });
  }

  @override
  Widget build(BuildContext context) {
    var progress = Container(
      width: widget.progress.radius * 2,
      height: widget.progress.radius * 2,
      child: CustomPaint(
        painter: ProgressPainter(widget.progress),
      ),
    );
    String txt = "${(100 * widget.progress.value).toStringAsFixed(1)} %";
    var text = Text(
      widget.progress.value == 1.0 ? widget.progress.completeText : txt,
      style: widget.progress.style ??
          TextStyle(fontSize: widget.progress.radius / 6),
    );
    return Scaffold(
        body: Container(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height, //容器填充满整个屏幕
          child: StreamBuilder<double>(
            stream: _streamController.stream,
            initialData: 0,
            builder: (BuildContext context, AsyncSnapshot<double> snapshot) {
              return Stack(
                alignment: Alignment.center,
                children: [
                  Text(
                    widget.progress.value == 1.0 ? widget.progress.completeText : "${(100 * widget.progress.value).toStringAsFixed(1)} %",
                    style: widget.progress.style ??
                        TextStyle(fontSize: widget.progress.radius / 6),
                  ),
                  Container(
                    width: widget.progress.radius * 2,
                    height: widget.progress.radius * 2,
                    child: CustomPaint(
                      painter: ProgressPainter(widget.progress),
                    ),
                  ),

                ],
              );
            },
          ),
        )
    );
  }
}

class ProgressPainter extends CustomPainter {
  Progress _progress;
  Paint _paint;
  Paint _arrowPaint;
  Path _arrowPath;
  double _radius;

  ProgressPainter(
      this._progress,
      ) {
    _arrowPath = Path();
    _arrowPaint = Paint();
    _paint = Paint();
    _radius = _progress.radius - _progress.strokeWidth / 2;
  }

  @override
  void paint(Canvas canvas, Size size) {
    Rect rect = Offset.zero & size;
    canvas.clipRect(rect); //裁剪区域
    canvas.translate(_progress.strokeWidth / 2, _progress.strokeWidth / 2);

    drawProgress(canvas);
    drawArrow(canvas);
    drawDot(canvas);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }

  drawProgress(Canvas canvas) { //进度条
    canvas.save();
    _paint//背景
      ..style = PaintingStyle.stroke
      ..color = _progress.backgroundColor
      ..strokeWidth = _progress.strokeWidth;
    canvas.drawCircle(Offset(_radius, _radius), _radius, _paint);

    _paint//进度
      ..color = _progress.color
      ..strokeWidth = _progress.strokeWidth * 1.2
      ..strokeCap = StrokeCap.round;
    double sweepAngle = _progress.value * 360; //完成角度
    print(sweepAngle);
    canvas.drawArc(Rect.fromLTRB(0, 0, _radius * 2, _radius * 2),
        -90 / 180 * pi, sweepAngle / 180 * pi, false, _paint);
    canvas.restore();
  }

  drawArrow(Canvas canvas) { //箭头
    canvas.save();
    canvas.translate(_radius, _radius);// 将画板移到中心
    canvas.rotate((180 + _progress.value * 360) / 180 * pi);//旋转相应角度
    var half = _radius / 2;//基点
    var eg = _radius / 50; //单位长
    _arrowPath.moveTo(0, -half - eg * 2);
    _arrowPath.relativeLineTo(eg * 2, eg * 6);
    _arrowPath.lineTo(0, -half + eg * 2);
    _arrowPath.lineTo(0, -half - eg * 2);
    _arrowPath.relativeLineTo(-eg * 2, eg * 6);
    _arrowPath.lineTo(0, -half + eg * 2);
    _arrowPath.lineTo(0, -half - eg * 2);
    canvas.drawPath(_arrowPath, _arrowPaint);
    canvas.restore();
  }

  void drawDot(Canvas canvas) { //绘制点
    canvas.save();
    int num = _progress.dotCount;
    canvas.translate(_radius, _radius);
    for (double i = 0; i < num; i++) {
      canvas.save();
      double deg = 360 / num * i;
      canvas.rotate(deg / 180 * pi);
      _paint
        ..strokeWidth = _progress.strokeWidth / 2
        ..color = _progress.backgroundColor
        ..strokeCap = StrokeCap.round;
      if (i * (360 / num) <= _progress.value * 360) {
        _paint..color = _progress.color;
      }
      canvas.drawLine(
          Offset(0, _radius * 3 / 4), Offset(0, _radius * 4 / 5), _paint);
      canvas.restore();
    }
    canvas.restore();
  }
}

参考1

鸣蜩二九~
关注
专栏目录
Flutter：教你用CustomPaint画一个自定义的CircleProgressBar
2301_78416573的博客
04-05 708
*Android精讲视频学习后更加是如虎添翼！**进军BATJ大厂等（备战）！现在都说互联网寒冬，其实无非就是你上错了车，且穿的少（技能），要是你上对车，自身技术能力够强，公司换掉的代价大，怎么可能会被裁掉，都是淘汰末端的业务Curd而已！现如今市场上初级程序员泛滥，这套教程针对Android开发工程师1-6年的人员、正处于瓶颈期，想要年后突破自己涨薪的，进阶Android中高级、架构师对你更是如鱼得水！
flutter-自定义进度条
皇甫淮智的博客
08-12 3170
效果图 代码 class NewUserProgressWidget extends StatelessWidget { int progress; double width = 60; double height = 5; double radius = 5; NewUserProgressWidget(this.progress); @override @ov...
Flutter 初识：数据显示控件
yang_6799的博客
08-08 917
Stepper 是 Flutter 中用于显示多步骤流程的小部件，通常用于需要分阶段完成的任务。它可以显示确定或不确定的进度状态。Tooltip 是 Flutter 中用于显示工具提示的小部件，当用户长按或悬停在某个元素上时会出现一个带有说明信息的弹出框。Chip 是 Flutter 中用于显示信息的紧凑元素，它通常包含一个标签和可选的图标、删除按钮等，并且可以用作交互式元素。Badge 是 Flutter 中用于显示额外信息的小部件，通常出现在图标或按钮的角落，以提示用户某些状态或通知。
flutter windows的进度条，选择框和radioButton功能演示
最新发布
weixin_42668920的博客
09-29 444
构建应用的界面，包括一个Scaffold，其中有一个AppBar显示标题，主体是一个Column布局，包含一个复选框、一定间距、圆形进度指示器、线性进度指示器、文本和三个单选按钮及其对应的文本。这个应用程序展示了如何使用 Flutter 的进度指示器和单选按钮，并通过复选框控制进度指示器的动画。维护一个布尔变量_isChecked表示复选框是否被选中，一个AnimationController类型的_controller用于控制进度指示器的动画，以及一个整数_radioValue表示单选按钮的值。
flutter进度条_[-Flutter 自组篇-] 圆形进度条
weixin_39575047的博客
11-30 790
今天写个简单的，自定义一个圆形进度条，并且加上小箭头指向内圈进度。进度条已上传到公网，使用circle_progress: ^0.0.1，使用如下void main() => runApp(MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ),...
[-Flutter 自组篇-] 圆形进度条
张风捷特烈的博客
08-02 339
今天写个简单的，自定义一个圆形进度条，并且加上小箭头指向内圈进度。 进度条已上传到公网，使用circle_progress: ^0.0.1，使用如下 void main() => runApp(MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ...
Flutter 实现进度条效果
08-19
在一些上传页面炫酷的进度条效果都是怎么实现的，今天小编通过本文给大家分享Flutter 一行代码快速实现你的进度条效果，感兴趣的朋友一起看看吧
Flutter组件之圆形进度条（CircularProgressIndicator）
斌
06-22 8196
/** * 圆形进度条 * 可以在外面包一层SizedBox，间接改变进度条的大小 *const CircularProgressIndicator({ Key key, double value,//0~1的浮点数，用来表示进度多少;如果 value 为 null 或空，则显示一个动画，否则显示一个定值 Color backgroundColor,//背景颜色 ...
[-Flutter 自定义组件-] 圆形进度条
weixin_45365889的博客
08-12 1292
void main() => runApp(MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: Scaffold( appBar: AppBar( t...
自定义圆形进度条（带圆点）
12-12
本示例中，我们探讨的主题是如何创建一个自定义的圆形进度条，并且带有圆点效果。这个控件可以用于显示某个任务的完成度或者加载状态，通过调整颜色和属性，使其更加符合应用程序的视觉风格。 首先，我们需要创建一...
Flutter Slider 进度条
10-21
Flutter Slider 进度条
圆形进度条(弧形刻度)CircleProgress
07-09
圆形进度条(弧形刻度)CircleProgress
flutter自绘进度条
weixin_44239910的博客
10-08 1972
class VideoProgressBarController extends ChangeNotifier { double progressBarValue = .0; updateProgressValue(double value){ progressBarValue = value; notifyListeners(); } } 前言 本文的记录如何用CustomPaint、GestureDetector实现一个进度条控件。首先需要说明的是flutter..
使用flutter做圆形进度条 (桌面端)
weixin_43929450的博客
07-26 486
如需项目demo，微信扫下面的二维码，注册成功，到下面的我的-联系客服 问我要代码。
Flutter 自定义圆形进度条
wapchief的博客
08-26 2642
//进度条 class CircleProgressBar extends CustomPainter { Paint _paintBackground; Paint _paintFore; final double pi = 3.1415926; var progress; //0-360 CircleProgressBar(this.progress) { _...
flutter中自定义进度条样式
qq_20426717的博客
05-29 1292
SliderTheme( data: SliderThemeData( tickMarkShape: LineSliderTickMarkShape(strokeWidth: 2)), child: Slider( divisions: 10, value: value, onChanged: (double value) {}, ), ) ///进度条内容自定义 class LineSliderTickMarkShape e.
Flutter开发圆形计时进度条RingProgressBar
许天成的博客
03-03 2511
用Flutter手把手写一个圆形计时进度条RingProgressBar
flutter 自定义进度条progress
isusjjyy的专栏
10-30 2827
系统自带进度条 有一定局限性，只能设置背景色，前景色要设置动画的颜色值，且不能自定义是否圆角等属性 // 2表示当前的值，10表示最大值 LinearProgressIndicator( value: 2 /10, backgroundColor: Constants().grayBgColor, ), 自定义进度条类 import 'package:flutter/m...
Flutter圆形进度条
05-24
Flutter中的圆形进度条可以使用CircularProgressIndicator widget来实现。下面是一个简单的例子： ```dart class MyCircularProgress extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: CircularProgressIndicator(), ); } } ``` 在上面的例子中，我们创建了一个名为MyCircularProgress的无状态小部件，并在中心放置了一个CircularProgressIndicator小部件。您可以将CircularProgressIndicator放置在您的应用程序中的任何位置，以显示进度。 您也可以自定义圆形进度条的颜色、大小和线条宽度等属性。例如，要更改进度条的颜色，可以使用valueColor属性： ```dart CircularProgressIndicator( valueColor: AlwaysStoppedAnimation<Color>(Colors.red), ) ``` 要更改进度条的大小，可以使用半径属性： ```dart CircularProgressIndicator( radius: 30, ) ``` 要更改线条宽度，可以使用strokeWidth属性： ```dart CircularProgressIndicator( strokeWidth: 5, ) ``` 以上是一些基本的自定义设置，您可以根据需要进行更多自定义。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值