Flutter 基础组件：进度指示器

前言

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

接口描述

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

//
const CircularProgressIndicator({
    Key key,
    double value,
    Color backgroundColor,
    Animation<Color> valueColor,
    // 表示圆形进度条的粗细。
    this.strokeWidth = 4.0,
    String semanticsLabel,
    String semanticsValue,
  })

代码示例

import 'package:flutter/material.dart';

class ProgressTest extends StatefulWidget{
  @override
  _ProgressTestState createState() => _ProgressTestState();
}

class _ProgressTestState extends State<ProgressTest> with SingleTickerProviderStateMixin {

  AnimationController _animationController;

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

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  @ override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('进度指示器'),
      ),
      body: Padding(
        padding: const EdgeInsets.symmetric(vertical: 16.0, horizontal: 24.0),
        child: Column(
          children: <Widget>[

            // 模糊线性进度条(执行循环动画，蓝色条一直在移动)
            LinearProgressIndicator(
              backgroundColor: Colors.grey[200],
              valueColor: AlwaysStoppedAnimation(Colors.blue),
            ),

            // 静止线性进度条(进度条是静止的，停在50%的位置)
            LinearProgressIndicator(
              backgroundColor: Colors.grey[200],
              valueColor: AlwaysStoppedAnimation(Colors.blue),
              value: .5,
            ),

            // 模糊圆形进度条(执行旋转动画)
            CircularProgressIndicator(
              backgroundColor: Colors.grey[200],
              valueColor: AlwaysStoppedAnimation(Colors.blue),
            ),

            // 静止圆形进度条(停在50%的位置)
            CircularProgressIndicator(
              backgroundColor: Colors.grey[200],
              valueColor: AlwaysStoppedAnimation(Colors.blue),
              value: .5,
            ),

            // 自定义线性进度条
            // 高度指定为10
            SizedBox(
              height: 10,
              child: LinearProgressIndicator(
                backgroundColor: Colors.grey[200],
                valueColor: AlwaysStoppedAnimation(Colors.blue),
              ),
            ),

            // 自定义圆形进度条
            // 直径指定为100
            SizedBox(
              // 如果设置的宽高不一样，则会为椭圆
              height: 100,
              width: 100,
              child: CircularProgressIndicator(
                backgroundColor: Colors.grey[200],
                valueColor: AlwaysStoppedAnimation(Colors.blue),
              ),
            ),

            // 进度条颜色动画，实现一个进度条在5秒内从红色变成蓝色的动画
            LinearProgressIndicator(
              backgroundColor: Colors.red,
              valueColor: ColorTween(begin: Colors.grey, end: Colors.blue).animate(_animationController),
              value: _animationController.value,
            ),

          ],
        ),
      ),
    );
  }
}

代码分析

自定义尺寸

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

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

自定义进度指示器样式

1. 定制进度指示器风格样式，可以通过CustomPainter Widget 来自定义绘制逻辑，实际上LinearProgressIndicator和CircularProgressIndicator也正是通过CustomPainter来实现外观绘制的。
2. 利用一些优秀的第三方包。例如flutter_spinkit包提供了多种风格的模糊进度指示器。