Flutter质感设计之列表项

140 阅读 0 评论 93 点赞

我是靠谱客的博主怕孤单玉米，最近开发中收集的这篇文章主要介绍Flutter质感设计之列表项，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

本文为大家分享了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.0
   fontSize: 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.0
   fontSize: 13.0,
   // 绘制文本时使用的颜色：黑色
   color: Colors.black,
  );
  // 返回文本样式控件
  return new TextStyle(
   // 绘制文本的大小：13.0
   fontSize: 13.0,
   // 绘制文本时使用的颜色：灰色
   color: Colors.black54,
   // 在文本附近绘制的装饰：文本中绘制一条横线
   decoration: TextDecoration.lineThrough,
  );
 }
 // 覆盖此函数以构建控件
 @override
 Widget 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);
  });
 }
 // 覆盖此函数以构建依赖于动画的当前状态的控件
 @override
 Widget build(BuildContext context) {
  // 返回值，创建包含列表项的可滚动列表
  return new ListTile(
   /*
    * 要在此列表中显示的控件
    * 迭代当前配置的目标列表中的目标
    * 为每一个调用函数创建成就目标类
    */
   children: widget.targets.map(
    (Target target) {
     // 返回值，创建成就目标类
     return new AchievementViewItem(
      // 传递目标：本轮迭代中的目标
      target: target,
      // 是否新目标：如果目标在成就集合中，则返回true
      nowTarget: _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 {
 @override
 Widget build(BuildContext context) {
  return new AchievementViewList(targets: _kTargets);
 }
}
final List<Target> _kTargets = <Target>[
 new Target(name: '生存100天', reward: "金钱￥2500t最高能量+20"),
 new Target(name: '大学毕业', reward: "获得毕业学位t金钱￥5000t最高情绪+30"),
 new Target(name: '获得￥5000', reward: "获得信用卡"),
 new Target(name: '购买廉价的公寓', reward: "最高能量+60t最高饥饿度+30"),
 new Target(name: '购买普通的公寓', reward: "最高能量+80t最高饥饿度+50"),
 new Target(name: '生存100天', reward: "金钱￥2500t最高能量+20"),
 new Target(name: '大学毕业', reward: "获得毕业学位t金钱￥5000t最高情绪+30"),
 new Target(name: '获得￥5000', reward: "获得信用卡"),
 new Target(name: '购买廉价的公寓', reward: "最高能量+60t最高饥饿度+30"),
 new Target(name: '购买普通的公寓', reward: "最高能量+80t最高饥饿度+50"),
];