OpenHarmony实战开发-如何使用ArkUIWaterFlow组件和LazyForEach实现瀑布流场景。

介绍

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

效果图预览

使用说明

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

实现思路

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

高性能知识点

本示例使用了LazyForEach进行数据懒加载，WaterFlow布局时会根据可视区域按需创建FlowItem组件，并在FlowItem滑出可视区域外时销毁以降低内存占用。

工程结构&模块类型

functionalscenes                                // har类型
|---model
|   |---ListData.ets                            // 模型层-列表数据模型 
|   |---WaterFlowDataSource.ets                 // 数据模型层-瀑布流数据控制器 
|---FunctionalScenes.ets                        // 视图层-场景列表页面

模块依赖

不涉及