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

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

LazyForEach(dataSource: IDataSource,             // 需要进行数据迭代的数据源 itemGenerator: (item: any) => void,  // 子组件生成函数keyGenerator?: (item: any) => string // (可选) .键值生成函数
): void
interface IDataSource {totalCount(): number;                                             // Get total count of datagetData(index: number): any;                                      // Get single data by indexregisterDataChangeListener(listener: DataChangeListener): void;   // Register listener to listening data changesunregisterDataChangeListener(listener: DataChangeListener): void; // Unregister listener
}
interface DataChangeListener {onDataReloaded(): void;                      // Called while data reloadedonDataAdd(index: number): void;            // Called while single data addedonDataMove(from: number, to: number): void; // Called while single data movedonDataDelete(index: number): void;          // Called while single data deletedonDataChange(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数据懒加载-开源基础软件社区


三、DataChangeListener类型说明
 

HarmonyOS/OpenHarmony应用开发-ArkTS语言渲染控制LazyForEach数据懒加载-开源基础软件社区


四、使用限制
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)}}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/101522.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【计算机视觉|生成对抗】StackGAN:使用堆叠生成对抗网络进行文本到照片逼真图像合成

本系列博文为深度学习/计算机视觉论文笔记&#xff0c;转载请注明出处 标题&#xff1a;StackGAN: Text to Photo-realistic Image Synthesis with Stacked Generative Adversarial Networks 链接&#xff1a;[1612.03242] StackGAN: Text to Photo-realistic Image Synthesis…

[Mac软件]Pixelmator Pro 3.3.12 专业图像编辑中文版

Pixelmator Pro是专为Mac设计的功能强大&#xff0c;美观且易于使用的图像编辑器。借助广泛的专业级无损图像编辑工具&#xff0c;Pixelmator Pro可使您发挥出最佳的照片效果&#xff0c;创建华丽的构图和设计&#xff0c;绘制&#xff0c;绘画&#xff0c;应用令人惊叹的效果&…

scala中json4s 使用详解

预备知识 json4s的数据结构AST (Abstract Syntax Tree)。 sealed abstract class JValue case object JNothing extends JValue // zero for JValue case object JNull extends JValue case class JString(s: String) extends JValue case class JDouble(num: Double) extend…

Vulnhub系列靶机--- Hackadmeic.RTB1

系列&#xff1a;Hackademic&#xff08;此系列共2台&#xff09; 难度&#xff1a;初级 信息收集 主机发现 netdiscover -r 192.168.80.0/24端口扫描 nmap -A -p- 192.168.80.143访问80端口 使用指纹识别插件查看是WordPress 根据首页显示的内容&#xff0c;点击target 点击…

0822|C++day2 引用+函数重载

一、左值引用(reference) 如果想要实现两个数据的交换&#xff0c;值传递不能交换实参&#xff0c;地址传递可以交换实参&#xff0c;会额外开辟空间 【1】概念 引用其实就是给变量起了一个别名&#xff0c;孙悟空(齐天大圣)C对C的一个最重要的扩充 【2】定义 数据类型 &am…

Leetcode---359周赛

题目列表 2828. 判别首字母缩略词 2829. k-avoiding 数组的最小总和 2830. 销售利润最大化 2831. 找出最长等值子数组 一、判断首字母缩略词 纯模拟&#xff0c;代码如下 class Solution { public:bool isAcronym(vector<string>& words, string s) {string tmp…

Faster RCNN网络数据流总结

前言 在学习Faster RCNN时&#xff0c;看了许多别人写的博客。看了以后&#xff0c;对Faster RCNN整理有了一个大概的了解&#xff0c;但是对训练时网络内部的数据流还不是很清楚&#xff0c;所以在结合这个版本的faster rcnn代码情况下&#xff0c;对网络数据流进行总结。以便…

使用IDEA把Java程序打包成jar

点击左上角File,选择Project Structure 左侧选中Artifacts,点击右侧的号 选择JAR->From modules with dependencies 选择你要运行的main方法所在的类,选好了点击OK Artifacts添加完成后点击右下角OK 在工具栏中找到Build,选择Build Artifacts 刚才创建好的Artifacts,选择Bui…

Python——利用列表推导式实现乘法口诀

直接上代码&#xff1a; print("\n".join([" ".join(["{}*{}{}".format(x, y, x*y) for x in range(1,y1)]) for y in range(1,10)]))结果如下&#xff1a; 1*11 1*22 2*24 1*33 2*36 3*39 1*44 2*48 3*412 4*416 1*55 2*510 3*515 4*520 5*52…

ARM--day7(cortex_M4核LED实验流程、异常源、异常处理模式、异常向量表、异常处理流程、软中断编程、cortex_A7核中断实验)

软中断代码&#xff1a;&#xff08;keil软件&#xff09; .text .global _start _start:1.构建异常向量表b resetb undef_interruptb software_interruptb prefetch_dataabortb data_abortb .b irqb fiq reset:2.系统一上电&#xff0c;程序运行在SVC模式1>>初始化SVC模…

excel中如果A列中某项有多条记录,针对A列中相同的项,将B列值进行相加合并统计

excel中如果A列中某项有多条记录&#xff0c;针对A列中相同的项&#xff0c;将B列值进行相加合并统计。 如&#xff1a; 实现方法&#xff1a; C1、D1中分别输入公式&#xff0c;然后下拉 IF(COUNTIF($A$1:A1,A1)1, A1,"") #A1根据实际情况调整&#xff0c;如果…

从零开始学习YOLOv5 保姆级教程

一、前言 YOLO系列是one-stage且是基于深度学习的回归方法&#xff0c;而R-CNN、Fast-RCNN、Faster-RCNN等是two-stage且是基于深度学习的分类方法。 YOLOv5是一种单阶段目标检测算法&#xff0c;该算法在YOLOv4的基础上添加了一些新的改进思路&#xff0c;使其速度与精度都得…

MPP 还是主流架构吗

MPP 架构&#xff1a; MPP 架构的产品&#xff1a; Impala ClickHouse Druid Doris 很多 OLAP 引擎都采用了 MPP 架构 批处理系统 - 使用场景分钟级、小时级以上的任务&#xff0c;目前很多大型互联网公司都大规模运行这样的系统&#xff0c;稳定可靠&#xff0c;低成本。…

【C++奇遇记】内存模型

&#x1f3ac; 博客主页&#xff1a;博主链接 &#x1f3a5; 本文由 M malloc 原创&#xff0c;首发于 CSDN&#x1f649; &#x1f384; 学习专栏推荐&#xff1a;LeetCode刷题集 数据库专栏 初阶数据结构 &#x1f3c5; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如…

2023年03月 C/C++(三级)真题解析#中国电子学会#全国青少年软件编程等级考试

第1题&#xff1a;和数 给定一个正整数序列&#xff0c;判断其中有多少个数&#xff0c;等于数列中其他两个数的和。 比如&#xff0c;对于数列1 2 3 4, 这个问题的答案就是2, 因为3 2 1, 4 1 3。 时间限制&#xff1a;10000 内存限制&#xff1a;65536 输入 共两行&#x…

2023国赛数学建模B题思路模型代码 高教社杯

本次比赛我们将会全程更新思路模型及代码&#xff0c;大家查看文末名片获取 之前国赛相关的资料和助攻可以查看 2022数学建模国赛C题思路分析_2022国赛c题matlab_UST数模社_的博客-CSDN博客 2022国赛数学建模A题B题C题D题资料思路汇总 高教社杯_2022国赛c题matlab_UST数模社…

svg mask和stroke冲突问题

目录 先说结论各种样例首先是水平、垂直的线然后是斜线如果是图形加stroke呢用《g》标签包起来呢 总结 先说结论 实际上svg里&#xff0c;mask对svg内元素起作用的并非元素本身&#xff0c;而是元素几何形状的外包矩形&#xff0c;特别是和stroke有冲突&#xff0c;会产生奇怪…

STM32 CubeMX (第二步Freertos任务通信:队列、信号量、互斥量,事件组,任务通知)

STM32 CubeMX STM32 CubeMX ____Freertos任务通信&#xff1a;队列、信号量、互斥量&#xff0c;事件组&#xff0c;任务通知 STM32 CubeMX一、STM32 CubeMX设置时钟配置HAL时基选择TIM1&#xff08;不要选择滴答定时器&#xff1b;滴答定时器留给OS系统做时基&#xff09;使用…

苍穹外卖 day3 实现登录过程中MD5加密

一 原来是明文存的 密码可见度太高&#xff0c;MD5加密为密文图像 效果 二 密文实现步骤 修改明文密码&#xff0c;改成密文 123456 密文值&#xff1a;e10adc3949ba59abbe56e057f20f883e代码如下所示 在这里插入代码片 package com.sky.service.impl;import com.sky.con…

Vue使用Animate.css

说一下Animate.css这个动画库&#xff0c;很多的动画在这个库里面都定义好了&#xff0c;我们用的时候可以直接使用里面的类名就可以了&#xff0c;就是直接目标元素绑定对应的类名就可以实现动画效果&#xff0c;非常方便&#xff0c;库其实也相对简单&#xff0c;使用起来也简…