Flutter質(zhì)感設(shè)計(jì)之進(jìn)度條
LinearProgressIndicator控件是質(zhì)感設(shè)計(jì)中的線性進(jìn)度指示器,具體內(nèi)容如下
import 'package:flutter/material.dart';
class ActionViewEcology extends StatelessWidget {
/*
* 構(gòu)建函數(shù),傳遞參數(shù)
* 最大能量值
* 最大饑餓值
* 最大情緒值
* 當(dāng)前能量值
* 當(dāng)前饑餓值
* 當(dāng)前情緒值
*/
ActionViewEcology({
this.maximumEmergy,
this.maximumHunger,
this.maximumMood,
this.currentEmergy,
this.currentHunger,
this.currentMood,
});
int maximumEmergy;
int maximumHunger;
int maximumMood;
int currentEmergy;
int currentHunger;
int currentMood;
// 獲取進(jìn)度條描述文本
Align _getNameText(BuildContext context, String text) {
return new Align(
alignment: FractionalOffset.topLeft,
child: new Text(
text,
style: new TextStyle(
fontSize: 15.0,
color: Colors.black,
height: 1.5,
)
)
);
}
@override
Widget build(BuildContext context) {
return new Container(
margin: const EdgeInsets.fromLTRB(17.0, 0.0, 17.0, 10.0),
child: new Column(
children: <Widget> [
_getNameText(context, '能量($currentEmergy/$maximumEmergy)'),
new LinearProgressIndicator(value: currentEmergy/maximumEmergy),
_getNameText(context, '饑餓($currentHunger/$maximumHunger)'),
new LinearProgressIndicator(value: currentHunger/maximumHunger),
_getNameText(context, '心情($currentMood/$maximumMood)'),
new LinearProgressIndicator(value: currentMood/maximumMood),
]
)
);
}
}
在main.dart中調(diào)用上面的ActionViewEcology類,傳入相關(guān)參數(shù),效果如下:

以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android實(shí)現(xiàn)桌面懸浮窗、蒙板效果實(shí)例代碼
這篇文章主要介紹了Android實(shí)現(xiàn)桌面懸浮窗、蒙板效果實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-05-05
Android程序開發(fā)之動(dòng)態(tài)設(shè)置ImageView的亮度
這篇文章主要介紹了Android程序開發(fā)之動(dòng)態(tài)設(shè)置ImageView的亮度 的相關(guān)資料,需要的朋友可以參考下2016-01-01
Android開發(fā)常用標(biāo)簽小結(jié)
這篇文章主要介紹了Android開發(fā)常用標(biāo)簽,分析總結(jié)了Android開發(fā)中常見標(biāo)簽的使用技巧,需要的朋友可以參考下2015-05-05
Android開發(fā)中MotionEvent坐標(biāo)獲取方法分析
這篇文章主要介紹了Android開發(fā)中MotionEvent坐標(biāo)獲取方法,結(jié)合實(shí)例形式分析了MotionEvent獲取坐標(biāo)的相關(guān)函數(shù)使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-02-02
Android 采用AOP方式封裝6.0權(quán)限管理的方法
這篇文章主要介紹了Android 采用AOP方式封裝6.0權(quán)限管理的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04
Android超詳細(xì)講解組件ScrollView的使用
本節(jié)帶來的是Android基本UI控件中的第十個(gè):ScrollView(滾動(dòng)條),或者我們應(yīng)該叫他?豎直滾動(dòng)條,對(duì)應(yīng)的另外一個(gè)水平方向上的滾動(dòng)條:HorizontalScrollView,先讓我們來了解ScrollView2022-03-03

