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)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
基于android startActivityForResult的學(xué)習(xí)心得總結(jié)
本篇文章是對android中的startActivityForResult進(jìn)行了詳細(xì)的分析介紹,需要的朋友參考下2013-05-05
Android開發(fā)使用Activity嵌套多個Fragment實(shí)現(xiàn)橫豎屏切換功能的方法
這篇文章主要介紹了Android開發(fā)使用Activity嵌套多個Fragment實(shí)現(xiàn)橫豎屏切換功能的方法,結(jié)合實(shí)例形式分析了Android使用Activity嵌套多個Fragment進(jìn)行橫豎屏切換的原理與具體操作技巧,需要的朋友可以參考下2017-11-11
Android開發(fā)使用PopupMenu創(chuàng)建彈出式菜單完整實(shí)例
這篇文章主要介紹了Android開發(fā)使用PopupMenu創(chuàng)建彈出式菜單,結(jié)合完整實(shí)例形式分析了Android基于PopupMenu對象創(chuàng)建的彈出式菜單相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2019-03-03
Android開發(fā)實(shí)現(xiàn)繪制淘寶收益圖折線效果示例
這篇文章主要介紹了Android開發(fā)實(shí)現(xiàn)繪制淘寶收益圖折線效果,涉及Android canvas圖形繪制及布局控制相關(guān)操作技巧,需要的朋友可以參考下2017-11-11
Android開發(fā)之DialogFragment用法實(shí)例總結(jié)
這篇文章主要介紹了Android開發(fā)之DialogFragment用法,結(jié)合實(shí)例形式總結(jié)分析了Android使用DialogFragment代替Dialog功能的相關(guān)使用技巧與注意事項(xiàng),需要的朋友可以參考下2017-11-11
AndroidStudio集成OpenCV的實(shí)現(xiàn)教程
本文主要介紹了Android?Studio集成OpenCV的實(shí)現(xiàn)教程,文中通過圖文介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-12-12

