readme模板
介绍
本示例介绍使用ArkUIWaterFlow组件和LazyForEach实现瀑布流场景。该场景多用于购物、资讯类应用。
效果图预览
使用说明
- 加载完成后显示整个列表，超过一屏时可以上下滑动。
实现思路
- 创建WaterFlowDataSource类，实现IDataSource接口的对象，用于WaterFlow和LazyForEach加载数据。源码参考WaterFlowDataSource.ets
export class WaterFlowDataSource implements IDataSource {
private dataArray: ListData[] = [];
private listeners: DataChangeListener[] = [];
constructor(dataArray: ListData[]) {
for (let i = 0; i < dataArray.length; i++) {
this.dataArray.push(dataArray[i]);
}
}
public getData(index: number): ListData {
return this.dataArray[index];
}
notifyDataReload(): void {
this.listeners.forEach(listener => {
listener.onDataReloaded();
})
}
notifyDataAdd(index: number): void {
this.listeners.forEach(listener => {
listener.onDataAdd(index);
})
}
...
- 通过@Builder自定义瀑布流列表项组件，作为FlowItem的子组件。源码参考FunctionalScenes.ets
@Builder
MethodPoints(listData: ListData) {
Column() {
Image(listData.imageSrc)
...
}
}
- 结合父组件传递的数据以及WaterFlow和LazyForEach循环构造出整个列表。源码参考FunctionalScenes.ets
WaterFlow() {
LazyForEach(this.dataSource, (item: ListData) => {
FlowItem() {
this.MethodPoints(item)
}
})
}
高性能知识点
本示例使用了LazyForEach进行数据懒加载，WaterFlow布局时会根据可视区域按需创建FlowItem组件，并在FlowItem滑出可视区域外时销毁以降低内存占用。
工程结构&模块类型
functionalscenes // har类型(默认使用har类型，如果使用hsp类型请说明原因)
|---model
| |---ListData.ets // 模型层-列表数据模型
| |---WaterFlowDataSource.ets // 数据模型层-瀑布流数据控制器
|---FunctionalScenes.ets // 视图层-场景列表页面
模块依赖
不涉及(默认不依赖其他模块，如果依赖其他har或hsp模块请详细说明。)