Flutter学习日记之进度条的使用

Posted 2021-06-30 Android_小黑

本文地址：https://blog.csdn.net/qq_40785165/article/details/118249651，转载需附上此地址

大家好，我是小黑，一个还没秃头的程序员~~~

山不辞土，故能成其高；海不辞水，故能成其深！

本次介绍的是常用控件之进度条，源码地址：https://gitee.com/fjjxxy/flutter-study.git，进度条有两个组件:

• LinearProgressIndicator 直线矩形进度条
• CircularProgressIndicator 圆形进度条

效果如下：

（一）直线矩形进度条LinearProgressIndicator

基础参数如下：

参数	说明
value	当前进度，值为0-1
backgroundColor	当前进度，值为0-1
color	进度颜色,当valueColor为null时会使用
valueColor	进度颜色，可以达到颜色补间动画的效果
minHeight	进度条最小的高度

基本的矩形进度条的代码如下：

          LinearProgressIndicator(
            value: 0.1,
            valueColor: AlwaysStoppedAnimation(Colors.red),
            backgroundColor: Colors.white,
            minHeight: 10,
          )

如果去掉value参数，就是不会停下来的进度条了

（二）定时器

这里使用一个周期性定时器来模拟进度条动态变化，使用Timer来实现定时器，代码如下：

    time = Timer.periodic(Duration(milliseconds: 1000), (timer) {
      print("$value${value == 1.0}");
      if (value == 1.0) {
        setState(() {
          value = 0;
        });
      }
      setState(() {
        value = NumberUtils.addNumber(value, 0.1);
      });
    });

这里有个问题，小数之间相加可能会发生精度问题，会得出如0.900000009这样的答案，所以这里要先将小数乘于一个倍数变成整数加减之后再除于相同倍数求出答案,代码如下:

class NumberUtils {
 static addNumber(a, b) {
    int aInt = (a * 100).floor();
    int bInt = (b * 100).floor();
    return (aInt + bInt) / 100;
  }
}

（三）圆形进度条CircularProgressIndicator

基础参数如下：

参数	说明
value	当前进度，值为0-1
backgroundColor	当前进度，值为0-1
color	进度颜色,当valueColor为null时会使用
valueColor	进度颜色，可以达到颜色补间动画的效果
strokeWidth	进度条（圆环）的宽度

基本使用的代码如下：

              CircularProgressIndicator(
                strokeWidth: 15,
                valueColor: AlwaysStoppedAnimation(Colors.red),
                backgroundColor: Colors.black54,
                value: 0.1,
              )

（四）配合动画实现进度条颜色补间效果

效果请见Demo中第三条进度条,代码如下：

  _animationController =
        AnimationController(vsync: this, duration: Duration(seconds: 10));
    _animationController.forward();
    _animationController.addListener(() => setState(() => {}));

这个将实现在10秒内将颜色从一种颜色变成另一种颜色，Demo中用的是同一种颜色，代码如下：

• begin 动画开始的颜色
• end 动画结束的颜色

          LinearProgressIndicator(
            backgroundColor: Colors.white,
            valueColor: ColorTween(begin: Colors.red, end: Colors.red)
                .animate(_animationController),
            value: _animationController.value,
          )

到此为止，进度条组件就介绍完了，要是觉得有用记得点个赞，感兴趣的小伙伴可以下载源码看一下，希望大家可以点个Star，支持一下小白的flutter学习经历，最后，希望喜欢我文章的朋友们可以帮忙点赞、收藏，也可以关注一下，如果有问题可以在评论区提出，后面我会持续更新Flutter的学习记录，与大家分享，谢谢大家的支持与阅读!