快捷導(dǎo)航

Flutter組件實(shí)現(xiàn)進(jìn)度指示器

更新時(shí)間：2022年08月24日 09:41:43 作者：PuTTY本無(wú)樹

這篇文章主要為大家詳細(xì)介紹了Flutter組件實(shí)現(xiàn)進(jìn)度指示器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了Flutter組件實(shí)現(xiàn)進(jìn)度指示器的具體代碼，供大家參考，具體內(nèi)容如下

進(jìn)度指示器

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

LinearProgressIndicator

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

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

value：value表示當(dāng)前的進(jìn)度，取值范圍為[0,1]；如果value為null時(shí)則指示器會(huì)執(zhí)行一個(gè)循環(huán)動(dòng)畫（模糊進(jìn)度）；當(dāng)value不為null時(shí)，指示器為一個(gè)具體進(jìn)度的進(jìn)度條。
backgroundColor：指示器的背景色。
valueColor:

指示器的進(jìn)度條顏色；值得注意的是，該值類型是Animation，這允許我們對(duì)進(jìn)度條的顏色也可以指定動(dòng)畫。如果我們不需要對(duì)進(jìn)度條顏色執(zhí)行動(dòng)畫，換言之，我們想對(duì)進(jìn)度條應(yīng)用一種固定的顏色，此時(shí)我們可以通過AlwaysStoppedAnimation來(lái)指定。

示例：

// 模糊進(jìn)度條(會(huì)執(zhí)行一個(gè)動(dòng)畫)
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)行效果如圖所示：

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

CircularProgressIndicator

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

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

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

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

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

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

自定義尺寸

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

其實(shí)LinearProgressIndicator和CircularProgressIndicator都是取父容器的尺寸作為繪制的邊界的。知道了這點(diǎn)，我們便可以通過尺寸限制類Widget，如ConstrainedBox、SizedBox 來(lái)指定尺寸，如：

// 線性進(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)行效果如圖所示：

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

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

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

進(jìn)度色動(dòng)畫

前面說過可以通過valueColor對(duì)進(jìn)度條顏色做動(dòng)畫，這里先給出一個(gè)例子，讀者在了解了Flutter動(dòng)畫一章后再回過頭來(lái)看。

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

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() {
? ? //動(dòng)畫執(zhí)行時(shí)間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 來(lái)自定義繪制邏輯，實(shí)際上LinearProgressIndicator和CircularProgressIndicator也正是通過CustomPainter來(lái)實(shí)現(xiàn)外觀繪制的。關(guān)于CustomPainter，我們將在后面“自定義Widget”一章中詳細(xì)介紹。

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: