3.6 进度指示器

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

LinearProgressIndicator

LinearProgressIndicator是一个线性、条状的进度条，定义如下：

1LinearProgressIndicator({
2  double value,
3  Color backgroundColor,
4  Animation<Color> valueColor,
5  ...
6})

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

示例

1// 模糊进度条(会执行一个动画)
2LinearProgressIndicator(
3  backgroundColor: Colors.grey[200],
4  valueColor: AlwaysStoppedAnimation(Colors.blue),
5),
6//进度条显示50%
7LinearProgressIndicator(
8  backgroundColor: Colors.grey[200],
9  valueColor: AlwaysStoppedAnimation(Colors.blue),
10  value: .5, 
11)

运行效果如图3-30所示：

第一个进度条在执行循环动画：蓝色条一直在移动，而第二个进度条是静止的，停在50%的位置。

CircularProgressIndicator

CircularProgressIndicator是一个圆形进度条，定义如下：

1 CircularProgressIndicator({
2  double value,
3  Color backgroundColor,
4  Animation<Color> valueColor,
5  this.strokeWidth = 4.0,
6  ...   
7})

前三个参数和LinearProgressIndicator相同，不再赘述。strokeWidth 表示圆形进度条的粗细。示例如下：

1// 模糊进度条(会执行一个旋转动画)
2CircularProgressIndicator(
3  backgroundColor: Colors.grey[200],
4  valueColor: AlwaysStoppedAnimation(Colors.blue),
5),
6//进度条显示50%，会显示一个半圆
7CircularProgressIndicator(
8  backgroundColor: Colors.grey[200],
9  valueColor: AlwaysStoppedAnimation(Colors.blue),
10  value: .5,
11),

运行效果如图3-31所示：

第一个进度条会执行旋转动画，而第二个进度条是静止的，它停在50%的位置。

自定义尺寸

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

其实LinearProgressIndicator和CircularProgressIndicator都是取父容器的尺寸作为绘制的边界的。知道了这点，我们便可以通过尺寸限制类Widget，如ConstrainedBox、SizedBox （我们将在后面容器类组件一章中介绍）来指定尺寸，如：

1// 线性进度条高度指定为3
2SizedBox(
3  height: 3,
4  child: LinearProgressIndicator(
5    backgroundColor: Colors.grey[200],
6    valueColor: AlwaysStoppedAnimation(Colors.blue),
7    value: .5,
8  ),
9),
10// 圆形进度条直径指定为100
11SizedBox(
12  height: 100,
13  width: 100,
14  child: CircularProgressIndicator(
15    backgroundColor: Colors.grey[200],
16    valueColor: AlwaysStoppedAnimation(Colors.blue),
17    value: .7,
18  ),
19),

运行效果如图3-32所示：

图3-32

注意，如果CircularProgressIndicator显示空间的宽高不同，则会显示为椭圆。如：

1// 宽高不等
2SizedBox(
3  height: 100,
4  width: 130,
5  child: CircularProgressIndicator(
6    backgroundColor: Colors.grey[200],
7    valueColor: AlwaysStoppedAnimation(Colors.blue),
8    value: .7,
9  ),
10),

运行效果如图3-33所示：

progress_oval

进度色动画

前面说过可以通过valueColor对进度条颜色做动画，关于动画我们将在后面专门的章节详细介绍，这里先给出一个例子，读者在了解了Flutter动画一章后再回过头来看。

我们实现一个进度条在3秒内从灰色变成蓝色的动画：

1import 'package:flutter/material.dart';
2
3class ProgressRoute extends StatefulWidget {
4  @override
5  _ProgressRouteState createState() => _ProgressRouteState();
6}
7
8class _ProgressRouteState extends State<ProgressRoute>
9    with SingleTickerProviderStateMixin {
10  AnimationController _animationController;
11
12  @override
13  void initState() {
14    //动画执行时间3秒  
15    _animationController =
16        AnimationController(vsync: this, duration: Duration(seconds: 3));
17    _animationController.forward();
18    _animationController.addListener(() => setState(() => {}));
19    super.initState();
20  }
21
22  @override
23  void dispose() {
24    _animationController.dispose();
25    super.dispose();
26  }
27
28  @override
29  Widget build(BuildContext context) {
30    return SingleChildScrollView(
31      child: Column(
32        children: <Widget>[
33            Padding(
34            padding: EdgeInsets.all(16),
35            child: LinearProgressIndicator(
36              backgroundColor: Colors.grey[200],
37              valueColor: ColorTween(begin: Colors.grey, end: Colors.blue)
38                .animate(_animationController), // 从灰色变成蓝色
39              value: _animationController.value,
40            ),
41          );
42        ],
43      ),
44    );
45  }
46}

自定义进度指示器样式

定制进度指示器风格样式，可以通过CustomPainter Widget 来自定义绘制逻辑，实际上LinearProgressIndicator和CircularProgressIndicator也正是通过CustomPainter来实现外观绘制的。关于CustomPainter，我们将在后面“自定义Widget”一章中详细介绍。

flutter_spinkit (opens new window) 包提供了多种风格的模糊进度指示器，读者若是感兴趣，可以参考。

← 上一篇

3.5 输入框及表单

第四章：布局类组件