#鸿蒙通关秘籍# 如何在HarmonyOS中使用WaterFlow组件实现高性能瀑布流布局?

HarmonyOS
2024-12-09 13:38:08
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
一路向北545

WaterFlow配合LazyForeach实现高性能瀑布流

build() {
  Column({ space: 2 }) {
    WaterFlow() {
      LazyForEach(this.datasource, (item: number) => {
        FlowItem() {
          Column() {
            Text("N" + item).fontSize(12).height('16')
            Image('res/waterFlowTest (' + item % 5 + ').jpg')
              .objectFit(ImageFit.Fill)
              .width('100%')
              .layoutWeight(1)
          }
        }
        .width('100%')         
        .height(this.itemHeightArray[item])
        .backgroundColor(this.colors[item % 5])
      }, (item: string) => item)
    }
    .columnsTemplate("1fr 1fr")
    .columnsGap(10)
    .rowsGap(5)
    .backgroundColor(0xFAEEE0)
    .width('100%')
    .height('80%')
  }
}
分享
微博
QQ
微信
回复
2024-12-14 21:18:46
相关问题
ArkTS布局组件实现瀑布流式布局
1166浏览 • 1回复 待解决