首页 > 其他分享 >HarmonyOS/OpenHarmony应用开发-ArkTS语言渲染控制LazyForEach数据懒加载

HarmonyOS/OpenHarmony应用开发-ArkTS语言渲染控制LazyForEach数据懒加载

时间:2023-08-22 11:32:19浏览次数:35  
标签:OpenHarmony ArkTS index void number LazyForEach listener data

LazyForEach从提供的数据源中按需迭代数据,并在每次迭代过程中创建相应的组件。当LazyForEach在滚动容器中使用了,框架会根据滚动容器可视区域按需创建组件,当组件划出可视区域外时,框架会进行组件销毁回收以降低内存占用。
一、接口描述

LazyForEach(
    dataSource: IDataSource,             // 需要进行数据迭代的数据源 
    itemGenerator: (item: any) => void,  // 子组件生成函数
    keyGenerator?: (item: any) => string // (可选) .键值生成函数
): void
interface IDataSource {
    totalCount(): number;                                             // Get total count of data
    getData(index: number): any;                                      // Get single data by index
    registerDataChangeListener(listener: DataChangeListener): void;   // Register listener to listening data changes
    unregisterDataChangeListener(listener: DataChangeListener): void; // Unregister listener
}
interface DataChangeListener {
    onDataReloaded(): void;                      // Called while data reloaded
    onDataAdd(index: number): void;            // Called while single data added
    onDataMove(from: number, to: number): void; // Called while single data moved
    onDataDelete(index: number): void;          // Called while single data deleted
    onDataChange(index: number): void;          // Called while single data changed
.}

HarmonyOS/OpenHarmony应用开发-ArkTS语言渲染控制LazyForEach数据懒加载_键值


二、IDataSource类型说明

interface IDataSource {
    totalCount(): number;
    getData(index: number): any; 
    registerDataChangeListener(listener: DataChangeListener): void;
    unregisterDataChangeListener(listener: DataChangeListener): void;
}

HarmonyOS/OpenHarmony应用开发-ArkTS语言渲染控制LazyForEach数据懒加载_数据_02


三、DataChangeListener类型说明

HarmonyOS/OpenHarmony应用开发-ArkTS语言渲染控制LazyForEach数据懒加载_迭代_03


四、使用限制

LazyForEach必须在容器组件内使用,仅有List、Grid以及Swiper组件支持数据懒加载(即只加载可视部分以及其前后少量数据用于缓冲),其他组件仍然是一次性加载所有的数据。

LazyForEach在每次迭代中,必须创建且只允许创建一个子组件。

生成的子组件必须是允许包含在LazyForEach父容器组件中的子组件。
允许LazyForEach包含在if/else条件渲染语句中,也允许LazyForEach中出现if/else条件渲染语句。
键值生成器必须针对每个数据生成唯一的值,如果键值相同,将导致键值相同的UI组件被框架忽略,从而无法在父容器内显示。
LazyForEach必须使用DataChangeListener对象来进行更新,第一个参数dataSource使用状态变量时,状态变量改变不会触发LazyForEach的UI刷新。
为了高性能渲染,通过DataChangeListener对象的onDataChange方法来更新UI时,需要生成不同于原来的键值来触发组件刷新。
itemGenerator函数的调用顺序不一定和数据源中的数据项相同,在开发过程中不要假设itemGenerator和keyGenerator函数是否执行及其执行顺序。例如,以下示例可能无法正常运行:

LazyForEach(dataSource, 
  item => Text(`${item.i}. item.data.label`),
  item => item.data.id.toString())

五、示例

// Basic implementation of IDataSource to handle data listener
class BasicDataSource implements IDataSource {
  private listeners: DataChangeListener[] = [];

  public totalCount(): number {
    return 0;
  }

  public getData(index: number): any {
    return undefined;
  }

  registerDataChangeListener(listener: DataChangeListener): void {
    if (this.listeners.indexOf(listener) < 0) {
      console.info('add listener');
      this.listeners.push(listener);
    }
  }

  unregisterDataChangeListener(listener: DataChangeListener): void {
    const pos = this.listeners.indexOf(listener);
    if (pos >= 0) {
      console.info('remove listener');
      this.listeners.splice(pos, 1);
    }
  }

  notifyDataReload(): void {
    this.listeners.forEach(listener => {
      listener.onDataReloaded();
    })
  }

  notifyDataAdd(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataAdd(index);
    })
  }

  notifyDataChange(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataChange(index);
    })
  }

  notifyDataDelete(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataDelete(index);
    })
  }

  notifyDataMove(from: number, to: number): void {
    this.listeners.forEach(listener => {
      listener.onDataMove(from, to);
    })
  }
}

class MyDataSource extends BasicDataSource {
  private dataArray: string[] = ['/path/image0', '/path/image1', '/path/image2', '/path/image3'];

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

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

  public addData(index: number, data: string): void {
    this.dataArray.splice(index, 0, data);
    this.notifyDataAdd(index);
  }

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

@Entry
@Component
struct MyComponent {
  private data: MyDataSource = new MyDataSource();

  build() {
    List({ space: 3 }) {
      LazyForEach(this.data, (item: string) => {
        ListItem() {
          Row() {
            Image(item).width('30%').height(50)
            Text(item).fontSize(20).margin({ left: 10 })
          }.margin({ left: 10, right: 10 })
        }
        .onClick(() => {
          this.data.pushData('/path/image' + this.data.totalCount());
        })
      }, item => item)
    }
  }
}


标签:OpenHarmony,ArkTS,index,void,number,LazyForEach,listener,data
From: https://blog.51cto.com/u_14946066/7187626

相关文章

  • HarmonyOS/OpenHarmony应用开发-ArkTS语言渲染控制LazyForEach数据懒加载
    LazyForEach从提供的数据源中按需迭代数据,并在每次迭代过程中创建相应的组件。当LazyForEach在滚动容器中使用了,框架会根据滚动容器可视区域按需创建组件,当组件划出可视区域外时,框架会进行组件销毁回收以降低内存占用。一、接口描述LazyForEach(dataSource:IDataSource,......
  • OpenHarmony系统解决方案 - 输入法弹出时按返回键原页面返回或应用退出
    问题描述问题环境系统版本:OpenHarmony-3.2-Release问题现象打开任意包含输入组件界面的应用,点击输入组件弹出输入法。点击返回按键。输入法隐藏,原应用页面返回或应用退出。异常效果点击返回按键,输入法隐藏,原应用页面返回或应用退出。正常效果点击返回按键,仅隐藏输入法。问题原因由......
  • HarmonyOS/OpenHarmony应用开发-ArkTS语言渲染控制if/else条件渲染
    ArkTS提供了渲染控制的能力。条件渲染可根据应用的不同状态,使用if、else和elseif渲染对应状态下的UI内容。说明:从APIversion9开始,该接口支持在ArkTS卡片中使用。一、使用规则支持if、else和elseif语句。if、elseif后跟随的条件语句可以使用状态变量。允许在容器组件内使用,通过......
  • OpenHarmony应用开发,申请权限导致应用无法安装问题
    我是在添加ohos.permission.GET_RUNNING_INFO(允许应用获取运行态信息)权限时遇到的该问题。现象:问题原因:应用权限分三个级别:normal、system_basic、system_core第一步:查询使用权限的级别https://docs.openharmony.cn/pages/v3.2/zh-cn/application-dev/security/permission-......
  • 搭载KaihongOS的工业平板、机器人、无人机等产品通过3.2版本兼容性测评,持续繁荣OpenHa
    近日,搭载深圳开鸿数字产业发展有限公司(简称“深开鸿”)KaihongOS软件发行版的工业平板、机器人、无人机等商用产品均通过OpenAtom OpenHarmony(以下简称“OpenHarmony”)3.2 Release版本兼容性测评,获颁OpenHarmony生态产品兼容性证书。这标志着OpenHarmony生态在新兴行业的......
  • OpenHarmony Meetup 广州站 OpenHarmony正当时—技术开源
     招募令 OpenHarmony Meetup 广州站 火热招募中,等待激情四射的开发者,线下参与OpenHarmonyMeetup线下交流 展示前沿技术、探讨未来可能、让你了解更多专属OpenHarmony的魅力 线下参与,先到先得,仅限20个名额! 报名截止时间8月23日24:00点 1、可获得惊喜开发......
  • 调研capacitor兼容openharmony平台可行性
    团队可能需要对开源的capacitor跨平台框架进行扩展,以生产支持OpenHarmony平台的应用,在此调研可行性、实现路径和预期工作量。可行性分析在验证capacitor是否可以将OpenHarmony作为生成应用的目标平台之前,需先弄清capacitor-android是如何支持一个web应用在android......
  • OpenHarmony社区运营报告(2023年7月)
     本月快讯• 2023年7月28日-29日,全球软件质量&效能大会(简称“QECon”)圆满举行,OpenAtom OpenHarmony(简称“OpenHarmony”)以“优质高效测试助力OpenHarmony北向应用生态赋能”为主题,以专题展区+专场分论坛的形式精彩亮相,这是OpenHarmony自2022年7月参加QECon全球软件质量&效能......
  • OpenHarmony应用实现二维码扫码识别
    OpenHarmony应用实现二维码扫码识别概念介绍二维码的应用场景非常广泛,在购物应用中,消费者可以直接扫描商品二维码,浏览并购买产品,如图是购物应用的扫描二维码的页面。本文就以橘子购物示例应用为例,来讲解OpenHarmony应用二维码开发相关的技术点。我们先看下二维码相关的几个概念......
  • HarmonyOS/OpenHarmony应用开发-ArkTSAPI系统能力SystemCapability列表
    SysCap,全称SystemCapability,即系统能力,指操作系统中每一个相对独立的特性。开发者使用某个接口进行开发前,建议先阅读系统能力使用说明,了解Syscap的定义和使用指导。说明当前列表枚举出3.1Beta版本中支持的系统能力。开发者可以在SDK中通过phone.json文件查询。SystemCapability.Ar......