ArkUI学习-List

1、概述

列表作为一种容器，会自动按其滚动方向排列子组件，向列表中添加组件或从列表中移除组件会重新排列子组件。

ListItemGroup用于列表数据的分组展示，其子组件也是ListItem。ListItem表示单个列表项，可以包含单个子组件。

官方文档：

说明 List的子组件必须是ListItemGroup或ListItem，ListItem和ListItemGroup必须配合List来使用。

@Entry
@Component
struct Index {
  @State select: boolean = true
  private  arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

  build() {

    List({space:20,initialIndex:0}){
      ForEach(this.arr, () => {
        ListItem(){
          Row(){
            Text('我是条目').fontColor(Color.Red)
          }.width('100%').height(40).backgroundColor(Color.Gray)
        }
        .padding(10)

      })
    }
    .backgroundColor(Color.Orange)
    .listDirection(Axis.Vertical )//设置主轴方向
    .lanes(2) //多列

  }
}

• 若是水平滚动列表场景，将List的listDirection属性设置为Axis.Horizontal即可实现。listDirection默认为Axis.Vertical，即主轴默认是垂直方向。
• 以垂直列表为例，如果将lanes属性设为2，表示构建的是一个两列的垂直列表。

2、在列表中显示数据

@Entry
@Component
struct CityList {
  build() {
    List() {
      ListItem() {
        Text('北京').fontSize(24)
      }

      ListItem() {
        Text('杭州').fontSize(24)
      }

      ListItem() {
        Text('上海').fontSize(24)
      }
    }
    .backgroundColor('#FFF1F3F5')
    .alignListItem(ListItemAlign.Center)
  }
}