如何实现各种类型的进度条

1 概念介绍

进度条是常用的组件之一，它主要用来显示某种动作的完成进度。Flutter提供了多种进度条组件，常用的是水平进度条：LinearProgressIndicator；圆形进度条
:CircularProgressIndicator和RefreshProgressIndicator。接下来我们分析介绍它们的用法。

2 使用方法

和其它的Widget一样，进度条提供了相关的属性来控制自己，下面是常用的属性：

• backgroundColor属性用来控制进度条背景颜色，就是进度条中全部进度的颜色；
• valueColor属性用来控制进度条中当前进度的颜色；
• value属性用来控制当前的进度值,取值范围为0-1之间的小数；
  我们刚才说的三种进度条：、, CircularProgressIndicator和RefreshProgressIndicator都包含这三种属性，这三种Widget
  只是显示进度的形状不同，在使用方法上完全相同。

3 示例代码

class _ExProgressWidgetState extends State<ExProgressWidget> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("Example of Progress indicator"),
          backgroundColor: Colors.purpleAccent,
        ),
        body: Container(
          width: 500,
          height: 700,
          alignment: Alignment.center,
          // child: const LinearProgressIndicator(
          //   backgroundColor: Colors.blue,
          //   valueColor: AlwaysStoppedAnimation(Colors.purpleAccent),
          //   value: 0.5,
          // ),
          // child: const CircularProgressIndicator(
          //   strokeWidth: 9,
          //   backgroundColor: Colors.blue,
          //   valueColor: AlwaysStoppedAnimation(Colors.yellow),
          //   value: 0.3,
          // ),
          child: const RefreshProgressIndicator(
            backgroundColor: Colors.blue,
            valueColor: AlwaysStoppedAnimation(Colors.yellow),
            // value: 1.0,
          )
        )
    );
  }
}

在上面的代码中我们分别使用了刚才介绍的三种进度条，它们的使用方法完成相同，只是形状不同，详细如下：
LinearProgressIndicator表示一个水平的进度条，当前进度是50%，显示为紫色，所有进度是100%,显示为蓝色；
CircularProgressIndicator表示一个圆形的进度条，当前进度是30%，显示为黄色，所有进度是100%,显示为蓝色；
RefreshProgressIndicator表示圆形进度条，不过它是在一个圆形背景上显示圆形的箭头,箭头的长度表示进度，显示为白色，整个背景显示为蓝色；
这里只是文字性的描述，大家可以自己动手编译程序，这样可以看到真实的运行效果。我在这里就不演示程序运行效果了，不过有些注意点还是需要做一些说明：
当前进度的颜色属性值是一个动画对象:AlwaysStoppedAnimation()，不是颜色对象，我们在后面介绍动画时再详细介绍。当前进度值是0-1之间的小数，
用来表示当前的进度，我们可以动态地修改该属性值，进而实现进度不断变化的效果。如果没有给该属性赋值，那么它会一起不停地显示进度变化过程。
看官们，关于进度条Widget相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!