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,)));}@overrideWidget 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类，传入相关参数，效果如下：

Flutter进阶—质感设计之进度条相关推荐

Flutter进阶—质感设计之直接输入
Input控件是质感设计的文本输入控件,它在用户每次输入时都会调用onChanged回调时,都会更新字段值,还可以实时的对用户输入进行响应. import 'package:flutter/mater ...
Flutter进阶—质感设计之模态底部面板
模态底部面板是菜单或对话框的替代方案,可防止用户与其他控件进行互动,可以使用showModalBottomSheet函数创建和显示模态底部面板. import 'package:flutter/mat ...
Flutter进阶—质感设计之持久底部面板
持久性底部面板可以用于补充应用主要内容的信息,即使用户与应用程序的其他控件进行互动,也仍然可以看到持久的底部面板.可以使用Scaffold.showBottomSheet函数创建和显示持久性底部面板. ...
Flutter进阶—质感设计之卡片
Card控件是质感设计中的卡片控件,作为详细信息的入口.卡片有圆角和阴影,卡片是用于表示一些相关信息的面板,例如相册,地理位置,餐食,联系细节等. import 'package:flutter/ma ...
Flutter进阶—质感设计之标签栏
在质感设计的控件中,有一个显示水平的一行选项卡,通常作为AppBar控件的一部分创建,并与TabBarView控件结合使用. import 'package:flutter/material.dart ...
Flutter进阶—质感设计之列表项
创建achievement_view_list_item.dart文件,具体的实现每一个列表项. import 'package:flutter/material.dart'; // 创建类,成就目标 ...
Flutter进阶—质感设计之表单输入
FormField控件是单一表单字段,这个控件维护表单字段的当前状态,以便更新和验证错误能在UI中可见.TextField控件就是在FormField中包装了一个Input控件(后面的文章讲解),Fo ...
Flutter进阶—质感设计之弹出菜单
PopupMenuButton控件即弹出菜单控件,点击控件会出现菜单. import 'package:flutter/material.dart'; class MenusDemo extends ...
Flutter代码锦囊---魔改进度条
Flutter框架提供了Material Design风格的线性进度条(LinearProgressIndicator)组件,就是下面的样子,方方正正的,一点也不圆润. 但是很多APP的设计都按照Ma ...

Flutter进阶—质感设计之进度条

Flutter进阶—质感设计之进度条相关推荐

最新文章

热门文章