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