HarmonyOS Arkts 中实现瀑布流布局WaterFlow组件

HarmonyOS Arkts 中实现瀑布流布局可以使用WaterFlow组件

HarmonyOS瀑布流组件WaterFlow的基本格式

 WaterFlow(){
        FlowItem() {
         	....
          }
      }.columnsTemplate("1fr 1fr")
      .columnsGap(20)
      .rowsGap(20)

HarmonyOS 入门实战免费学：https://www.itying.com/goods-1193.html

HarmonyOS Arkts WaterFlow瀑布流布局完整例子

import { AppBar } from "../../widget/AppBar"
@Component
@Entry
export struct Cate {
  @State title: string = "分类"
  colors:Color[]=[Color.Gray,Color.Red,Color.Orange,Color.Pink,Color.Yellow,Color.Grey,Color.Gray,Color.Red,Color.Orange]
  build() {
    Column() {
      AppBar({ title: this.title })
      Text(this.title).fontSize(30)
      WaterFlow(){
        ForEach([1,2,3,4,5,6,7,8,9],(item)=>{
          FlowItem() {
            Column(){
                Text(`${item}`)
            }
          }.backgroundColor(this.colors[item])
          .height(32*item/2)
        })
      }.columnsTemplate("1fr 1fr")
      .columnsGap(20)
      .rowsGap(20)

    }.height('100%')
    .width("100%")
  }
}