《HarmonyOS應(yīng)用開(kāi)發(fā)基礎(chǔ)》 課件知識(shí)點(diǎn)2-12-2 列表容器組件List

列表容器組件ListList概述List列表包含一系列相同寬度的列表項(xiàng)。適合連續(xù)、多行呈現(xiàn)同類(lèi)數(shù)據(jù)，例如圖片和文本。如右圖所示。子組件：ListItem、ListItemGroup接口描述：List(value?:{space?:number|string,initialIndex?:number,scroller?:Scroller})List的參數(shù)參數(shù)說(shuō)明：參數(shù)名參數(shù)類(lèi)型必填參數(shù)描述spacenumber|string否列表項(xiàng)間距。默認(rèn)值：0initialIndexnumber否設(shè)置當(dāng)前List初次加載時(shí)起始位置顯示的item的索引值。如果設(shè)置的值超過(guò)了當(dāng)前List最后一個(gè)item的索引值，則設(shè)置不生效。默認(rèn)值：0scrollerScroller否可滾動(dòng)組件的控制器。用于與可滾動(dòng)組件進(jìn)行綁定。List的屬性List除支持通用屬性外，還支持以下屬性。名稱(chēng)參數(shù)類(lèi)型描述listDirectionAxis設(shè)置List組件排列方向。默認(rèn)值：Axis.Verticaldivider{strokeWidth:

Length,color?:ResourceColor,startMargin?:Length,endMargin?:Length}|null設(shè)置ListItem分割線樣式，默認(rèn)無(wú)分割線。-strokeWidth:分割線的線寬。-color:分割線的顏色。-startMargin:分割線與列表側(cè)邊起始端的距離。-endMargin:分割線與列表側(cè)邊結(jié)束端的距離。edgeEffectEdgeEffect設(shè)置組件的滑動(dòng)效果。默認(rèn)值：EdgeEffect.SpringList屬性的使用private

arr:

number[]

=

[0,

1,

2,

3,

4,

5,

6,

7,

8,

9]...

List({

space:

20,

initialIndex:

0

})

{

ForEach(this.arr,

(item)

=>

{

ListItem()

{

Text(''

+

item)

.width('100%')

.height(100)

.fontSize(16)

.textAlign(TextAlign.Center)

.borderRadius(10)

.backgroundColor('#FFFFFF')

}

},

item

=>

item)

}

.listDirection(Axis.Vertical)

//

排列方向

.divider({

strokeWidth:

2,

color:

'#FFFFFF',

startMargin:

20,

endMargin:

20

})

//

每行之間的分界線

.edgeEffect(EdgeEffect.None)

//

滑動(dòng)到邊緣無(wú)效果

.chainAnimation(false)

//

聯(lián)動(dòng)特效關(guān)閉List的事件List提供的事件有很多，這里我們只介紹onReachStart和onReachEnd。onReachStart(event:()=>void)：列表到達(dá)起始位置時(shí)觸發(fā)。onReachEnd(event:()=>void)：列表到底末尾位置時(shí)觸發(fā)。List(){...省略子組件}...省略List屬性.onReachStart(()

=>

{

console.info('列表已到達(dá)頂端')}).onReachEnd(()

=>

{

console.info('列表已到達(dá)底部')})擴(kuò)展：ListItemGroupListItemGroup用來(lái)展示列表item分組，寬度默認(rèn)充滿(mǎn)List組件，必須配合List組件來(lái)使用。接口說(shuō)明：ListItemGroup(options?:{header?:CustomBuilder,footer?:CustomBuilder,space?:number|string})使用說(shuō)明：當(dāng)ListItemGroup的父組件List的listDirection屬性為Axis.Vertical時(shí)，不允許設(shè)置ListItemGroup組件的height屬性。ListItemGroup的高度為header高度、footer高度和所有ListItem布局后總高度之和。當(dāng)父組件List的listDirection屬性為Axis.Horizontal時(shí)，不允許設(shè)置ListItemGroup組件的width屬性。ListItemGroup的寬度為header寬度、footer寬度和所有ListItem布局后總寬度之和。ListItemGroup的參數(shù)參數(shù)說(shuō)明：參數(shù)名參數(shù)類(lèi)型必填參數(shù)描述headerCustomBuilder否設(shè)置ListItemGroup頭部組件。footerCustomBuilder否設(shè)置ListItemGroup尾部組件。spacenumber|string否列表項(xiàng)間距。只作用于ListItem與ListItem之間，不作用于header與ListItem、footer與ListItem之間。ListItemGroup的屬性屬性說(shuō)明：名稱(chēng)參數(shù)類(lèi)型描述divider{strokeWidth:

Length,color?:

ResourceColor,startMargin?:

Length,endMargin?:

Length}|null用于設(shè)置ListItem分割線樣式，默認(rèn)無(wú)分割線。strokeWidth:分割線的線寬。color:分割線的顏色。startMargin：分割線距離列表側(cè)邊起始端的距離。endMargin:分割線距離列表側(cè)邊結(jié)束端的距離。ListItemGroup使用示例1.List的數(shù)據(jù)

private

timetable:

any

=

[

{

title:'星期一',

projects:['語(yǔ)文',

'數(shù)學(xué)',

'英語(yǔ)']

},

{

title:'星期二',

projects:['物理',

'化學(xué)',

'生物']

},

{

title:'星期三',

projects:['歷史',

'地理',

'政治']

},

{

title:'星期四',

projects:['美術(shù)',

'音樂(lè)',

'體育']

}

]ListItemGroup使用示例2.構(gòu)造ListItemGroup的頭部組件與尾部組件

@Builder

itemHead(text:string)

{

Text(text)

.fontSize(20)

.backgroundColor(0xAABBCC)

.width("100%")

.padding(10)

}

@Builder

itemFoot(num:number)

{

Text('共'

+

num

+

"節(jié)課")

.fontSize(16)

.backgroundColor(0xAABBCC)

.width("100%")

.padding(5)

}ListItemGroup使用示例3.在List中使用ListItemGroupList({

space:

20

})

{

ForEach(this.timetable,

(item)

=>

{

ListItemGroup({

header:this.itemHead(item.title),

footer:this.itemFoot(jects.length)

})

{

ForEach(jects,

(project)

=>

{

ListItem()

{

Text(project)

.width("100%").height(100).fontSize(20)

.textAlign(TextAlign.Center).backgroundColor(0