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

概述LinearProgressIndicator控件是质感设计中的线性进度指示器。 import 'package:flutter/material.dart';class ActionViewEcology extends StatelessWidget { /* * 构建函数，传递参数 * 最大能量值 * 最大饥饿值 * 最大情绪值 * 当前能量值 * 当前饥饿值 * 当前情绪值 */

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),'心情（$currentMood/$maximumMood）'),new linearProgressIndicator(value: currentMood/maximumMood),]      )    );  }}

在main.dart中调用上面的ActionVIEwEcology类，传入相关参数，效果如下：

总结

以上是内存溢出为你收集整理的Flutter进阶—质感设计之进度条全部内容，希望文章能够帮你解决Flutter进阶—质感设计之进度条所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。