【移动应用开发技术】使用Flutter怎么实现一个列表项

【移动应用开发技术】使用Flutter怎么实现一个列表项

使用Flutter怎么实现一个列表项？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。创建achievement_view_list_item.dart文件，具体的实现每一个列表项。import

'package:flutter/material.dart';

//

创建类，成就目标

class

Target

{

//

常量，构建函数

const

Target({

//

自变量，目标名称

,

//

自变量，目标奖励

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(

,

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:

"金钱￥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

Targ