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实现桌面悬浮窗、蒙板效果实例代码

    Android实现桌面悬浮窗、蒙板效果实例代码

    这篇文章主要介绍了Android实现桌面悬浮窗、蒙板效果实例代码的相关资料,需要的朋友可以参考下
    2016-05-05
  • Android程序开发之动态设置ImageView的亮度

    Android程序开发之动态设置ImageView的亮度

    这篇文章主要介绍了Android程序开发之动态设置ImageView的亮度 的相关资料,需要的朋友可以参考下
    2016-01-01
  • Android中获取设备的各种信息总结

    Android中获取设备的各种信息总结

    相信各位Android的开发者们都知道,现在几乎所有的app都需要获得设备信息,那么下面这篇文章就来详细说说获取设备信息的方法。
    2016-09-09
  • Android开发常用标签小结

    Android开发常用标签小结

    这篇文章主要介绍了Android开发常用标签,分析总结了Android开发中常见标签的使用技巧,需要的朋友可以参考下
    2015-05-05
  • Android Kotlin 中的groupBy方法详解

    Android Kotlin 中的groupBy方法详解

    在Kotlin中,groupBy函数可以对集合进行分组,形成一个Map,其中key是分组标准,value是对应的元素列表,本文通过实例详细解释groupBy的使用方法和常见应用场景,如按员工年龄分组或产品类型统计数量等,展示了groupBy的灵活性和实用性
    2024-09-09
  • Android开发中MotionEvent坐标获取方法分析

    Android开发中MotionEvent坐标获取方法分析

    这篇文章主要介绍了Android开发中MotionEvent坐标获取方法,结合实例形式分析了MotionEvent获取坐标的相关函数使用方法与相关注意事项,需要的朋友可以参考下
    2016-02-02
  • Android自定义定时闹钟开发

    Android自定义定时闹钟开发

    这篇文章主要为大家详细介绍了Android自定义定时闹钟开发,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-09-09
  • Android使用shape绘制阴影图层阴影效果示例

    Android使用shape绘制阴影图层阴影效果示例

    本篇文章主要介绍了Android使用shape绘制阴影图层阴影效果示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • Android 采用AOP方式封装6.0权限管理的方法

    Android 采用AOP方式封装6.0权限管理的方法

    这篇文章主要介绍了Android 采用AOP方式封装6.0权限管理的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • Android超详细讲解组件ScrollView的使用

    Android超详细讲解组件ScrollView的使用

    本节带来的是Android基本UI控件中的第十个:ScrollView(滚动条),或者我们应该叫他 竖直滚动条,对应的另外一个水平方向上的滚动条:HorizontalScrollView,先让我们来了解ScrollView
    2022-03-03

最新评论