Flutter 實現胖進度條

2021-10-25 09:42:13 字數 1146 閱讀 9089

事情是這樣的,我碰到乙個需求,做乙個胖進度條顯示任務進度,但是我沒有查到flutter有這個功能,只能自己做了

首先胖進度條是有兩個顏色,所以我們需要有兩個控制項分別表示這兩個進度條,我們用最簡單的方式就是container,然後把它變成圓角的,然後兩個疊在一起,就實現了我們的需求,怎麼疊在一起呢?那就要用到stack元件,這個元件相當於安卓開發中的相對布局(relativelayout)

stack

( children:

[///灰色線進度條

container

( margin: edgeinsets.

only

(left:10)

, height:13,

width:

100,

decoration:

boxdecoration

( color:

color

(0xffd7d7d7),

borderradius: borderradius.

circular(10

),),

),///藍色完成任務的進度條

container

( margin: edgeinsets.

only

(left:10)

, height:13,

width:20,

decoration:

boxdecoration

( color: theme.

of(context)

.primarycolor,

borderradius: borderradius.

circular(10

),),

),],

),

這裡的寬度就是100,就是最大值,你也可以自己寫大小,要是想要適應螢幕大小,那麼你還可以用expanded這個元件來控制大小,或者讓container的寬度為double.infinity來決定它的寬度。

flutter 雙滑塊的進度條

最近專案需要進行 區間選擇,網上找到乙個flutter帶雙滑塊的進度條外掛程式很好用,推薦給大家 syncfusion flutter sliders 18.4.48 beta這個外掛程式是國外一家知名外掛程式公司提供的,功能強大,他們還有其他外掛程式,比如圖表,日曆,等等,具體可在上搜尋syncf...

Extjs實現進度條

做extjs開發中,往往後台程式可能要執行一段時間才能得到返回結果,加入進度條可以提高客戶體驗度,以下為兩種便捷的方式 1.提交資料前用ext.msg.wait 提示 正在處理資料,請稍候 彈出等待條,資料處理成功後用ext.msg.hide 將等待去掉,例如 ext.msg.wait 提示 正在處...

CCProgressTimer實現進度條

原帖位址 cocos2d x提供了ccprogresstimer類可以方便地實現進度條的功能,cocos2d x 1.x版本與cocos2d x 2.x版本對progresstimer的型別提供的不同,2.x版本只提供了以下2種 typedef enum ccprogresstimertype 另外...