ArkUI 中如何实现瀑布流布局？

Question

讲解 ArkUI 中瀑布流布局的设计与优化方法，适用于图片展示等场景。

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

ArkUI 可通过 Grid 组件实现瀑布流布局，并动态调整列数以适应不同屏幕宽度。

@Entry
@Component
struct WaterfallFlowExample {
  private items: string[] = Array.from({ length: 20 }, (_, i) => `#${Math.floor(Math.random() * 16777215).toString(16)}`);

  build() {
    Grid({
      columns: 2, // 两列布局
      data: this.items,
      itemBuilder: (item) => {
        return Box()
          .backgroundColor(item)
          .width('90%')
          .height(Math.floor(Math.random() * 100) + 100)
          .margin(10);
      }
    }).width('100%');
  }
}