【移動應用開發(fā)技術(shù)】使用Flutter怎么實現(xiàn)一個列表項

【移動應用開發(fā)技術(shù)】使用Flutter怎么實現(xiàn)一個列表項

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

'package:flutter/material.dart';

//

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

class

Target

{

//

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

const

Target({

//

自變量，目標名稱

,

//

自變量，目標獎勵

this.reward

});

//

最終值，成就目標名稱

final

String

name;

//

最終值，成就目標獎勵

final

String

reward;

}

//

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

typedef

void

TargetChangedCallback(

//

類型參數(shù)，目標

Target

target,

//

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

bool

nowTarget

);

//

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

class

AchievementViewItem

extends

StatelessWidget

{

//

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

AchievementViewItem({

//

目標參數(shù)，傳遞目標

Target

target,

//

自變量，是否新目標

this.nowTarget,

//

自變量，對目標的改變

this.onTargetChanged

})

:

//

接收傳遞的目標

target

=

target,

//

調(diào)用父類

super(

/*

*

控件和元素的標識符：

*

將其對象的標識用作其值

*

用于將控件的標識綁定到用于生成該控件的對象的標識

*/

key:

new

ObjectKey(target)

);

//

類成員，存儲目標

final

Target

target;

//

類成員，存儲是否新目標

final

bool

nowTarget;

//

類成員，對目標的改變

final

TargetChangedCallback

onTargetChanged;

//

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

Color

_getColor(BuildContext

context)

{

/*

*

是否新目標

*

是：返回灰色

*

否：返回主題的背景色

*/

return

nowTarget

?

Colors.black54

:

Theme.of(context).primaryColor;

}

//

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

TextStyle

_getNameTextStyle(BuildContext

context)

{

//

如果不是新目標，返回文本樣式控件

if

(!nowTarget)

return

new

TextStyle(

//

繪制文本的大?。?6.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,

);

}

//

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

TextStyle

_getRewardTextStyle(BuildContext

context)

{

//

如果不是新目標，返回文本樣式控件

if

(!nowTarget)

return

new

TextStyle(

//

繪制文本的大小：13.0

fontSize:

13.0,

//

繪制文本時使用的顏色：黑色

color:

Colors.black,

);

//

返回文本樣式控件

return

new

TextStyle(

//

繪制文本的大?。?3.0

fontSize:

13.0,

//

繪制文本時使用的顏色：灰色

color:

Colors.black54,

//

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

decoration:

TextDecoration.lineThrough,

);

}

//

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

@override

Widget

build(BuildContext

context)

{

//

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

return

new

ListItem(

//

當用戶點擊此列表項時調(diào)用

onTap:

()

{

//

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

onTargetChanged(target,

!nowTarget);

},

//

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

leading:

new

CircleAvatar(

//

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

backgroundColor:

_getColor(context),

//

子控件：文字控件

child:

new

Text('囧'),

),

//

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

title:

new

Stack(

/*

*

列表項目的主要內(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(

'獎勵'+'\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)建類，成就視圖列表項目，繼承StatefulWidget（有狀態(tài)的控件）

class

AchievementViewList

extends

StatefulWidget

{

//

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

AchievementViewList({

//

自變量，目標列表

this.targets,

//

控件和元素的標識符

Key

key,

})

:

//

調(diào)用父類

super(

//

使用父類的控件和元素標識符

key:

key

);

//

最終值，目標列表

final

List<Target>

targets;

/*

*

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

*

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

*

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

*/

@override

_AchievementViewState

createState()

=>

new

_AchievementViewState();

}

/*

*

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

*

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

*/

class

_AchievementViewState

extends

State<AchievementViewList>

{

//

類成員，存儲成就集合

Set<Target>

_achievements

=

new

Set<Target>();

/*

*

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

*

target：傳遞目標

*

nowTarget：是否新目標

*/

void

_achievementsChanged(Target

target,

bool

nowTarget)

{

//

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

setState((){

/*

*

如果是新目標

*

存儲成就集合，增加目標

*

否則，移除目標

*/

if

(nowTarget)

_achievements.add(target);

else

_achievements.remove(target);

});

}

//

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

@override

Widget

build(BuildContext

context)

{

//

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

return

new

ListTile(

/*

*

要在此列表中顯示的控件

*

迭代當前配置的目標列表中的目標

*

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

*/

children:

widget.targets.map(

(Target

target)

{

//

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

return

new

AchievementViewItem(

//

傳遞目標：本輪迭代中的目標

target:

target,

//

是否新目標：如果目標在成就集合中，則返回true

nowTarget:

_achievements.contains(target),

//

對目標的改變：類函數(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:

'大學畢業(yè)',

reward:

"獲得畢業(yè)學位\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