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组件如何设置
1200浏览 • 1回复 待解决
如何实现list的折叠动画效果
26浏览 • 1回复 待解决
如何实现scroll、list单边回弹效果
22浏览 • 1回复 待解决
List组件如何设置两端的渐变效果
908浏览 • 1回复 待解决
如何实现组件的阴影效果
410浏览 • 1回复 待解决
sql 如何约束中所有值均不同?
1814浏览 • 1回复 待解决
滑动组件如何实现单边spring的效果
550浏览 • 1回复 待解决
如何List的回弹效果改为阴影效果
28浏览 • 1回复 待解决
如何实现Tabs组件tarbar的吸顶效果
255浏览 • 1回复 待解决
使用swiper组件实现viewPager效果
566浏览 • 1回复 待解决
如何list组件实现两端的渐变
16浏览 • 1回复 待解决
如何实现动画转场效果
424浏览 • 1回复 待解决
如何实现视频滤镜效果
851浏览 • 1回复 待解决
组件如何设置模糊效果
827浏览 • 1回复 待解决
canvas如何实现水印效果
427浏览 • 1回复 待解决
如何实现星级评分效果
92浏览 • 1回复 待解决