Flutter 實(shí)現(xiàn)進(jìn)度條效果
用flutter開(kāi)發(fā)的項(xiàng)目,最大的好處除了跨平臺(tái)之外,還有一點(diǎn)就是插件多,便于很多功能的實(shí)現(xiàn)。
畫風(fēng)(話鋒)一轉(zhuǎn),老子說(shuō),事物都有兩面性,物極必反。插件多是多,插件帶來(lái)的問(wèn)題也是不容小覷,總結(jié)下,插件帶來(lái)的幾大問(wèn)題。
(1)插件更新不及時(shí)
插件更新不及時(shí),會(huì)導(dǎo)致我們連編譯都過(guò)不去,甚至要去改插件的原生代碼,這個(gè)時(shí)候,我們可能會(huì)自己創(chuàng)建一個(gè)github插件,然后直接引用自己的github插件地址,算了,真不靠譜的插件作者!千言萬(wàn)語(yǔ)盡在不言中。。。
(2)插件沖突
插件沖突,有的時(shí)候是配置沖突,比如經(jīng)常遇到的android:resource="@xml/filepaths"/>
同樣是在manifest里面,有的插件配置的是filepaths,有的為file_paths,這個(gè)也挺痛苦的。
(3)包體積
插件用多了,包體積自然就大了,用戶一看這么大的包,下載半天,算了,當(dāng)然5G來(lái)了咱就另說(shuō)了。
話不多說(shuō),解決之道,就4個(gè)字:少用插件。
比如進(jìn)度條插件,之前我還用modal_progress_hud: ^0.1.3,發(fā)現(xiàn)沒(méi)必要,flutter本來(lái)就有LinearProgressIndicator,用來(lái)做進(jìn)度顯示的。干掉干掉。
上代碼:
LinearProgressIndicator( value: 0.3, valueColor: AlwaysStoppedAnimation<Color>(Colors.red), backgroundColor: Colors.blue, ),
其中,value為進(jìn)度值,valueColor為已經(jīng)進(jìn)行的進(jìn)度顏色,backgroundColor就是還沒(méi)到的那段進(jìn)度的顏色咯。
不要著急,上個(gè)完整的例子,給你們看效果。
import 'package:flutter/material.dart';
class ProgressDemo extends StatefulWidget {
ProgressDemo({Key key}) : super(key: key);
@override
_ProgressDemoState createState() => _ProgressDemoState();
}
class _ProgressDemoState extends State<ProgressDemo> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('flutter progress demo'),
),
body: Container(
margin: EdgeInsets.only(top: 20),
alignment: Alignment.topCenter,
child: FlatButton(
child: Text('進(jìn)度'),
color: Colors.blue,
onPressed: () {
return showDialog(context: context, builder: (context) {
return AlertDialog(
backgroundColor: Colors.transparent,
title: Text('上傳中...'),
content: LinearProgressIndicator(
value: 0.3,
valueColor: AlwaysStoppedAnimation<Color>(Colors.red),
backgroundColor: Colors.blue,
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10))
),
);
},);
},
),
),
);
}
}
好了,效果如下:

總結(jié)
到此這篇關(guān)于Flutter 一行代碼快速實(shí)現(xiàn)你的進(jìn)度條的文章就介紹到這了,更多相關(guān)Flutter 一行代碼快速實(shí)現(xiàn)你的進(jìn)度條內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Android開(kāi)發(fā)實(shí)戰(zhàn)之漂亮的ViewPager引導(dǎo)頁(yè)
這篇文章主要介紹了Android開(kāi)發(fā)實(shí)戰(zhàn)中漂亮ViewPager引導(dǎo)頁(yè)的制作過(guò)程,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-08-08
Android自定義控件實(shí)現(xiàn)九宮格解鎖
這篇文章主要為大家詳細(xì)介紹了Android自定義控件實(shí)現(xiàn)九宮格解鎖,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-06-06
Android實(shí)戰(zhàn)教程第三篇之簡(jiǎn)單實(shí)現(xiàn)撥打電話功能
這篇文章主要為大家詳細(xì)介紹了Android實(shí)戰(zhàn)教程第三篇之簡(jiǎn)單實(shí)現(xiàn)撥打電話功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11
Android圖片選擇器ImageEditContainer
這篇文章主要為大家詳細(xì)介紹了Android圖片選擇器ImageEditContainer的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07
Android實(shí)現(xiàn)計(jì)時(shí)器功能
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)計(jì)時(shí)器功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-04-04
Android基于TextView屬性android:ellipsize實(shí)現(xiàn)跑馬燈效果的方法
這篇文章主要介紹了Android基于TextView屬性android:ellipsize實(shí)現(xiàn)跑馬燈效果的方法,涉及Android跑馬燈效果所涉及的TextView相關(guān)屬性與使用方法,需要的朋友可以參考下2016-08-08
Android中Fab(FloatingActionButton)實(shí)現(xiàn)上下滑動(dòng)的漸變效果
這篇文章主要給大家介紹了Android中FloatingActionButton(簡(jiǎn)稱FAB)是如何實(shí)現(xiàn)上下滑動(dòng)的漸變效果,文中給出了詳細(xì)的示例代碼,相信對(duì)大家具有一定的參考價(jià)值,有需要的朋友們可以一起看看吧。2017-02-02
Android實(shí)現(xiàn)從底部彈出的Dialog示例(一)
這篇文章主要介紹了Android實(shí)現(xiàn)從底部彈出的Dialog示例(一),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2017-01-01

