List组件如何设置多列

List组件如何设置多列

HarmonyOS
2024-01-19 15:47:07
1206浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
lhlrj

以列模式为例(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) 
 
      Button('点击更改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 }) 
  } 
} 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
分享
微博
QQ
微信
回复
2024-01-19 21:33:17
相关问题
使用List组件设置布局的方式
1178浏览 • 1回复 待解决
List组件如何实现效果
2938浏览 • 1回复 待解决
使用List组件实现布局
1324浏览 • 1回复 待解决
HarmonyOS TextPicker问题
903浏览 • 1回复 待解决
sql 如何约束中所有值均不同?
3450浏览 • 1回复 待解决
HarmonyOS list组件如何设置匀速滑动
573浏览 • 1回复 待解决
HarmonyOS 设置list组件高度
586浏览 • 1回复 待解决
js如何list组件设置为横向的?
4598浏览 • 1回复 待解决
List组件如何设置两端的渐变效果
2446浏览 • 1回复 待解决
List组件的initialIndex属性设置不生效
2954浏览 • 1回复 待解决