介绍

本示例介绍使用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                        // 视图层-场景列表页面

模块依赖

不涉及

参考资料

WaterFlow+LazyForEach详细用法可参考性能范例

写在最后

• 如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
• 点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
• 关注小编，同时可以期待后续文章ing🚀，不定期分享原创知识。
• 想要获取更多完整鸿蒙最新学习知识点，请移步前往小编：https://gitee.com/MNxiaona/733GH