List组件如何实现多列效果
==============

设置[List](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-list)组件的lanes属性，以实现交叉轴上的多列布局。示例代码如下：

// xxx.ets
@Entry
@Component
struct ListExample {
  @State arr: string\[\] = \['1', '2', '3', '4', '5', '6', '7', '8', '9'\];

  build() {
    Column() {
      List() {
        ForEach(this.arr, (item: string) => {
          ListItem() {
            Row() {
              Text(item)
                .fontColor(Color.Red)
                .fontSize(40)
            }
          }
          .width('100%')
          .border({
            width: 1,
            color: Color.Black,
            radius: 5
          })
        })
      }
      .lanes(3)
      .alignListItem(ListItemAlign.Center)
    }
    .padding({ top: 30 })
  }
}

效果如图所示：

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/5f/v3/jugYBcFQSN-s_KmMduJgLg/zh-cn_image_0000002194158740.png?HW-CC-KV=V1&HW-CC-Date=20260612T074703Z&HW-CC-Expire=86400&HW-CC-Sign=307BDCF74B0E9844B1EE48BA5AE29C72C41ECC5115F93350B1DF67FF2154C762 "点击放大")