【鸿蒙 ArkUI实战开发】—— 主页瀑布流实现

📚鸿蒙开发往期学习笔录📌：

📌 鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~
📌 鸿蒙应用开发与鸿蒙系统开发哪个更有前景？
📌 嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~
📌 对于大前端开发来说，转鸿蒙开发究竟是福还是祸？
📌 鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？
📌 记录一场鸿蒙开发岗位面试经历~
📌 持续更新中……

介绍

本示例介绍使用ArkUI WaterFlow 组件和 LazyForEach 实现瀑布流场景。该场景多用于购物、资讯类应用。

效果图预览

使用说明

1. 加载完成后显示整个列表，超过一屏时可以上下滑动。

实现思路

1. 创建WaterFlowDataSource类，实现IDataSource接口的对象，用于WaterFlow和LazyForEach加载数据。
2. 通过@Builder自定义瀑布流列表项组件，作为FlowItem的子组件。
3. 结合父组件传递的数据以及WaterFlow和LazyForEach循环构造出整个列表。

WaterFlow

子组件

包含 FlowItem 子组件。

说明
WaterFlow子组件的visibility属性设置为None时不显示，但依然会占用子组件对应的网格。

接口

WaterFlow(options?: {footer?: CustomBuilder, scroller?: Scroller})

参数：

属性

除支持 通用属性 外，还支持以下属性：