List组件如何实现多列效果

List组件如何实现多列效果


HarmonyOS
2024-03-17 14:44:38
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
yu_qingbo

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

效果如图所示:

分享
微博
QQ
微信
回复
2024-03-18 20:27:28
相关问题
使用List组件实现布局
554浏览 • 1回复 待解决
List组件如何设置
2264浏览 • 1回复 待解决
使用List组件设置布局的方式
527浏览 • 1回复 待解决
如何实现list的折叠动画效果
504浏览 • 1回复 待解决
如何实现scroll、list单边回弹效果
549浏览 • 1回复 待解决
sql 如何约束中所有值均不同?
3002浏览 • 1回复 待解决
List组件如何设置两端的渐变效果
1951浏览 • 1回复 待解决
如何实现组件的阴影效果
939浏览 • 1回复 待解决
如何List的回弹效果改为阴影效果
462浏览 • 1回复 待解决