HarmonyOS Next应用开发——瀑布流WaterFlow

【高心星出品】

瀑布流WaterFlow

瀑布流容器，由“行”和“列”分割的单元格所组成，通过容器自身的排列规则，将不同大小的“项目”自上而下，如瀑布般紧密布局。

瀑布流容器的子组件只能是FlowItem，可以配合ForEach、LazyForEach进行循环渲染。

常用属性

columnsTemplate(value: string)

设置当前瀑布流组件布局列的数量，不设置时默认1列。

rowsTemplate(value: string)

设置当前瀑布流组件布局行的数量，不设置时默认1行。

columnsGap(value: Length)

设置列与列的间距。

rowsGap(value: Length)

设置行与行的间距。

layoutDirection(value: FlexDirection)

设置布局的主轴方向。

常用事件

onReachStart(event: () => void)

瀑布流组件到达起始位置时触发。

onReachEnd(event: () => void)

瀑布流组件到底末尾位置时触发。

onScrollIndex(event: (first: number, last: number) => void)

当前瀑布流显示的起始位置/终止位置的子组件发生变化时触发。瀑布流初始化时会触发一次。

开发步骤：

构建瀑布流子布局：

@Builder
genitem(src: ResourceStr, txt: string) { //瀑布流子布局 有图片和文本 图片高度不一样
  Column() {
    Image(src).width('100%')
    Text(txt).fontSize(18).fontWeight(FontWeight.Bold).margin(10)
  }.width('100%')
}

布局瀑布流：

WaterFlow() {
    ForEach(this.datas, (item: Data) => {
      FlowItem() {
        this.genitem(item.src, item.txt)
      }
    }, (item: Data) => JSON.stringify(item))
  }.columnsTemplate(this.templete)
  .rowsGap(20)
  .columnsGap(10)
  .animation({ curve: curves.springMotion() })//切换列数的时候有动画
}
.height('100%')
.width('100%')

完整代码：

import { curves } from '@kit.ArkUI';

interface Data { //数据类型
  src: ResourceStr
  txt: string
}

@Entry
@Component
struct Waterflowpage {
  @State datas: Data[] = []//默认数据源
  @State templete: string = '1fr'//默认列数

  aboutToAppear(): void { //模拟生成数据源
    for (let i = 1; i <= 100; i++) {
      this.datas.push({
        src: i % 2 == 0 ? $r('app.media.img1') : $r('app.media.img2'),
        txt: 'N' + i
      })
    }
  }

  @Builder
  genitem(src: ResourceStr, txt: string) { //瀑布流子布局 有图片和文本 图片高度不一样
    Column() {
      Image(src).width('100%')
      Text(txt).fontSize(18).fontWeight(FontWeight.Bold).margin(10)
    }.width('100%')
  }

  build() {
    Stack() {
      Column() {
        WaterFlow() {
          ForEach(this.datas, (item: Data) => {
            FlowItem() {
              this.genitem(item.src, item.txt)
            }
          }, (item: Data) => JSON.stringify(item))
        }.columnsTemplate(this.templete)
        .rowsGap(20)
        .columnsGap(10)
        .animation({ curve: curves.springMotion() }) //切换列数的时候有动画
      }
      .height('100%')
      .width('100%')

      Button('变化').width('60%').backgroundColor('rgba(255,0,0,0.5)')
        .onClick(() => {
          let count = Math.floor(Math.random() * 5 + 1) //生成随机列数1~5
          let str = ''
          for (let i = 1; i <= count; i++) { //生成列数字符串
            str = str + '1fr '
          }
          this.templete = str
        })
    }.width('100%')
    .height('100%')
    .alignContent(Alignment.Bottom)
  }
}