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组件实现布局
412浏览 • 1回复 待解决
List组件如何设置
2198浏览 • 1回复 待解决
使用List组件设置布局的方式
321浏览 • 1回复 待解决
如何实现list的折叠动画效果
393浏览 • 1回复 待解决
如何实现scroll、list单边回弹效果
374浏览 • 1回复 待解决
sql 如何约束中所有值均不同?
2948浏览 • 1回复 待解决
List组件如何设置两端的渐变效果
1878浏览 • 1回复 待解决
如何实现组件的阴影效果
810浏览 • 1回复 待解决
如何List的回弹效果改为阴影效果
359浏览 • 1回复 待解决
滑动组件如何实现单边spring的效果
820浏览 • 1回复 待解决
如何实现Tabs组件tarbar的吸顶效果
947浏览 • 1回复 待解决
HarmonyOS list编辑移动效果
155浏览 • 1回复 待解决