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

2021-03-06 18:01 更新

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

#LinearProgressIndicator

LinearProgressIndicator是一個線性、條狀的進度條,定義如下:

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

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

#示例

  1. // 模糊進度條(會執(zhí)行一個動畫)
  2. LinearProgressIndicator(
  3. backgroundColor: Colors.grey[200],
  4. valueColor: AlwaysStoppedAnimation(Colors.blue),
  5. ),
  6. //進度條顯示50%
  7. LinearProgressIndicator(
  8. backgroundColor: Colors.grey[200],
  9. valueColor: AlwaysStoppedAnimation(Colors.blue),
  10. value: .5,
  11. )

運行效果如圖3-30所示:

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

#CircularProgressIndicator

CircularProgressIndicator是一個圓形進度條,定義如下:

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

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

  1. // 模糊進度條(會執(zhí)行一個旋轉(zhuǎn)動畫)
  2. CircularProgressIndicator(
  3. backgroundColor: Colors.grey[200],
  4. valueColor: AlwaysStoppedAnimation(Colors.blue),
  5. ),
  6. //進度條顯示50%,會顯示一個半圓
  7. CircularProgressIndicator(
  8. backgroundColor: Colors.grey[200],
  9. valueColor: AlwaysStoppedAnimation(Colors.blue),
  10. value: .5,
  11. ),

運行效果如圖3-31所示:

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

#自定義尺寸

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

其實LinearProgressIndicatorCircularProgressIndicator都是取父容器的尺寸作為繪制的邊界的。知道了這點,我們便可以通過尺寸限制類 Widget,如ConstrainedBoxSizedBox (我們將在后面容器類組件一章中介紹)來指定尺寸,如:

  1. // 線性進度條高度指定為3
  2. SizedBox(
  3. height: 3,
  4. child: LinearProgressIndicator(
  5. backgroundColor: Colors.grey[200],
  6. valueColor: AlwaysStoppedAnimation(Colors.blue),
  7. value: .5,
  8. ),
  9. ),
  10. // 圓形進度條直徑指定為100
  11. SizedBox(
  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. // 寬高不等
  2. SizedBox(
  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對進度條顏色做動畫,關(guān)于動畫我們將在后面專門的章節(jié)詳細介紹,這里先給出一個例子,讀者在了解了 Flutter 動畫一章后再回過頭來看。

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

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

#自定義進度指示器樣式

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

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

以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號