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

Question

List组件如何实现多列效果

Answer 1

给List组件设置lanes属性，可设置List组件在交叉轴按几列布局。可参考如下代码：

// 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 }) 
  } 
}

效果如图所示：