使用List组件设置多列布局的方式

使用List组件设置多列布局的方式

HarmonyOS
2024-08-05 16:01:34
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
好难的昵称

在列模式的情境下(即当`listDirection`设置为`Axis.Vertical`时),`lanes`参数用于明确指定`List`组件在交叉轴方向上应如何布局,具体表现为以几列的形式进行排列。

参考代码如下:

@Entry
@Component
struct ListLanesExample {
  @State arr: string[] = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19'];
  @State alignListItem: ListItemAlign = ListItemAlign.Start;

  build() {
    Column() {
      List({ space: 20, initialIndex: 0 }) {
        ForEach(this.arr, (item: string) => {
          ListItem() {
            Text('' + item)
              .width('100%')
              .height(100)
              .fontSize(16)
              .textAlign(TextAlign.Center)
              .borderRadius(10)
              .backgroundColor(0xFFFFFF)
          }
          .border({ width: 2, color: Color.Green })
        }, (item: string) => item)
      }
      .height(300)
      .width('90%')
      .border({ width: 3, color: Color.Red })
      .lanes({ minLength: 40, maxLength: 40 })
      .alignListItem(this.alignListItem)

点击更改alignListItem:' + this.alignListItem).onClick(() => {
        if (this.alignListItem == ListItemAlign.Start) {
          this.alignListItem = ListItemAlign.Center;
        } else if (this.alignListItem == ListItemAlign.Center) {
          this.alignListItem = ListItemAlign.End;
        } else {
          this.alignListItem = ListItemAlign.Start;
        }
      })
    }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })
  }
}
分享
微博
QQ
微信
回复
2024-08-05 20:09:14
相关问题
使用List组件实现布局
554浏览 • 1回复 待解决
List组件如何设置
2269浏览 • 1回复 待解决
List组件如何实现效果
2128浏览 • 1回复 待解决
使用List嵌套实现表格布局
999浏览 • 1回复 待解决
sql 如何约束中所有值均不同?
3002浏览 • 1回复 待解决
List及ListItem组件使用
1752浏览 • 1回复 待解决
List组件initialIndex属性设置不生效
2266浏览 • 1回复 待解决
js如何把list组件设置为横向
4044浏览 • 1回复 待解决
Stack实现叠层布局方式
500浏览 • 1回复 待解决
HarmonyOS Column布局包含list
161浏览 • 1回复 待解决