【移動(dòng)應(yīng)用開發(fā)技術(shù)】使用Flutter怎么實(shí)現(xiàn)一個(gè)列表項(xiàng)

【移動(dòng)應(yīng)用開發(fā)技術(shù)】使用Flutter怎么實(shí)現(xiàn)一個(gè)列表項(xiàng)

使用Flutter怎么實(shí)現(xiàn)一個(gè)列表項(xiàng)？相信很多沒有經(jīng)驗(yàn)的人對(duì)此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。創(chuàng)建achievement_view_list_item.dart文件，具體的實(shí)現(xiàn)每一個(gè)列表項(xiàng)。import

'package:flutter/material.dart';

//

創(chuàng)建類，成就目標(biāo)

class

Target

{

//

常量，構(gòu)建函數(shù)

const

Target({

//

自變量，目標(biāo)名稱

,

//

自變量，目標(biāo)獎(jiǎng)勵(lì)

this.reward

});

//

最終值，成就目標(biāo)名稱

final

String

name;

//

最終值，成就目標(biāo)獎(jiǎng)勵(lì)

final

String

reward;

}

//

定義數(shù)據(jù)類型，目標(biāo)改變回調(diào)

typedef

void

TargetChangedCallback(

//

類型參數(shù)，目標(biāo)

Target

target,

//

類型參數(shù)，是否新目標(biāo)

bool

nowTarget

);

//

創(chuàng)建類，成就視圖列表項(xiàng)目，繼承StatelessWidget（無狀態(tài)的控件）

class

AchievementViewItem

extends

StatelessWidget

{

//

構(gòu)造函數(shù)

AchievementViewItem({

//

目標(biāo)參數(shù)，傳遞目標(biāo)

Target

target,

//

自變量，是否新目標(biāo)

this.nowTarget,

//

自變量，對(duì)目標(biāo)的改變

this.onTargetChanged

})

:

//

接收傳遞的目標(biāo)

target

=

target,

//

調(diào)用父類

super(

/*

*

控件和元素的標(biāo)識(shí)符：

*

將其對(duì)象的標(biāo)識(shí)用作其值

*

用于將控件的標(biāo)識(shí)綁定到用于生成該控件的對(duì)象的標(biāo)識(shí)

*/

key:

new

ObjectKey(target)

);

//

類成員，存儲(chǔ)目標(biāo)

final

Target

target;

//

類成員，存儲(chǔ)是否新目標(biāo)

final

bool

nowTarget;

//

類成員，對(duì)目標(biāo)的改變

final

TargetChangedCallback

onTargetChanged;

//

類函數(shù)，獲得顏色

Color

_getColor(BuildContext

context)

{

/*

*

是否新目標(biāo)

*

是：返回灰色

*

否：返回主題的背景色

*/

return

nowTarget

?

Colors.black54

:

Theme.of(context).primaryColor;

}

//

類函數(shù)，獲得文本樣式

TextStyle

_getNameTextStyle(BuildContext

context)

{

//

如果不是新目標(biāo)，返回文本樣式控件

if

(!nowTarget)

return

new

TextStyle(

//

繪制文本的大?。?6.0

fontSize:

16.0,

//

繪制文本時(shí)使用的顏色：黑色

color:

Colors.black,

//

繪制文本時(shí)加粗字體

fontWeight:

FontWeight.bold,

);

//

返回文本樣式控件

return

new

TextStyle(

fontSize:

16.0,

//

繪制文本時(shí)使用的顏色：灰色

color:

Colors.black54,

//

繪制文本時(shí)加粗字體

fontWeight:

FontWeight.bold,

//

在文本附近繪制的裝飾：文本中繪制一條橫線

decoration:

TextDecoration.lineThrough,

);

}

//

類函數(shù)，獲得文本樣式

TextStyle

_getRewardTextStyle(BuildContext

context)

{

//

如果不是新目標(biāo)，返回文本樣式控件

if

(!nowTarget)

return

new

TextStyle(

//

繪制文本的大?。?3.0

fontSize:

13.0,

//

繪制文本時(shí)使用的顏色：黑色

color:

Colors.black,

);

//

返回文本樣式控件

return

new

TextStyle(

//

繪制文本的大小：13.0

fontSize:

13.0,

//

繪制文本時(shí)使用的顏色：灰色

color:

Colors.black54,

//

在文本附近繪制的裝飾：文本中繪制一條橫線

decoration:

TextDecoration.lineThrough,

);

}

//

覆蓋此函數(shù)以構(gòu)建控件

@override

Widget

build(BuildContext

context)

{

//

返回值：創(chuàng)建列表項(xiàng)，通常包含圖標(biāo)和一些文本

return

new

ListItem(

//

當(dāng)用戶點(diǎn)擊此列表項(xiàng)時(shí)調(diào)用

onTap:

()

{

//

調(diào)用對(duì)目標(biāo)的改變函數(shù)

onTargetChanged(target,

!nowTarget);

},

//

要在標(biāo)題之前顯示的控件：創(chuàng)建圓形頭像控件

leading:

new

CircleAvatar(

//

填充圓形的顏色：獲得顏色函數(shù)

backgroundColor:

_getColor(context),

//

子控件：文字控件

child:

new

Text('囧'),

),

//

列表項(xiàng)目的主要內(nèi)容：創(chuàng)建堆棧布局控件

title:

new

Stack(

/*

*

列表項(xiàng)目的主要內(nèi)容：

*

定位位置

*

左邊與頂部

*

文本控件

*

文本內(nèi)容

*

獲得文本樣式函數(shù)

*/

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(

'獎(jiǎng)勵(lì)'+'\n'+target.reward,

style:

_getRewardTextStyle(context),

)

),

]

)

);

}

}創(chuàng)建achievement_view_list.dart文件，創(chuàng)建列表。import

'package:flutter/material.dart';

import

'achievement_view_list_item.dart';

//

創(chuàng)建類，成就視圖列表項(xiàng)目，繼承StatefulWidget（有狀態(tài)的控件）

class

AchievementViewList

extends

StatefulWidget

{

//

構(gòu)造函數(shù)

AchievementViewList({

//

自變量，目標(biāo)列表

this.targets,

//

控件和元素的標(biāo)識(shí)符

Key

key,

})

:

//

調(diào)用父類

super(

//

使用父類的控件和元素標(biāo)識(shí)符

key:

key

);

//

最終值，目標(biāo)列表

final

List<Target>

targets;

/*

*

覆蓋具有相同名稱的超類成員

*

在樹中的給定位置為此控件創(chuàng)建可變狀態(tài)

*

子類應(yīng)重寫此方法以返回其關(guān)聯(lián)的State子類新創(chuàng)建的實(shí)例

*/

@override

_AchievementViewState

createState()

=>

new

_AchievementViewState();

}

/*

*

關(guān)聯(lián)State子類的實(shí)例

*

繼承State：StatefulWidget（有狀態(tài)的控件）邏輯和內(nèi)部狀態(tài)

*/

class

_AchievementViewState

extends

State<AchievementViewList>

{

//

類成員，存儲(chǔ)成就集合

Set<Target>

_achievements

=

new

Set<Target>();

/*

*

類函數(shù)，成就改變

*

target：傳遞目標(biāo)

*

nowTarget：是否新目標(biāo)

*/

void

_achievementsChanged(Target

target,

bool

nowTarget)

{

//

通知框架此對(duì)象的內(nèi)部狀態(tài)已更改

setState((){

/*

*

如果是新目標(biāo)

*

存儲(chǔ)成就集合，增加目標(biāo)

*

否則，移除目標(biāo)

*/

if

(nowTarget)

_achievements.add(target);

else

_achievements.remove(target);

});

}

//

覆蓋此函數(shù)以構(gòu)建依賴于動(dòng)畫的當(dāng)前狀態(tài)的控件

@override

Widget

build(BuildContext

context)

{

//

返回值，創(chuàng)建包含列表項(xiàng)的可滾動(dòng)列表

return

new

ListTile(

/*

*

要在此列表中顯示的控件

*

迭代當(dāng)前配置的目標(biāo)列表中的目標(biāo)

*

為每一個(gè)調(diào)用函數(shù)創(chuàng)建成就目標(biāo)類

*/

children:

widget.targets.map(

(Target

target)

{

//

返回值，創(chuàng)建成就目標(biāo)類

return

new

AchievementViewItem(

//

傳遞目標(biāo)：本輪迭代中的目標(biāo)

target:

target,

//

是否新目標(biāo)：如果目標(biāo)在成就集合中，則返回true

nowTarget:

_achievements.contains(target),

//

對(duì)目標(biāo)的改變：類函數(shù)，成就改變

onTargetChanged:

_achievementsChanged,

);

}

).toList()

);

}

}創(chuàng)建achievement_view.dart文件，傳遞列表中顯示的數(shù)據(jù)。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:

'大學(xué)畢業(yè)',

reward:

"獲得畢業(yè)學(xué)位\t金錢￥5000\t最高情緒+30"),

new

Target(name:

'獲得￥5000',

reward:

"獲得信用卡"),

new

Target(name:

'購買廉價(jià)的公寓',

reward:

"最高能量+60\t最高饑餓度+30"),

new

Target(name:

'購買普通的公寓',

reward:

"最高能量+80\t最高饑餓度+50"),

new

Targ