溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

Flutter如何實(shí)現(xiàn)進(jìn)度條效果

發(fā)布時(shí)間：2020-07-23 15:35:00 來源：億速云 閱讀：456 作者：小豬 欄目：移動(dòng)開發(fā)

小編這次要給大家分享的是Flutter如何實(shí)現(xiàn)進(jìn)度條效果，文章內(nèi)容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。

用flutter開發(fā)的項(xiàng)目，最大的好處除了跨平臺之外，還有一點(diǎn)就是插件多，便于很多功能的實(shí)現(xiàn)。

畫風(fēng)（話鋒）一轉(zhuǎn)，老子說，事物都有兩面性，物極必反。插件多是多，插件帶來的問題也是不容小覷，總結(jié)下，插件帶來的幾大問題。

（1）插件更新不及時(shí)

插件更新不及時(shí)，會導(dǎo)致我們連編譯都過不去，甚至要去改插件的原生代碼，這個(gè)時(shí)候，我們可能會自己創(chuàng)建一個(gè)github插件，然后直接引用自己的github插件地址，算了，真不靠譜的插件作者！千言萬語盡在不言中。。。

（2）插件沖突

插件沖突，有的時(shí)候是配置沖突，比如經(jīng)常遇到的android:resource="@xml/filepaths"/>
同樣是在manifest里面，有的插件配置的是filepaths，有的為file_paths，這個(gè)也挺痛苦的。

（3）包體積

插件用多了，包體積自然就大了，用戶一看這么大的包，下載半天，算了，當(dāng)然5G來了咱就另說了。

話不多說，解決之道，就4個(gè)字：少用插件。

比如進(jìn)度條插件，之前我還用modal_progress_hud: ^0.1.3，發(fā)現(xiàn)沒必要，flutter本來就有LinearProgressIndicator，用來做進(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就是還沒到的那段進(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))
    ),
    );
   },);
   },
  ),
  ),
 );
 }
}

好了，效果如下：

Flutter如何實(shí)現(xiàn)進(jìn)度條效果

看完這篇關(guān)于Flutter如何實(shí)現(xiàn)進(jìn)度條效果的文章，如果覺得文章內(nèi)容寫得不錯(cuò)的話，可以把它分享出去給更多人看到。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手