HarmonyOS鸿蒙Next中@Builder方法赋值给变量

HarmonyOS鸿蒙Next中@Builder方法赋值给变量

// @ohos/common

// BasicDataSource实现了IDataSource接口，用于管理listener监听，以及通知LazyForEach数据更新 class BasicDataSource<T> implements IDataSource { private listeners: DataChangeListener[] = []; private originDataArray: T[] = [];

public totalCount(): number { return 0; }

public getData(index: number): T { return this.originDataArray[index]; }

// 该方法为框架侧调用，为LazyForEach组件向其数据源处添加listener监听 registerDataChangeListener(listener: DataChangeListener): void { if (this.listeners.indexOf(listener) < 0) { console.info(‘add listener’); this.listeners.push(listener); } }

// 该方法为框架侧调用，为对应的LazyForEach组件在数据源处去除listener监听 unregisterDataChangeListener(listener: DataChangeListener): void { const pos = this.listeners.indexOf(listener); if (pos >= 0) { console.info(‘remove listener’); this.listeners.splice(pos, 1); } }

// 通知LazyForEach组件需要重载所有子组件 notifyDataReload(): void { this.listeners.forEach(listener => { listener.onDataReloaded(); }) }

// 通知LazyForEach组件需要在index对应索引处添加子组件 notifyDataAdd(index: number): void { this.listeners.forEach(listener => { listener.onDataAdd(index); // 写法2：listener.onDatasetChange([{type: DataOperationType.ADD, index: index}]); }) }

// 通知LazyForEach组件在index对应索引处数据有变化，需要重建该子组件 notifyDataChange(index: number): void { this.listeners.forEach(listener => { listener.onDataChange(index); // 写法2：listener.onDatasetChange([{type: DataOperationType.CHANGE, index: index}]); }) }

// 通知LazyForEach组件需要在index对应索引处删除该子组件 notifyDataDelete(index: number): void { this.listeners.forEach(listener => { listener.onDataDelete(index); // 写法2：listener.onDatasetChange([{type: DataOperationType.DELETE, index: index}]); }) }

// 通知LazyForEach组件将from索引和to索引处的子组件进行交换 notifyDataMove(from: number, to: number): void { this.listeners.forEach(listener => { listener.onDataMove(from, to); // 写法2：listener.onDatasetChange( // [{type: DataOperationType.EXCHANGE, index: {start: from, end: to}}]); }) }

notifyDatasetChange(operations: DataOperation[]): void { this.listeners.forEach(listener => { listener.onDatasetChange(operations); }) } }

export class DataSource<T> extends BasicDataSource<T> { private dataArray: T[] = [];

public totalCount(): number { return this.dataArray.length; }

public getData(index: number): T { return this.dataArray[index]; }

public pushData(data: T): void { this.dataArray.push(data); this.notifyDataAdd(this.dataArray.length - 1); }

public pushAllData(data:T[]): void { for (let index = 0; index < data.length; index++) { this.pushData(data[index]) } } }

export interface ViewData<T extends Object> { items: DataSource<T>, builder: WrappedBuilder<[T]> }

// LazyList

import { DataSource,ViewData } from ‘@ohos/common’ @Component export struct LazyList { @Prop data: ViewData<ESObject> @Prop valueField:string = ‘id’

build() { List({ space: 12 }) { LazyForEach(this.data.items, (item:DataSource<ESObject>) => { ListItem() { this.data.builder.builder(item) } }, (item: ESObject,index:number) => item[this.valueField] || index.toString()) } .width(‘100%’) .height(‘100%’) } }

// page

import { DataSource,ViewData } from ‘@ohos/common’ import { LazyList } from ‘…/view/LazyList’

class Tmp{ label?: string = ‘’; constructor(label:string) { this.label = label } }

@Builder function componentBuilder(item:Tmp) { Text(item.label) }

@Entry @Component struct Index { @State data :ViewData<Tmp> = { items: new DataSource(), builder: wrapBuilder(componentBuilder) }

aboutToAppear() { for (let i = 0; i <= 20; i++) { this.data.items.pushData( new Tmp(hello ${i})) } }

build() { Column(){ LazyList({ data: this.data }) } } }