第三章: 基础组件 3.6 进度指示器

跟随《Flutter实战·第二版》学习，建议直接看原书

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

LinearProgressIndicator

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

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

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

示例

// 模糊进度条(会执行一个动画)
        LinearProgressIndicator(
          value: null,
          backgroundColor: Colors.green,
          valueColor: AlwaysStoppedAnimation(Colors.purple),
        ),
        Padding(padding: EdgeInsets.fromLTRB(0, 20, 0, 0)),
        //进度条显示50%
        LinearProgressIndicator(
          value: .5,
          backgroundColor: Colors.grey,
          valueColor: AlwaysStoppedAnimation(Colors.red),
        )

image.png

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

CircularProgressIndicator

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

CircularProgressIndicator({
  double value,
  Color backgroundColor,
  Animation<Color> valueColor,
  this.strokeWidth = 4.0,
  ...   
}) 

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

// 模糊进度条(会执行一个旋转动画)
        CircularProgressIndicator(
          backgroundColor: Colors.grey[200],
          valueColor: AlwaysStoppedAnimation(Colors.blue),
        ),
        //进度条显示50%，会显示一个半圆
        CircularProgressIndicator(
          backgroundColor: Colors.grey[200],
          valueColor: AlwaysStoppedAnimation(Colors.blue),
          value: .5,
        )

image.png

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

自定义尺寸

LinearProgressIndicator和CircularProgressIndicator，并没有提供设置圆形进度条尺寸的参数
其实LinearProgressIndicator和CircularProgressIndicator都是取父容器的尺寸作为绘制的边界的。知道了这点，我们便可以通过尺寸限制类Widget，如ConstrainedBox、SizedBox （我们将在后面容器类组件一章中介绍）来指定尺寸

SizedBox(
          height: 5,
          child: LinearProgressIndicator(
            value: .5,
            backgroundColor: Colors.grey,
            valueColor: AlwaysStoppedAnimation(Colors.red),
          ),
        ),

SizedBox(
          height: 100,
          width: 100,
          child: CircularProgressIndicator(
            value: .7,
            backgroundColor: Colors.grey,
            valueColor: AlwaysStoppedAnimation(Colors.purple),
          ),
        )

image.png

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

// 宽高不同
SizedBox(
          height: 100,
          width: 130,
          child: CircularProgressIndicator(
            value: .7,
            backgroundColor: Colors.grey,
            valueColor: AlwaysStoppedAnimation(Colors.purple),
          ),
        ),

image.png

进度色动画

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

TextButton(
          onPressed: (){
            Navigator.push(context, MaterialPageRoute(builder: (context) {
              return ProgressRoute();
            }));
          },
          child: Text("push"),
        )

class ProgressRoute extends StatefulWidget {
  @override
  _ProgressRouteState createState() => _ProgressRouteState();
}

class _ProgressRouteState extends State<ProgressRoute> with SingleTickerProviderStateMixin {
  AnimationController? _animationController;

  @override
  void initState() {
    // TODO: implement initState
    // 动画执行时间3秒
    _animationController = AnimationController(vsync: this, duration: Duration(seconds: 3));
    _animationController!.forward();
    _animationController!.addListener(() => setState(() => {}));
    super.initState();
  }

  @override
  void dispose() {
    // TODO: implement dispose
    _animationController!.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("进度色动画"),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            Padding(
              padding: EdgeInsets.all(16.0),
              child: LinearProgressIndicator(
                backgroundColor: Colors.grey,
                valueColor: ColorTween(begin: Colors.grey, end: Colors.red).animate(_animationController!),
                value: _animationController!.value,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Simulator Screen Shot - iPhone 13 .png

自定义进度指示器样式

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

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