当前位置：首页 > article >正文

【鸿蒙HarmonyOS NEXT】List组件的使用

article 2024/9/23 19:19:30

【鸿蒙HarmonyOS NEXT】List组件的使用

一、环境说明
二、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)
  }
}