Flutter进阶—质感设计之列表项

创建achievement_view_list_item.dart文件，具体的实现每一个列表项。

import 'package:flutter/material.dart';
// 创建类，成就目标
class Target {// 常量，构建函数const Target({// 自变量，目标名称this.name,// 自变量，目标奖励this.reward});// 最终值，成就目标名称final String name;// 最终值，成就目标奖励final String reward;
}
// 定义数据类型，目标改变回调
typedef void TargetChangedCallback(// 类型参数，目标Target target,// 类型参数，是否新目标bool nowTarget
);
// 创建类，成就视图列表项目，继承StatelessWidget（无状态的控件）
class AchievementViewItem extends StatelessWidget {// 构造函数AchievementViewItem({// 目标参数，传递目标Target target,// 自变量，是否新目标this.nowTarget,// 自变量，对目标的改变this.onTargetChanged}) :// 接收传递的目标target = target,// 调用父类super(/** 控件和元素的标识符：*  将其对象的标识用作其值*  用于将控件的标识绑定到用于生成该控件的对象的标识*/key: new ObjectKey(target));// 类成员，存储目标final Target target;// 类成员，存储是否新目标final bool nowTarget;// 类成员，对目标的改变final TargetChangedCallback onTargetChanged;// 类函数，获得颜色Color _getColor(BuildContext context) {/**  是否新目标*    是：返回灰色*    否：返回主题的背景色*/return nowTarget ? Colors.black54 : Theme.of(context).primaryColor;}// 类函数，获得文本样式TextStyle _getNameTextStyle(BuildContext context) {// 如果不是新目标，返回文本样式控件if (!nowTarget) return new TextStyle(// 绘制文本的大小：16.0fontSize: 16.0,// 绘制文本时使用的颜色：黑色color: Colors.black,// 绘制文本时加粗字体fontWeight: FontWeight.bold,);// 返回文本样式控件return new TextStyle(fontSize: 16.0,// 绘制文本时使用的颜色：灰色color: Colors.black54,// 绘制文本时加粗字体fontWeight: FontWeight.bold,// 在文本附近绘制的装饰：文本中绘制一条横线decoration: TextDecoration.lineThrough,);}// 类函数，获得文本样式TextStyle _getRewardTextStyle(BuildContext context) {// 如果不是新目标，返回文本样式控件if (!nowTarget) return new TextStyle(// 绘制文本的大小：13.0fontSize: 13.0,// 绘制文本时使用的颜色：黑色color: Colors.black,);// 返回文本样式控件return new TextStyle(// 绘制文本的大小：13.0fontSize: 13.0,// 绘制文本时使用的颜色：灰色color: Colors.black54,// 在文本附近绘制的装饰：文本中绘制一条横线decoration: TextDecoration.lineThrough,);}// 覆盖此函数以构建控件@overrideWidget build(BuildContext context) {// 返回值：创建列表项，通常包含图标和一些文本return new ListItem(// 当用户点击此列表项时调用onTap: () {// 调用对目标的改变函数onTargetChanged(target, !nowTarget);},// 要在标题之前显示的控件：创建圆形头像控件leading: new CircleAvatar(// 填充圆形的颜色：获得颜色函数backgroundColor: _getColor(context),// 子控件：文字控件child: new Text('囧'),),// 列表项目的主要内容：创建堆栈布局控件title: new Stack(/** 列表项目的主要内容：*  定位位置*    左边与顶部*  文本控件*    文本内容*    获得文本样式函数*/children: <Widget> [new Positioned(left: 0.0,top: 0.0,child: new Text(target.name,style: _getNameTextStyle(context),)),new Positioned(left: 0.0,top: 20.0,child: new Text('奖励'+'\n'+target.reward,style: _getRewardTextStyle(context),)),]));}
}

创建achievement_view_list.dart文件，创建列表。

import 'package:flutter/material.dart';
import 'achievement_view_list_item.dart';
// 创建类，成就视图列表项目，继承StatefulWidget（有状态的控件）
class AchievementViewList extends StatefulWidget {// 构造函数AchievementViewList({// 自变量，目标列表this.targets,// 控件和元素的标识符Key key,}) :// 调用父类super(// 使用父类的控件和元素标识符key: key);// 最终值，目标列表final List<Target> targets;/** 覆盖具有相同名称的超类成员* 在树中的给定位置为此控件创建可变状态*  子类应重写此方法以返回其关联的State子类新创建的实例*/@override_AchievementViewState createState() => new _AchievementViewState();
}
/** 关联State子类的实例*  继承State：StatefulWidget（有状态的控件）逻辑和内部状态*/
class _AchievementViewState extends State<AchievementViewList> {// 类成员，存储成就集合Set<Target> _achievements = new Set<Target>();/** 类函数，成就改变*  target：传递目标*  nowTarget：是否新目标*/void _achievementsChanged(Target target, bool nowTarget) {// 通知框架此对象的内部状态已更改setState((){/** 如果是新目标*  存储成就集合，增加目标*  否则，移除目标*/if (nowTarget)_achievements.add(target);else_achievements.remove(target);});}// 覆盖此函数以构建依赖于动画的当前状态的控件@overrideWidget build(BuildContext context) {// 返回值，创建包含列表项的可滚动列表return new ListTile(/** 要在此列表中显示的控件*  迭代当前配置的目标列表中的目标*  为每一个调用函数创建成就目标类*/children: widget.targets.map((Target target) {// 返回值，创建成就目标类return new AchievementViewItem(// 传递目标：本轮迭代中的目标target: target,// 是否新目标：如果目标在成就集合中，则返回truenowTarget: _achievements.contains(target),// 对目标的改变：类函数，成就改变onTargetChanged: _achievementsChanged,);}).toList());}
}

创建achievement_view.dart文件，传递列表中显示的数据。

import 'package:flutter/material.dart';
import 'achievement_view_list.dart';
import 'achievement_view_list_item.dart';
class AchievementView extends StatelessWidget {@overrideWidget build(BuildContext context) {return new AchievementViewList(targets: _kTargets);}
}
final List<Target> _kTargets = <Target>[new Target(name: '生存100天', reward: "金钱￥2500\t最高能量+20"),new Target(name: '大学毕业', reward: "获得毕业学位\t金钱￥5000\t最高情绪+30"),new Target(name: '获得￥5000', reward: "获得信用卡"),new Target(name: '购买廉价的公寓', reward: "最高能量+60\t最高饥饿度+30"),new Target(name: '购买普通的公寓', reward: "最高能量+80\t最高饥饿度+50"),new Target(name: '生存100天', reward: "金钱￥2500\t最高能量+20"),new Target(name: '大学毕业', reward: "获得毕业学位\t金钱￥5000\t最高情绪+30"),new Target(name: '获得￥5000', reward: "获得信用卡"),new Target(name: '购买廉价的公寓', reward: "最高能量+60\t最高饥饿度+30"),new Target(name: '购买普通的公寓', reward: "最高能量+80\t最高饥饿度+50"),
];

Flutter进阶—质感设计之列表项相关推荐

Flutter进阶—质感设计之卡片
Card控件是质感设计中的卡片控件,作为详细信息的入口.卡片有圆角和阴影,卡片是用于表示一些相关信息的面板,例如相册,地理位置,餐食,联系细节等. import 'package:flutter/ma ...
Flutter进阶—质感设计之标签栏
在质感设计的控件中,有一个显示水平的一行选项卡,通常作为AppBar控件的一部分创建,并与TabBarView控件结合使用. import 'package:flutter/material.dart ...
Flutter进阶—质感设计之直接输入
Input控件是质感设计的文本输入控件,它在用户每次输入时都会调用onChanged回调时,都会更新字段值,还可以实时的对用户输入进行响应. import 'package:flutter/mater ...
Flutter进阶—质感设计之模态底部面板
模态底部面板是菜单或对话框的替代方案,可防止用户与其他控件进行互动,可以使用showModalBottomSheet函数创建和显示模态底部面板. import 'package:flutter/mat ...
Flutter进阶—质感设计之持久底部面板
持久性底部面板可以用于补充应用主要内容的信息,即使用户与应用程序的其他控件进行互动,也仍然可以看到持久的底部面板.可以使用Scaffold.showBottomSheet函数创建和显示持久性底部面板. ...
Flutter进阶—质感设计之进度条
LinearProgressIndicator控件是质感设计中的线性进度指示器. import 'package:flutter/material.dart'; class ActionViewEco ...
Flutter进阶—质感设计之表单输入
FormField控件是单一表单字段,这个控件维护表单字段的当前状态,以便更新和验证错误能在UI中可见.TextField控件就是在FormField中包装了一个Input控件(后面的文章讲解),Fo ...
Flutter进阶—质感设计之弹出菜单
PopupMenuButton控件即弹出菜单控件,点击控件会出现菜单. import 'package:flutter/material.dart'; class MenusDemo extends ...
Flutter基础—质感设计
Material Design,中文名:质感设计,是由Google推出的全新设计语言,旨在为手机.平板电脑.台式机和其他平台提供更一致.更广泛的外观和感觉.从2014年开始,Android到衍生的An ...

Flutter进阶—质感设计之列表项

Flutter进阶—质感设计之列表项相关推荐

最新文章

热门文章