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/90/v3/Rmecv5alQ5uY3z7MLp4NMw/zh-cn_image_0000002624475914.png?HW-CC-KV=V1&HW-CC-Date=20260709T134107Z&HW-CC-Expire=86400&HW-CC-Sign=846B8CBD9474FB4A93DDCA323292A1F29CFBDF4F71777B0C1B94B7CD1FA1430D "点击放大")