【鸿蒙HarmonyOS NEXT】List组件的使用
一、环境说明
- DevEco Studio 版本:
DevEco Studio NEXT Developer Beta5 Build #DS-233.14475.28.36.503700 Build Version: 5.0.3.700, built on August 19, 2024 Runtime version: 17.0.10+1-b1087.17 amd64 VM: OpenJDK 64-Bit Server VM by JetBrains s.r.o. Windows 11.0 GC: G1 Young Generation, G1 Old Generation Memory: 3992M Cores: 16 Registry: idea.plugins.compatible.build=IC-233.14475.28
- API版本:11和12,以12为主
二、List组件及其使用
List是很常用的滚动类容器组件,一般和子组件ListItem一起使用,List列表中的每一个列表项对应一个ListItem组件。List组件通常需要搭配如ForEach组件对ListItem组件进行循环渲染。List组件里面的列表项
默认是按垂直方向排列的,如果您想让列表沿水平方向排列
,您可以将List组件的listDirection
属性设置为Axis.Horizontal。常见的用法和效果如下所示:
-
List默认列表项布局为垂直方向,效果如下图所示:
-
List的列表项水平方向布局,效果如下截图所示:
.listDirection(Axis.Horizontal)
-
设置列表分割线,关键代码及效果如下图所示:
List组件子组件ListItem之间默认是没有分割线的,部分场景子组件ListItem间需要设置分割线,这时候您可以使用List组件的divider属性。divider属性包含四个参数:
关键代码:.divider({strokeWidth:5,color:Color.Red,startMargin:10,endMargin:10})
-
List滚动事件监听:
List组件提供了一系列事件方法用来监听列表的滚动,您可以根据需要,监听这些事件来做一些操作:- onScroll:列表滑动时触发,返回值scrollOffset为滑动偏移量,scrollState为当前滑动状态。
- onScrollIndex:列表滑动时触发,返回值分别为滑动起始位置索引值与滑动结束位置索引值。
- onReachStart:列表到达起始位置时触发。
- onReachEnd:列表到底末尾位置时触发。
- onScrollStop:列表滑动停止时触发。
三、示例代码如下
- 新建ListComponentPage.ets,添加如下代码:
@Entry @Component struct ListComponentPage { private arr: number[] = [0,1,2,3,4,5,6,7,8,9] build() { Column() { List({space: 10}){ ForEach(this.arr,(item:number)=> { ListItem(){ Text(`${item}`) .width('100%') .height(100) .fontSize(20) .fontColor(Color.White) .textAlign(TextAlign.Center) .borderRadius(10) .backgroundColor(0x007DFF) } }) } // 分割线 .divider({strokeWidth:5,color:Color.Red,startMargin:10,endMargin:10}) // 设置成水平方向 // .listDirection(Axis.Horizontal) // 滑动事件 .onScrollIndex((firstIndex: number, lastIndex: number) => { console.info('滑动起始位置索引值' + firstIndex) console.info('滑动结束位置索引值' + lastIndex) }) .onDidScroll((scrollOffset: number, scrollState: ScrollState) => { console.info('滑动偏移量' + scrollOffset) console.info('当前滑动状态' + scrollState) }) .onReachStart(() => { console.info('列表起始位置到达') }) .onReachEnd(() => { console.info('列表末尾位置到达') }) .onScrollStop(() => { console.info('列表滑动停止') }) } .padding(12) .height('100%') .backgroundColor(0xF1F3F5) } }
- 运行查看效果: