《HarmonyOS应用开发基础》 课件知识点2-12-2 列表容器组件List

列表容器组件ListList概述List列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据，例如图片和文本。如右图所示。子组件：ListItem、ListItemGroup接口描述：List(value?:{space?:number|string,initialIndex?:number,scroller?:Scroller})List的参数参数说明：参数名参数类型必填参数描述spacenumber|string否列表项间距。默认值：0initialIndexnumber否设置当前List初次加载时起始位置显示的item的索引值。如果设置的值超过了当前List最后一个item的索引值，则设置不生效。默认值：0scrollerScroller否可滚动组件的控制器。用于与可滚动组件进行绑定。List的属性List除支持通用属性外，还支持以下属性。名称参数类型描述listDirectionAxis设置List组件排列方向。默认值：Axis.Verticaldivider{strokeWidth:

Length,color?:ResourceColor,startMargin?:Length,endMargin?:Length}|null设置ListItem分割线样式，默认无分割线。-strokeWidth:分割线的线宽。-color:分割线的颜色。-startMargin:分割线与列表侧边起始端的距离。-endMargin:分割线与列表侧边结束端的距离。edgeEffectEdgeEffect设置组件的滑动效果。默认值：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)

//

滑动到边缘无效果

.chainAnimation(false)

//

联动特效关闭List的事件List提供的事件有很多，这里我们只介绍onReachStart和onReachEnd。onReachStart(event:()=>void)：列表到达起始位置时触发。onReachEnd(event:()=>void)：列表到底末尾位置时触发。List(){...省略子组件}...省略List属性.onReachStart(()

=>

{

console.info('列表已到达顶端')}).onReachEnd(()

=>

{

console.info('列表已到达底部')})扩展：ListItemGroupListItemGroup用来展示列表item分组，宽度默认充满List组件，必须配合List组件来使用。接口说明：ListItemGroup(options?:{header?:CustomBuilder,footer?:CustomBuilder,space?:number|string})使用说明：当ListItemGroup的父组件List的listDirection属性为Axis.Vertical时，不允许设置ListItemGroup组件的height属性。ListItemGroup的高度为header高度、footer高度和所有ListItem布局后总高度之和。当父组件List的listDirection属性为Axis.Horizontal时，不允许设置ListItemGroup组件的width属性。ListItemGroup的宽度为header宽度、footer宽度和所有ListItem布局后总宽度之和。ListItemGroup的参数参数说明：参数名参数类型必填参数描述headerCustomBuilder否设置ListItemGroup头部组件。footerCustomBuilder否设置ListItemGroup尾部组件。spacenumber|string否列表项间距。只作用于ListItem与ListItem之间，不作用于header与ListItem、footer与ListItem之间。ListItemGroup的属性属性说明：名称参数类型描述divider{strokeWidth:

Length,color?:

ResourceColor,startMargin?:

Length,endMargin?:

Length}|null用于设置ListItem分割线样式，默认无分割线。strokeWidth:分割线的线宽。color:分割线的颜色。startMargin：分割线距离列表侧边起始端的距离。endMargin:分割线距离列表侧边结束端的距离。ListItemGroup使用示例1.List的数据

private

timetable:

any

=

[

{

title:'星期一',

projects:['语文',

'数学',

'英语']

},

{

title:'星期二',

projects:['物理',

'化学',

'生物']

},

{

title:'星期三',

projects:['历史',

'地理',

'政治']

},

{

title:'星期四',

projects:['美术',

'音乐',

'体育']

}

]ListItemGroup使用示例2.构造ListItemGroup的头部组件与尾部组件

@Builder

itemHead(text:string)

{

Text(text)

.fontSize(20)

.backgroundColor(0xAABBCC)

.width("100%")

.padding(10)

}

@Builder

itemFoot(num:number)

{

Text('共'

+

num

+

"节课")

.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