Flutter質感設計之進度條
更新時間:2018年08月23日 11:14:40 作者:何小有
這篇文章主要為大家詳細介紹了Flutter質感設計之進度條,具有一定的參考價值,感興趣的小伙伴們可以參考一下
LinearProgressIndicator控件是質感設計中的線性進度指示器,具體內容如下
import 'package:flutter/material.dart'; class ActionViewEcology extends StatelessWidget { /* * 構建函數,傳遞參數 * 最大能量值 * 最大饑餓值 * 最大情緒值 * 當前能量值 * 當前饑餓值 * 當前情緒值 */ 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; // 獲取進度條描述文本 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中調用上面的ActionViewEcology類,傳入相關參數,效果如下:
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
基于android startActivityForResult的學習心得總結
本篇文章是對android中的startActivityForResult進行了詳細的分析介紹,需要的朋友參考下2013-05-05Android開發(fā)使用Activity嵌套多個Fragment實現橫豎屏切換功能的方法
這篇文章主要介紹了Android開發(fā)使用Activity嵌套多個Fragment實現橫豎屏切換功能的方法,結合實例形式分析了Android使用Activity嵌套多個Fragment進行橫豎屏切換的原理與具體操作技巧,需要的朋友可以參考下2017-11-11Android開發(fā)使用PopupMenu創(chuàng)建彈出式菜單完整實例
這篇文章主要介紹了Android開發(fā)使用PopupMenu創(chuàng)建彈出式菜單,結合完整實例形式分析了Android基于PopupMenu對象創(chuàng)建的彈出式菜單相關操作技巧與注意事項,需要的朋友可以參考下2019-03-03Android開發(fā)之DialogFragment用法實例總結
這篇文章主要介紹了Android開發(fā)之DialogFragment用法,結合實例形式總結分析了Android使用DialogFragment代替Dialog功能的相關使用技巧與注意事項,需要的朋友可以參考下2017-11-11