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组件如何设置
298浏览 • 1回复 待解决
List组件如何设置两端的渐变效果
204浏览 • 1回复 待解决
sql 如何约束中所有值均不同?
1209浏览 • 1回复 待解决
组件如何设置模糊效果
227浏览 • 1回复 待解决
如何实现视频滤镜效果
273浏览 • 1回复 待解决
如何实现类似keyframes的效果
216浏览 • 1回复 待解决
文字动画效果如何实现
145浏览 • 0回复 待解决
如何实现列表页的单选效果
424浏览 • 0回复 待解决
Gradle怎么实现productFlavors
4860浏览 • 1回复 待解决
js如何list组件设置为横向的?
2006浏览 • 1回复 待解决
属性动画如何实现宽高动画效果
114浏览 • 1回复 待解决
如何实现分组列表的吸顶/吸底效果
194浏览 • 1回复 待解决
如何获取List组件滚动条滚动的距离
210浏览 • 1回复 待解决
应用怎么实现半模态效果
245浏览 • 1回复 待解决