基础Widgets - 进度条 - 《Flutter 实战》

进度条

进度条

和大多数UI库一样，Flutter也提供了两种进度指示器。一种是水平方向线性的LinearProgressIndicator，另一种是圆形的CircularProgressIndicator。两种指示器都支持循环模式和精确精度:

循环模式：循环模式会有一个循环的动画，用于无法获得精确进度的场景，循环模式为默认模式。
精确模式：用于可以获得精确进度的场景，比如大多数文件下载场景。精确模式需要提供value属性值，它的取值范围是[0,1]，代表当前进度的百分比。

水平进度条

LinearProgressIndicator是水平方向线性的进度条，下面分别给出循环模式和精确模式的示例：

 Column(
  children: <Widget>[
    //循环模式  
    LinearProgressIndicator(),
    Padding(
      padding: const EdgeInsets.symmetric(vertical: 8.0),
      child: LinearProgressIndicator(
        backgroundColor: Colors.grey[200],
        value: .2, //精确模式，进度20%
      ),
    ),
   ]
  )

运行效果如下：

圆形进度条

CircularProgressIndicator是圆形进度条，下面分别给出循环模式和精确模式的示例：

Column(
  children: <Widget>[
    //循环模式  
    CircularProgressIndicator(),
    Padding(
      padding: const EdgeInsets.only(top: 20.0),
      child: CircularProgressIndicator(
        value: .5, //精确模式，进度50%
      ),
    )
  ],
)

CircularProgressIndicator支持一个strokeWidth属性，表示圆形进度条画笔的宽度，默认为4像素（逻辑像素），我们看看strokeWidth值为2.0时的效果：

代码：

CircularProgressIndicator(
  strokeWidth: 2.0,
)

属性

由于LinearProgressIndicator和CircularProgressIndicator都继承自ProgressIndicator，所以它们都支持ProgressIndicator定义的一些属性，下面我们来看看常用属性：

ProgressIndicator({
  ...  
  double value,
  Color backgroundColor,
  Animation<Color> valueColor,
})

value：进度条当前的精确进度，如果为null，则精度条为循环模式。
backgroundColor：进度条背景色，目前只有在LinearProgressIndicator设置有效，CircularProgressIndicator暂不支持背景色。
valueColor：LinearProgressIndicator和CircularProgressIndicator的进度指示色都是一个动画值，也就是说指示色是可以执行动画的，只不过默认是使用了固定色(主题色)而已。我们可以指定一个Animation<Color>来为指示色执行动画：
```
CircularProgressIndicator(
  valueColor: ColorTween(begin: Colors.blue, end: Colors.green)
      .animate(_controller),
)
```
这个示例运行后，圆形精度条的颜色会在蓝色和绿色之间渐变。关于动画的详细内容，请参考后面“动画”一章内容。

自定义进度条样式

定义进度条大小

进度条本身没有控制大小的属性，LinearProgressIndicator的默认高度是6像素，宽度自适应。CircularProgressIndicator默认的宽度和高度皆为36像素。我们可以通过指定父容器的宽高来自定义其大小，如：

...
SizedBox(
    height: 2.0, //高度指定为2像素
    child: LinearProgressIndicator()
),
SizedBox(
  height: 80.0, //高度和宽度均指定为80像素
  width: 80.0,
  child: CircularProgressIndicator(),
)
...

自定义颜色

假如我们想指定进度条颜色为绿色，有两种方法可以自定义进度条颜色，：

通过主题来自定义：
```
Theme(
  data: ThemeData(
    primarySwatch: Colors.green,
  ),
  child: LinearProgressIndicator(
    value: .2,
  ),
)
```
运行效果如下：

通过主题定义widget样式的方法在flutter中非常常见，我们将在后面专门“主题”章节详细介绍。
通过valueColor属性：

我们可以通过给valueColor指定一个AlwaysStoppedAnimation<Color>对象来使用固定的颜色（而非动画颜色）。
```
CircularProgressIndicator(
  valueColor: new AlwaysStoppedAnimation<Color>(Colors.green),
  value: .9,
)
```
运行效果如下：