鸿蒙列表循环渲染需按数据量选择ForEach、LazyForEach或Repeat:ForEach适用于200条),要求ObservableArray数据源且禁嵌套;Repeat为5.0新方案,性能更优,仅支持特定容器并需.each()或.template()。

在鸿蒙应用开发中实现列表循环渲染,核心是让数据数组自动映射为多个相同结构的UI组件,避免手动重复写ListItem。这一步直接决定长列表是否卡顿、内存是否暴涨、滚动是否流畅。
用ForEach渲染基础列表
ForEach是最基础的循环渲染方式,适用于中短列表(数据量<100条)或静态展示场景。
第一步:在List容器内声明ForEach,传入数据数组和生成函数;
第二步:ForEach的第三个参数必须提供keyGenerator——【不传或传错会导致列表项错位、状态丢失】;
第三步:每个ListItem内只能有一个根组件,比如Text、Column或自定义组件;
第四步:键值严禁使用index,应优先用数据唯一字段(如user.id),否则数组增删时UI会复用错误节点。
用LazyForEach优化长列表
当列表项超过200条,且用户会频繁滚动时,LazyForEach能显著降低首屏加载时间和内存占用。
方法一:替换ForEach为LazyForEach,其余结构保持一致;
方法二:确保数据源为ObservableArray或@Observed类实例,否则滚动时无法触发局部更新;
注意:LazyForEach不支持嵌套ForEach,也不支持在子组件内再用@Builder生成动态结构——【否则会绕过懒加载机制,退化为全量渲染】。
用Repeat替代旧方案
Repeat是HarmonyOS 5.0起主推的新一代循环渲染组件,性能优于LazyForEach,写法更简洁,适合新项目首选。
① Repeat只能配合List/Grid/Swiper/WaterFlow使用,不能单独存在;
② 必须用.each()定义子组件,且子组件类型必须匹配父容器要求——例如List下只能用ListItem;
③ 不支持V1装饰器,混用@Entry/@Component等旧式装饰器会导致编译失败或白屏;
④ 页面首次渲染时,Repeat只创建可视区域+预加载区内的组件,滑动过程中动态销毁不可见节点并复用已创建节点;
⑤ 若需多类型Item(如标题+内容+广告混合),必须改用.template()而非.each(),并自行处理type判断逻辑。

















