Flutter實戰(zhàn) 進(jìn)度指示器

Material 組件庫中提供了兩種進(jìn)度指示器：LinearProgressIndicator和CircularProgressIndicator，它們都可以同時用于精確的進(jìn)度指示和模糊的進(jìn)度指示。精確進(jìn)度通常用于任務(wù)進(jìn)度可以計算和預(yù)估的情況，比如文件下載；而模糊進(jìn)度則用戶任務(wù)進(jìn)度無法準(zhǔn)確獲得的情況，如下拉刷新，數(shù)據(jù)提交等。

#LinearProgressIndicator

LinearProgressIndicator是一個線性、條狀的進(jìn)度條，定義如下：

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

• value：value表示當(dāng)前的進(jìn)度，取值范圍為[0,1]；如果value為null時則指示器會執(zhí)行一個循環(huán)動畫（模糊進(jìn)度）；當(dāng)value不為null時，指示器為一個具體進(jìn)度的進(jìn)度條。
• backgroundColor：指示器的背景色。
• valueColor: 指示器的進(jìn)度條顏色；值得注意的是，該值類型是Animation<Color>，這允許我們對進(jìn)度條的顏色也可以指定動畫。如果我們不需要對進(jìn)度條顏色執(zhí)行動畫，換言之，我們想對進(jìn)度條應(yīng)用一種固定的顏色，此時我們可以通過AlwaysStoppedAnimation來指定。

#示例

// 模糊進(jìn)度條(會執(zhí)行一個動畫)
LinearProgressIndicator(
  backgroundColor: Colors.grey[200],
  valueColor: AlwaysStoppedAnimation(Colors.blue),
),
//進(jìn)度條顯示50%
LinearProgressIndicator(
  backgroundColor: Colors.grey[200],
  valueColor: AlwaysStoppedAnimation(Colors.blue),
  value: .5, 
)

運(yùn)行效果如圖3-30所示：

第一個進(jìn)度條在執(zhí)行循環(huán)動畫：藍(lán)色條一直在移動，而第二個進(jìn)度條是靜止的，停在50%的位置。

#CircularProgressIndicator

CircularProgressIndicator是一個圓形進(jìn)度條，定義如下：

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

前三個參數(shù)和LinearProgressIndicator相同，不再贅述。strokeWidth 表示圓形進(jìn)度條的粗細(xì)。示例如下：

// 模糊進(jìn)度條(會執(zhí)行一個旋轉(zhuǎn)動畫)
CircularProgressIndicator(
  backgroundColor: Colors.grey[200],
  valueColor: AlwaysStoppedAnimation(Colors.blue),
),
//進(jìn)度條顯示50%，會顯示一個半圓
CircularProgressIndicator(
  backgroundColor: Colors.grey[200],
  valueColor: AlwaysStoppedAnimation(Colors.blue),
  value: .5,
),

運(yùn)行效果如圖3-31所示：

第一個進(jìn)度條會執(zhí)行旋轉(zhuǎn)動畫，而第二個進(jìn)度條是靜止的，它停在 50% 的位置。

#自定義尺寸

我們可以發(fā)現(xiàn)LinearProgressIndicator和CircularProgressIndicator，并沒有提供設(shè)置圓形進(jìn)度條尺寸的參數(shù)；如果我們希望LinearProgressIndicator的線細(xì)一些，或者希望CircularProgressIndicator的圓大一些該怎么做？

其實LinearProgressIndicator和CircularProgressIndicator都是取父容器的尺寸作為繪制的邊界的。知道了這點(diǎn)，我們便可以通過尺寸限制類 Widget，如ConstrainedBox、SizedBox （我們將在后面容器類組件一章中介紹）來指定尺寸，如：

// 線性進(jìn)度條高度指定為3
SizedBox(
  height: 3,
  child: LinearProgressIndicator(
    backgroundColor: Colors.grey[200],
    valueColor: AlwaysStoppedAnimation(Colors.blue),
    value: .5,
  ),
),
// 圓形進(jìn)度條直徑指定為100
SizedBox(
  height: 100,
  width: 100,
  child: CircularProgressIndicator(
    backgroundColor: Colors.grey[200],
    valueColor: AlwaysStoppedAnimation(Colors.blue),
    value: .7,
  ),
),

運(yùn)行效果如圖3-32所示：

注意，如果CircularProgressIndicator顯示空間的寬高不同，則會顯示為橢圓。如：

// 寬高不等
SizedBox(
  height: 100,
  width: 130,
  child: CircularProgressIndicator(
    backgroundColor: Colors.grey[200],
    valueColor: AlwaysStoppedAnimation(Colors.blue),
    value: .7,
  ),
),

運(yùn)行效果如圖3-33所示：

#進(jìn)度色動畫

前面說過可以通過valueColor對進(jìn)度條顏色做動畫，關(guān)于動畫我們將在后面專門的章節(jié)詳細(xì)介紹，這里先給出一個例子，讀者在了解了 Flutter 動畫一章后再回過頭來看。

我們實現(xiàn)一個進(jìn)度條在3秒內(nèi)從灰色變成藍(lán)色的動畫：

import 'package:flutter/material.dart';


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


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


  @override
  void initState() {
    //動畫執(zhí)行時間3秒  
    _animationController =
        new AnimationController(vsync: this, duration: Duration(seconds: 3));
    _animationController.forward();
    _animationController.addListener(() => setState(() => {}));
    super.initState();
  }


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


  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: <Widget>[
            Padding(
            padding: EdgeInsets.all(16),
            child: LinearProgressIndicator(
              backgroundColor: Colors.grey[200],
              valueColor: ColorTween(begin: Colors.grey, end: Colors.blue)
                .animate(_animationController), // 從灰色變成藍(lán)色
              value: _animationController.value,
            ),
          );
        ],
      ),
    );
  }
}

#自定義進(jìn)度指示器樣式

定制進(jìn)度指示器風(fēng)格樣式，可以通過CustomPainter Widget 來自定義繪制邏輯，實際上LinearProgressIndicator和CircularProgressIndicator也正是通過CustomPainter來實現(xiàn)外觀繪制的。關(guān)于CustomPainter，我們將在后面“自定義 Widget”一章中詳細(xì)介紹。

flutter_spinkit (opens new window)包提供了多種風(fēng)格的模糊進(jìn)度指示器，讀者若是感興趣，可以參考。