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

作者：高心星

2024-10-31
江苏
本文字数：1491 字
阅读完需：约 5 分钟

【高心星出品】

瀑布流 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)

复制代码

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

开发步骤：

构建瀑布流子布局：

@Buildergenitem(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@Componentstruct 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)  }}

复制代码

发布于: 刚刚阅读数: 5

高心星

关注

天将降大任于斯人也，必先苦其心志。 2024-10-17 加入

华为开发者专家（HDE）。 10年教学经验，兼任多家科技公司技术顾问。先后从事JavaEE项目开发、Python爬虫、HarmonyOS移动应用开发等课程的教学工作。参与开发《鸿蒙应用开发基础》和《鸿蒙项目实战》等课程。

发布

暂无评论

创作场景

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

瀑布流 WaterFlow

常用属性

常用事件

开发步骤：

完整代码：

高心星

评论