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

前端之家收集整理的这篇文章主要介绍了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),'心情($currentMood/$maximumMood)'),new LinearProgressIndicator(value: currentMood/maximumMood),]
      )
    );
  }
}

在main.dart中调用上面的ActionViewEcology类,传入相关参数,效果如下:

这里写图片描述

猜你在找的Flutter相关文章