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包提供了多種風格的模糊進度指示器。