Flutter进度指示器

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

1. LinearProgressIndicator组件

LinearProgressIndicator是一个线性、条状的进度条

定义如下：

LinearProgressIndicator({
    Key key
    double value,  
    Color backgroundColor,
    Animation<Color> valueColor,
    String semanticsLabel,  // 语义标签
    String semanticsValue,  // 语义值
  })

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

代码示例如下

// 模糊进度条(循环执行动画)
LinearProgressIndicator(
  backgroundColor: Colors.grey[200],
  valueColor: AlwaysStoppedAnimation(Colors.blue),
),
// 固定在 进度条50%的位置
LinearProgressIndicator(
  backgroundColor: Colors.grey[200],
  valueColor: AlwaysStoppedAnimation(Colors.blue),
  value: .5, 
)

2. CircularProgressIndicator

CircularProgressIndicator是一个圆形进度条

定义如下：

CircularProgressIndicator({
    Key key
    double value,  
    Color backgroundColor,
    Animation<Color> valueColor,
    this.strokeWidth = 4.0,
    String semanticsLabel,  // 语义标签
    String semanticsValue,  // 语义值
  })

strokeWidth ：表示圆形进度条的粗细，代码示例如下：

// 模糊进度条(循环执行动画)
CircularProgressIndicator(
  backgroundColor: Colors.grey[200],
  valueColor: AlwaysStoppedAnimation(Colors.blue),
),
// 固定在 进度条50%的位置，会显示一个半圆
CircularProgressIndicator(
  backgroundColor: Colors.grey[200],
  valueColor: AlwaysStoppedAnimation(Colors.blue),
  value: .5,
),

3.自定义进度条尺寸

LinearProgressIndicator和CircularProgressIndicator都是取父容器的尺寸作为绘制的边界的，因此，我们便可以通过尺寸限制类Widget，如ConstrainedBox、SizedBox。

代码示例如下：

// 线性进度条高度指定为3
SizedBox(
  height: 3,
  child: LinearProgressIndicator(
    backgroundColor: Colors.grey[200],
    valueColor: AlwaysStoppedAnimation(Colors.blue),
    value: .5,
  ),
),
// 圆形进度条宽高指定为100
SizedBox(
  height: 100,
  width: 100,
  child: CircularProgressIndicator(
    backgroundColor: Colors.grey[200],
    valueColor: AlwaysStoppedAnimation(Colors.blue),
    value: .7,
  ),
),

如果想实现进度条动画表换效果，可以结合Flutter中的 AnimationController 来控制动画，然后在根据Flutter的生命周期，去初始化（initState）设置值，动画完成需要进行销毁，移除（dispose）。

最后编辑于：2019.11.04 17:00:15