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: ResourceStrtxt: 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})}}@Buildergenitem(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~5let str = ''for (let i = 1; i <= count; i++) { //生成列数字符串str = str + '1fr '}this.templete = str})}.width('100%').height('100%').alignContent(Alignment.Bottom)}
}