鸿蒙HarmonyOS实战：循环渲染-Repeat组件

 Repeat组件不开启virtualScroll开关时，Repeat基于数组类型数据来进行循环渲染，需要与容器组件配合使用，且接口返回的组件应当是允许包含在Repeat父容器组件中的子组件。Repeat循环渲染和ForEach相比有两个区别，一是优化了部分更新场景下的渲染性能，二是组件生成函数的索引index由框架侧来维护。

Repeat组件开启virtualScroll开关时，Repeat将从提供的数据源中按需迭代数据，并在每次迭代过程中创建相应的组件。当在滚动容器中使用了Repeat，框架会根据滚动容器可视区域按需创建组件，当组件滑出可视区域外时，框架会缓存组件，并在下一次迭代中使用。

说明

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

当前状态管理（V2试用版）仍在逐步开发中，相关功能尚未成熟，建议开发者尝鲜试用。

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

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

参数：

参数名	类型	必填	说明
arr	Array<T>	是	数据源，为Array<T>类型的数组，由开发者决定数据类型。

返回值：

类型	说明
RepeatAttribute<T>	Repeat组件属性

RepeatAttribute

each

each(itemGenerator: (repeatItem: RepeatItem<T>) => void): RepeatAttribute<T>

组件生成函数。template和templateId匹配不上的数据项走默认生成函数each。

说明：

• each属性必须有，否则运行时会报错。
• itemGenerator的参数为RepeatItem，该参数将item和index结合到了一起，请勿将RepeatItem参数拆开使用。

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

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

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

参数：

参数名	类型	必填	说明
repeatItem	RepeatItem<T>	是	repeat数据项

key

key(keyGenerator: (item: T, index: number) => string): RepeatAttribute<T>

键值生成函数。

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

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

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

参数：

参数名	类型	必填	说明
item	T	是	arr数组中的数据项
index	number	是	arr数组中的数据项索引

virtualScroll

virtualScroll(virtualScrollOptions?: VirtualScrollOptions): RepeatAttribute<T>

Repeat开启虚拟滚动。

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

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

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

参数：

参数名	类型	必填	说明
virtualScrollOptions	VirtualScrollOptions	否	虚拟滚动配置项

template

template(type: string, itemBuilder: RepeatItemBuilder<T>, templateOptions?: TemplateOptions): RepeatAttribute<T>

复用模板。

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

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

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

参数：

参数名	类型	必填	说明
type	string	是	当前模板类型
itemBuilder	RepeatItemBuilder<T>	是	组件生成函数
templateOptions	TemplateOptions	否	当前模板配置项

templateId

templateId(typedFunc: TemplateTypedFunc<T>): RepeatAttribute<T>

为当前数据项分配templateId。

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

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

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

参数：

参数名	类型	必填	说明
typedFunc	TemplateTypedFunc<T>	是	生成当前数据项对应的templateId

RepeatItem

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

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

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

参数：

参数名	类型	必填	说明
item	T	是	arr中每一个数据项。T为开发者传入的数据类型。
index	number	是	当前数据项对应的索引。

VirtualScrollOptions

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

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

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

参数：

参数名	类型	必填	说明
totalCount	number	否	数据源的总长度，可以大于已加载数据项的数量 令arr.length表示数据源长度，以下为totalCount的判断规则： 1) totalCount不设置 || totalCount不是整数 || totalCount <= 0 || totalCount == arr.length时，totalCount为数据源长度，列表正常滚动 2) 0 < totalCount < arr.length时，界面中只渲染“totalCount”个数据 3) totalCount > arr.length时，滚动条样式正常，无数据项的位置显示空白，当滚动动画停止时，滚动条停留在最后一个数据项的位置。这样用户可以不同步请求所有数据，也能实现正确的滚动条样式。

注意

RepeatItemBuilder

type RepeatItemBuilder<T> = (repeatItem: RepeatItem<T>) => void

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

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

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

参数：

参数名	类型	必填	说明
repeatItem	RepeatItem<T>	是	将item和index结合到一起的一个状态变量。

TemplateOptions

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

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

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

参数：

参数名	类型	必填	说明
cachedCount	number	否	当前模板在Repeat的缓存池中可缓存子节点的最大数量，仅在开启virtualScroll后生效。 将cachedCount设置为当前模板的节点在屏上可能出现的最大数量时，Repeat可以做到尽可能多的复用。但后果是当屏上没有当前模板的节点时，缓存池也不会释放，应用内存会增大。需要开发者依据具体情况自行把控。 如果开发者未指定cachedCount，框架会分别对不同template，根据屏幕上的可见+预渲染的节点个数来计算cachedCount。当屏幕上的可见+预渲染的节点个数变多时，cachedCount也会对应增长。需要注意cachedCount数量不会减少。 如果开发者要显式指定cachedCount，推荐设置成和屏幕上节点个数一致。需要注意，不推荐设置cachedCount小于2，因为这会导致在快速滑动场景下创建新的节点，从而导致性能劣化。

TemplateTypedFunc

type TemplateTypedFunc<T> = (item : T, index : number) => string

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

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

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

参数：

参数名	类型	必填	说明
item	T	是	arr中每一个数据项。T为开发者传入的数据类型。
index	number	是	当前数据项对应的索引。

最后

小编在之前的鸿蒙系统扫盲中，有很多朋友给我留言，不同的角度的问了一些问题，我明显感觉到一点，那就是许多人参与鸿蒙开发，但是又不知道从哪里下手，因为资料太多，太杂，教授的人也多，无从选择。有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。 

为了确保高效学习，建议规划清晰的学习路线，涵盖以下关键阶段：

 →【纯血版鸿蒙全套最新学习资料】希望这一份鸿蒙学习资料能够给大家带来帮助~

---

 鸿蒙（HarmonyOS NEXT）最新学习路线

​

该路线图包含基础技能、就业必备技能、多媒体技术、六大电商APP、进阶高级技能、实战就业级设备开发，不仅补充了华为官网未涉及的解决方案

路线图适合人群：

IT开发人员：想要拓展职业边界
零基础小白：鸿蒙爱好者，希望从0到1学习，增加一项技能。
技术提升/进阶跳槽：发展瓶颈期，提升职场竞争力，快速掌握鸿蒙技术

2.视频学习资料+学习PDF文档

HarmonyOS Next 最新全套视频教程 （鸿蒙语法ArkTS、TypeScript、ArkUI教程……）

​​

 纯血版鸿蒙全套学习资料（面试、文档、全套视频等）

                   

​​​​鸿蒙APP开发必备

​​

总结

总的来说，华为鸿蒙不再兼容安卓，对程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，才能在这个变革的时代中立于不败之地。