Flutter基础组件<进度指示器ProgressIndicator>

Flutter入门笔记系列文章部分内容来源于《Flutter 实战》，如有侵权请联系删除！

Material 组件库中提供了两种进度指示器：LinearProgressIndicator和CircularProgressIndicator，它们都可以同时用于精确的进度指示和模糊的进度指示。精确进度通常用于任务进度可以计算和预估的情况，比如文件下载；而模糊进度则用户任务进度无法准确获得的情况，如下拉刷新，数据提交等。

LinearProgressIndicator

LinearProgressIndicator是一个线性进度条。

  const LinearProgressIndicator({
    Key key,
    double value,  //当前进度
    Color backgroundColor,  //进度条背景色
    Animation<Color> valueColor,  //进度颜色
    ……
  })

value：value表示当前的进度，取值范围为[0,1]；如果value为null时则指示器会执行一个循环动画（模糊进度）；当value不为null时，指示器为一个具体进度的进度条。
backgroundColor：指示器的背景色。
valueColor: 指示器的进度条颜色；值得注意的是，该值类型是Animation<Color>，这允许我们对进度条的颜色也可以指定动画。如果我们不需要对进度条颜色执行动画，换言之，我们想对进度条应用一种固定的颜色，此时我们可以通过AlwaysStoppedAnimation来指定。

看一个例子

children: <Widget>[
  Padding(
      padding: EdgeInsets.all(16),
      child: LinearProgressIndicator(
        //模糊进度，循环进度进度条
        backgroundColor: Colors.grey,
        valueColor: AlwaysStoppedAnimation(Colors.red),
      )),
  Padding(
      padding: EdgeInsets.all(16),
      child: LinearProgressIndicator(
        //具体进度
        backgroundColor: Colors.grey,
        valueColor: AlwaysStoppedAnimation(Colors.blue),
        value: 0.6,
      ))
]

运行效果

线性进度条

红色进度条一直在执行循环动画，蓝色进度停留在60%的位置。

CircularProgressIndicator

CircularProgressIndicator是一个圆形进度条。

children: <Widget>[
  Padding(padding: EdgeInsets.all(16),
  child: CircularProgressIndicator(
    valueColor: AlwaysStoppedAnimation(Colors.red),
  ),),
  Padding(padding: EdgeInsets.all(16),
    child: CircularProgressIndicator(
      value: 0.5,
      valueColor: AlwaysStoppedAnimation(Colors.blue),
    ),)
]

运行效果

圆形进度条

红色进度条一直在执行循环动画，蓝色进度条停留在50%位置。

进度条尺寸

我们可以发现LinearProgressIndicator和CircularProgressIndicator，并没有提供设置圆形进度条尺寸的参数；如果我们希望LinearProgressIndicator的线细一些，或者希望CircularProgressIndicator的圆大一些该怎么做？

其实LinearProgressIndicator和CircularProgressIndicator都是取父容器的尺寸作为绘制的边界的。知道了这点，我们便可以通过尺寸限制类Widget，如ConstrainedBox、SizedBox 等。

children: <Widget>[
  Padding(
    padding: EdgeInsets.all(16),
    child: SizedBox(
        height: 200,
        width: 200,
        child: CircularProgressIndicator(
          valueColor: AlwaysStoppedAnimation(Colors.red),
        )),
  ),
  Padding(
    padding: EdgeInsets.all(16),
    child: SizedBox(
      height: 8,
      child: LinearProgressIndicator(
        valueColor: AlwaysStoppedAnimation(Colors.blue),
      ),
    ),
  )
]

运行效果

修改进度条尺寸