鸿蒙5.0开发进阶：ArkTS组件-LazyForEach

最新推荐文章于 2025-03-11 20:30:00 发布
原创 最新推荐文章于 2025-03-11 20:30:00 发布 · 974 阅读 · 28 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#harmonyos #华为 #android #前端 #ArkUI #ArkTS #鸿蒙系统

往期鸿蒙5.0全套实战文章必看：（文中附带全栈鸿蒙5.0学习资料）

LazyForEach

说明

本模块首批接口从API version 7开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。

接口

LazyForEach(dataSource: IDataSource,itemGenerator: (item: any, index: number) => void,keyGenerator?: (item: any, index: number) => string,)

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

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
dataSourceIDataSource是LazyForEach数据源，需要开发者实现相关接口。
itemGenerator(item: Object, index: number) => void是

子组件生成函数，为数组中的每一个数据项创建一个子组件。

说明：

- item是当前数据项，index是数据项索引值。

- itemGenerator的函数体必须使用大括号{...}。

- itemGenerator每次迭代只能并且必须生成一个子组件。

- itemGenerator中可以使用if语句，但是必须保证if语句每个分支都会创建一个相同类型的子组件。

- itemGenerator中不允许使用ForEach和LazyForEach语句。

keyGenerator(item: Object, index: number) => string否

键值生成函数，用于给数据源中的每一个数据项生成唯一且固定的键值。当数据项在数组中的位置更改时，其键值不得更改，当数组中的数据项被新项替换时，被替换项的键值和新项的键值必须不同。键值生成器的功能是可选的，但是，为了使开发框架能够更好地识别数组更改，提高性能，建议提供。如将数组反向时，如果没有提供键值生成器，则LazyForEach中的所有节点都将重建。

说明：

- item是当前数据项，index是数据项索引值。

- 数据源中的每一个数据项生成的键值不能重复。

属性

继承自DynamicNode。

IDataSource10+

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

totalCount

totalCount(): number

获得数据总数。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

getData

getData(index: number): Object

获取索引值index对应的数据。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
indexnumber是获取数据对应的索引值。

registerDataChangeListener

registerDataChangeListener(listener: DataChangeListener): void

注册数据改变的监听器。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
listenerDataChangeListener是数据变化监听器。

unregisterDataChangeListener

unregisterDataChangeListener(listener: DataChangeListener): void

注销数据改变的监听器。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
listenerDataChangeListener是数据变化监听器。

DataChangeListener10+

数据变化监听器。

说明

DataChangeListener除onDatasetChange以外的方法中，当参数包含index且值为负数时，会默认用0来替换。onDatasetChange中，当单个DataOperation参数包含index且值在数据源索引范围之外（DataAddOperation中index可以等于数据源长度），则对应DataOperation不会生效。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

onDataReloaded

onDataReloaded(): void

通知组件重新加载所有数据。键值没有变化的数据项会使用原先的子组件，键值发生变化的会重建子组件。重新加载数据完成后调用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

onDataAdded(deprecated)

onDataAdded(index: number): void

通知组件index的位置有数据添加。添加数据完成后调用。

从API 8开始，建议使用onDataAdd。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
indexnumber是数据添加位置的索引值。

onDataMoved(deprecated)

onDataMoved(from: number, to: number): void

通知组件数据有移动。将from和to位置的数据进行交换。

从API 8开始，建议使用onDataMove。

说明

数据移动前后键值要保持不变，如果键值有变化，应使用删除数据和新增数据接口。数据移动起始位置与数据移动目标位置交换完成后调用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
fromnumber是数据移动起始位置。
tonumber是数据移动目标位置。

onDataDeleted(deprecated)

onDataDeleted(index: number): void

通知组件删除index位置的数据并刷新LazyForEach的展示内容。删除数据完成后调用。

从API 8开始，建议使用onDataDelete。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
indexnumber是数据删除位置的索引值。

onDataChanged(deprecated)

onDataChanged(index: number): void

通知组件index的位置有数据有变化。改变数据完成后调用。

从API 8开始，建议使用onDataChange。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
indexnumber是数据变化监听器。

onDataAdd8+

onDataAdd(index: number): void

通知组件index的位置有数据添加。添加数据完成后调用

卡片能力： 从API version 10开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
indexnumber是数据添加位置的索引值。

onDataMove8+

onDataMove(from: number, to: number): void

通知组件数据有移动。将from和to位置的数据进行交换。数据移动起始位置与数据移动目标位置交换完成后调用。

说明

数据移动前后键值要保持不变，如果键值有变化，应使用删除数据和新增数据接口。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
fromnumber是数据移动起始位置。
tonumber是数据移动目标位置。

onDataDelete8+

onDataDelete(index: number): void

通知组件删除index位置的数据并刷新LazyForEach的展示内容。删除数据完成后调用。

说明

需要保证dataSource中的对应数据已经在调用onDataDelete前删除，否则页面渲染将出现未定义的行为。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
indexnumber是数据删除位置的索引值。

onDataChange8+

onDataChange(index: number): void

通知组件index的位置有数据有变化。改变数据完成后调用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
indexnumber是数据变化位置的索引值。

onDatasetChange12+

onDatasetChange(dataOperations: DataOperation[]): void

进行批量的数据处理后，调用onDatasetChange接口通知组件按照dataOperations刷新组件。

说明

onDatasetChange接口不能与其他DataChangeListener的更新接口混用。如在同一个LazyForEach中，调用过onDataAdd接口后，不能再调用onDatasetChange接口；反之，调用过onDatasetChange接口后，也不能调用onDataAdd等其他更新接口。页面中不同LazyForEach之间互不影响。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
dataOperationsDataOperation[]是一次处理数据的操作。

DataOperation12+

说明

本模块首批接口从API version 12开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

DataAddOperation

添加数据操作。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
typeDataOperationType.ADD是数据添加类型。
indexnumber是插入数据索引值。
countnumber否插入数量，默认为1。
keystring | Array<string>否为插入的数据分配键值。

DataDeleteOperation

删除数据操作。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
typeDataOperationType.DELETE是数据删除类型。
indexnumber是起始删除位置索引值。
countnumber否删除数据数量，默认为1。

DataChangeOperation

改变数据操作。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
typeDataOperationType.CHANGE是数据改变类型。
indexnumber是改变的数据的索引值。
keystring否为改变的数据分配新的键值，默认使用原键值。

DataMoveOperation

移动数据操作。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
typeDataOperationType.MOVE是数据移动类型。
indexMoveIndex是移动位置。
keystring否为被移动的数据分配新的键值，默认使用原键值。

MoveIndex

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
fromnumber是起始移动位置。
tonumber是目的移动位置。

DataExchangeOperation

交换数据操作。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
typeDataOperationType.EXCHANGE是数据交换类型。
indexExchangeIndex是交换位置。
keyExchangeKey否分配新的键值，默认使用原键值。

ExchangeIndex

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
startnumber是第一个交换位置。
endnumber是第二个交换位置。

ExchangeKey

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
startstring是为第一个交换的位置分配新的键值，默认使用原键值。
endstring是为第二个交换的位置分配新的键值，默认使用原键值。

DataReloadOperation

重载所有数据操作。当onDatasetChange含有DataOperationType.RELOAD操作时，其余操作全部失效，框架会自己调用keygenerator进行键值比对。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
typeDataOperationType.RELOAD是数据全部重载类型。

DataOperationType枚举说明

枚举类型，数据操作说明。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称值说明
ADDadd数据添加。
DELETEdelete数据删除。
CHANGEchange数据改变。
MOVEmove数据移动。
EXCHANGEexchange数据交换。
RELOADreload全部数据重载。

（五）鸿蒙HarmonyOS主力开发语言ArkTS-数据懒加载(LazyForEach)
qq_44160056的博客
04-01 2776
系列文章目录 （一）鸿蒙HarmonyOS开发基础 （二）鸿蒙HarmonyOS主力开发语言ArkTS-基本语法 （三）鸿蒙HarmonyOS主力开发语言ArkTS-状态管理 （四）鸿蒙HarmonyOS主力开发语言ArkTS-渲染控制 文章目录系列文章目录LazyForEach：数据懒加载接口描述IDataSource类型说明DataChangeListener类型说明使用限制键值生成规则组件创建规则首次渲染 LazyForEach：数据懒加载 LazyForEach从提供的数据源中按需迭代数据，并在
《跟我一起学“Harmony-ArkTS”》——懒加载（LazyForEach）
Cool_foolisher的博客
03-17 933
本章言简意赅的为大家介绍了懒加载（LazyForEach）的内容。
鸿蒙开发渲染控制【LazyForEach：数据懒加载】
2401_82772199的博客
07-31 758
LazyForEach从提供的数据源中按需迭代数据，并在每次迭代过程中创建相应的组件。当在滚动容器中使用了LazyForEach，框架会根据滚动容器可视区域按需创建组件，当组件滑出可视区域外时，框架会进行组件销毁回收以降低内存占用。
HarmonyOS应用开发-ArkTS语言的LazyForEach懒加载循环
初一十五的博客
03-15 2189
LazyForEach懒加载循环作用？
鸿蒙Harmony应用开发—ArkTS-LazyForEach：数据懒加载
m0_64420071的博客
03-23 2401
LazyForEach从提供的数据源中按需迭代数据，并在每次迭代过程中创建相应的组件。
鸿蒙5.0开发进阶：多媒体发布实现案例
HSMMQAQ的博客
11-03 523
本示例主要介绍使用@ohos.file.photoAccessHelper实现访问系统相册获取媒体资源的多媒体发布场景。
鸿蒙5.0开发进阶：UI框架-ArkTS组件（Tabs）
Androidbye的博客
01-09 829
通过页签进行内容视图切换的容器组件，每个页签对应一个内容视图。
鸿蒙5.0进阶开发：UI开发-构建布局（创建网格 (Grid/GridItem)）
AyomQAQ的博客
12-17 1243
网格布局是由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。
鸿蒙5.0开发进阶：表情聊天实现案例
HSMMQAQ的博客
10-09 1589
本示例主要介绍如何在聊天信息中加入表情图片。
鸿蒙5.0开发进阶：视频全屏切换实现案例
HSMMQAQ的博客
10-25 1054
本示例介绍了Video组件和@ohos.window接口实现媒体全屏的功能。
HarmonyOS/OpenHarmony应用开发-ArkTS语言渲染控制LazyForEach数据懒加载
weixin_69135651的博客
08-22 1971
HarmonyOS/OpenHarmony应用开发-ArkTS语言渲染控制LazyForEach数据懒加载
ArkTs之:数据懒加载——LazyForEach的用法
qq_43313093的博客
08-25 1011
LazyForEach从提供的数据源中按需迭代数据，并在每次迭代过程中创建相应的组件。当在滚动容器中使用了LazyForEach，框架会根据滚动容器可视区域按需创建组件，当组件滑出可视区域外时，框架会进行组件销毁回收以降低内存占用。
Arkts深入了解运用 LazyForEach
一键难忘的博客
11-30 1611
Arkts深入了解运用 LazyForEach【鸿蒙专栏-17】 当LazyForEach嵌套在滚动容器中时，它会根据滚动容器的可视区域按需创建组件，当组件滑出可视区域时，框架会进行组件销毁回收，从而降低内存占用。LazyForEach是ARK框架中强大的数据懒加载工具，通过按需加载数据项，实现了高效的性能优化。在使用LazyForEach时，我们需要注意正确配置其接口参数，实现正确的数据源接口，以及规避一些潜在的使用限制和注意事项。
鸿蒙开发之LazyForEach及刷新问题
Lu_Ca的博客
02-20 4135
在开发过程中会遇到list、grid的item过多的情况。例如某些新闻类、某些购物类的页面，如果我们有大量的数据，直接通过ForEach进行全量渲染会直接把手机卡死。这样肯定是不行的，这个时候LazyForEach就该登场了。LazyForEach主要是用来针对列表数据量大、列表组件复杂的场景，减少了页面一次性加载数据的时间消耗，减少了内存峰值。可以显著提升页面的能效比和用户体验。实现原理就是它会从提供的数据源中按需迭代数据，并在每次迭代过程中创建相应的组件。
鸿蒙应用开发--鸿蒙 LazyForEach 组件详解
2401_88846919的博客
03-06 2476
LazyForEach 是处理鸿蒙超长列表的黄金工具，开发者需重点掌握。，避免一次性渲染全部内容导致的内存和性能问题。LazyForEach 是鸿蒙 ArkUI 框架中用于。通过合理配置，可轻松实现万级数据列表的流畅滚动体验。的核心组件，专为处理。提供复用实例/新建组件。
鸿蒙HarmonyOS 5.0开发：LazyForEach：数据懒加载
m0_73088370的博客
12-15 1432
LazyForEach从提供的数据源中按需迭代数据，并在每次迭代过程中创建相应的组件。
鸿蒙开发笔记-11-LazyForEach 数据懒加载
o118abcdef的博客
03-11 1466
LazyForEach作为鸿蒙长列表渲染的核心方案，其高效性来源于精妙的动态加载+组件复用双重机制。键值生成规则必须保证全局唯一性数据更新必须通过规范操作结合@Reusable实现组件级复用优化合理配置平衡性能与内存。
HarmonyOS应用开发--LazyForeach懒加载
2302_80840424的博客
12-13 1375
通过本文的学习，了解LazyForeach的基本概念、工作原理和使用方法，还通过实际案例深入理解了其在不同场景下的应用。我们可以将图片URL的集合传递给LazyForeach，然后在每次需要显示图片时，再从LazyForeach中获取当前图片的URL，并进行加载。懒加载意味着数据的加载和处理可以延迟到真正需要的时候才进行，这有助于减少内存消耗和提高应用性能。我们可以将音乐ID的集合传递给LazyForeach，然后在用户浏览音乐列表时，根据用户的滚动和点击操作动态加载音乐的元数据。
数据懒加载LazyForEach
12-24 890
LazyForEach从提供的数据源中按需迭代数据，并在每次迭代过程中创建相应的组件。当在滚动容器中使用了LazyForEach，框架会根据滚动容器可视区域按需创建组件，当组件滑出可视区域外时，框架会进行组件销毁回收以降低内存占用。
鸿蒙5.0版开发：ArkTS组件通用属性（触摸热区设置）
最新发布
08-21
在 HarmonyOS 5.0 的 ArkTS 组件中，设置触摸热区（Touch Area）属性可以通过组件的 `touchable` 和 `hitTestBehavior` 等属性来实现。这些属性允许开发者定义组件响应触摸事件的区域和行为。 ### 配置触摸热区属性 #### 1. `touchable` 属性 `touchable` 属性用于控制组件是否可以响应触摸事件。设置为 `true` 时，组件将可以响应触摸事件；设置为 `false` 时，组件将忽略所有触摸事件。 ```ts @Component struct MyComponent { build() { Column() { Text('Click Me') .fontSize(30) .touchable(true) } .width('100%') .height(100) } } ``` #### 2. `hitTestBehavior` 属性 `hitTestBehavior` 属性用于定义组件在命中测试（Hit Test）中的行为。它有以下几种取值： - `HitTestBehavior.self`: 组件仅在其自身的区域内响应触摸事件。 - `HitTestBehavior.none`: 组件不响应任何触摸事件。 - `HitTestBehavior.default`: 组件按照默认行为响应触摸事件。 ```ts @Component struct MyComponent { build() { Column() { Text('Click Me') .fontSize(30) .hitTestBehavior(HitTestBehavior.self) } .width('100%') .height(100) } } ``` #### 3. 自定义触摸热区 如果需要更复杂的触摸热区配置，可以通过自定义组件的 `onTouch` 事件来实现。通过监听触摸事件，开发者可以自定义组件的响应逻辑。 ```ts @Component struct MyComponent { @State message: string = 'Touch Me' build() { Column() { Text(this.message) .fontSize(30) .onTouch((event: TouchEvent) => { if (event.type === TouchType.Down) { this.message = 'Touched Down' } else if (event.type === TouchType.Up) { this.message = 'Touched Up' } }) } .width('100%') .height(100) } } ``` ### 注意事项 - **性能优化**：在设置触摸热区时，应避免不必要的复杂逻辑，以确保应用的响应速度和性能。 - **交互设计**：触摸热区的设计应符合用户习惯，避免过于敏感或响应区域过小的问题。 通过以上方法，开发者可以灵活地配置 ArkTS 组件的触摸热区属性，以满足不同的交互需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值