介绍
本示例介绍使用ArkUIWaterFlow组件和LazyForEach实现瀑布流场景。该场景多用于购物、资讯类应用。
效果图预览
使用说明
- 加载完成后显示整个列表,超过一屏时可以上下滑动。
实现思路
- 创建WaterFlowDataSource类,实现IDataSource接口的对象,用于WaterFlow和LazyForEach加载数据。
- 通过@Builder自定义瀑布流列表项组件,作为FlowItem的子组件。
- 结合父组件传递的数据以及WaterFlow和LazyForEach循环构造出整个列表。
高性能知识点
本示例使用了LazyForEach进行数据懒加载,WaterFlow布局时会根据可视区域按需创建FlowItem组件,并在FlowItem滑出可视区域外时销毁以降低内存占用。
工程结构&模块类型
functionalscenes // har类型
|---model
| |---ListData.ets // 模型层-列表数据模型
| |---WaterFlowDataSource.ets // 数据模型层-瀑布流数据控制器
|---FunctionalScenes.ets // 视图层-场景列表页面
模块依赖
不涉及
参考资料
WaterFlow+LazyForEach详细用法可参考性能范例
写在最后
- 如果你觉得这篇内容对你还蛮有帮助,我想邀请你帮我三个小忙:
- 点赞,转发,有你们的 『点赞和评论』,才是我创造的动力。
- 关注小编,同时可以期待后续文章ing🚀,不定期分享原创知识。
- 想要获取更多完整鸿蒙最新学习知识点,请移步前往小编:
https://gitee.com/MNxiaona/733GH