LazyForEach数据懒加载
LazyForEach从提供的数据源中按需迭代数据,并在每次迭代过程中创建相应的组件。当在滚动容器中使用了LazyForEach,框架会根据滚动容器可视区域按需创建组件,当组件滑出可视区域外时,框架会进行组件销毁回收以降低内存占用。
应用场景
- LazyForEach必须在容器组件内使用,仅有List、Grid、Swiper以及WaterFlow组件支持数据懒加载(可配置cachedCount属性,即只加载可视部分以及其前后少量数据用于缓冲),其他组件仍然是一次性加载所有的数据。
- LazyForEach所使用的数据源必须实现IDataSource接口并重写里面的四个方法。
数据源封装
数据源需要自己封装成一个类并实现IDataSource接口,重写必备的四个方法。
javascript
export class datamodel implements IDataSource{
totalCount(): number { //数据源数据个数
throw new Error("Method not implemented.");
}
getData(index: number) {//根据下标获取数据
throw new Error("Method not implemented.");
}
registerDataChangeListener(listener: DataChangeListener): void {//注册数据改变监听
throw new Error("Method not implemented.");
}
unregisterDataChangeListener(listener: DataChangeListener): void {//解绑数据改变监听
throw new Error("Method not implemented.");
}
}
除此之外,该类还要有数据源和数据监听数组两个全局变量。并提供数据源改变的相关操作方法,每次更新数据源都要刷新所有的数据监听器。
javascript
export class datamodel<T> implements IDataSource {
private datas: T[] = [] //数据源
private listeners: DataChangeListener[] = [] //数据监听
// 数据源构造器
constructor(datas: T[]) {
this.datas = datas;
}
totalCount(): number { //数据源中数据个数
return this.datas.length
}
getData(index: number) { //获取下标对应的数据
return this.datas[index]
}
registerDataChangeListener(listener: DataChangeListener): void { //注册监听器
if (this.listeners.indexOf(listener) < 0) { //当前监听器数组中没有数据
this.listeners.push(listener) //增加该监听
}
}
unregisterDataChangeListener(listener: DataChangeListener): void {
let pos = this.listeners.indexOf(listener)
if (pos > 0) //当前监听器数组中有数据
{
this.listeners.splice(pos, 1) //移除该监听
}
}
//_______________________________数据源操作方法 新增数据、插入数据、删除数据、更新数据________________________
addData(item: T) { //尾部增加元素
this.datas.push(item)
this.listeners.forEach((listener: DataChangeListener) => {
listener.onDataAdd(this.datas.length - 1)
})
}
addData1(index: number, item: T) { //某个位置添加元素
this.datas.splice(index, 0, item)
this.listeners.forEach((listener: DataChangeListener) => {
listener.onDataAdd(index)
})
}
delData() { //末尾移除元素
this.datas.pop()
this.listeners.forEach((listener: DataChangeListener) => {
listener.onDataDelete(this.datas.length - 1)
})
}
delData1(index: number) { //移除某个下标对应的元素
this.datas.splice(index, 1)
this.listeners.forEach((listener: DataChangeListener) => {
listener.onDataDelete(index)
})
}
updData(index: number, Data: T) { //更新某个下标的元素
this.datas.splice(index, 1, Data)
this.listeners.forEach((listener: DataChangeListener) => {
listener.onDataChange(index)
})
}
}
List应用
使用懒加载将数据加载到list组件中。
javascript
import { datamodel } from '../datamodel/datamodel';
@Entry
@Component
struct Test {
@State message: string = 'Hello World';
@State datas:string[]=['item1','item2','item3','item4','item5','item6','item7','item8','item9','item10']
@State models:datamodel<string>=new datamodel(this.datas)
build() {
Column() {
List() {
LazyForEach(this.models, (item: string,index:number) => { //数据懒加载
ListItem() {
this.genItem(index+1, item)
}
}, (item: number) => JSON.stringify(item))
}
}
.height('100%')
.width('100%')
}
@Builder genItem(index:number,txt:string)//listitem子布局
{
Row({space:20}){
Text((index)+'').padding(10).borderRadius(30).backgroundColor(Color.Red).fontWeight(FontWeight.Bold).fontColor(Color.White)
Text(txt).padding(10).fontSize(14)
}.padding(10).width('100%')
}
}
新增数据、删除数据和更新数据操作。
javascript
import { datamodel } from '../datamodel/datamodel';
@Entry
@Component
struct Test {
@State message: string = 'Hello World';
@State datas: string[] = ['item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7', 'item8', 'item9', 'item10']
@State models: datamodel<string> = new datamodel(this.datas)
build() {
Stack() {
Column() {
List() {
LazyForEach(this.models, (item: string, index: number) => { //数据懒加载
ListItem() {
this.genItem(index + 1, item)
}
}, (item: number) => JSON.stringify(item))
}
}
.height('100%')
.width('100%')
Row() {
Button('新增元素').onClick(() => {
this.models.addData1(1, '新增元素')
})
Button('删除元素').onClick(() => {
this.models.delData()
})
Button('更新元素').onClick(() => {
this.models.updData(5,'更新元素')
})
}.width('100%').justifyContent(FlexAlign.SpaceEvenly)
}.width('100%').height('100%').alignContent(Alignment.Bottom)
}
@Builder
genItem(index: number, txt: string){ //listitem子布局
Row({ space: 20 }) {
Text((index) + '')
.padding(10)
.borderRadius(30)
.backgroundColor(Color.Red)
.fontWeight(FontWeight.Bold)
.fontColor(Color.White)
Text(txt).padding(10).fontSize(14)
}.padding(10).width('100%')
}
}
注意
所有的操作都是针对数据的变化,数组下标的变化并不会体现在UI刷新上。