【背景知识】

• LazyForEach：根据提供的数据源按需迭代数据，并在每次迭代过程中创建相应的组件。当在滚动容器中使用了LazyForEach，框架会根据滚动容器可视区域按需创建组件，当组件滑出可视区域外时，框架会进行组件销毁回收以降低内存占用。
• [@Observed装饰器和@ObjectLink装饰器](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-observed-and-objectlink)：@ObjectLink和@Observed类装饰器用于在涉及嵌套对象或数组的场景中进行双向数据同步。
• 设置图片缓存：使用图像加载缓存库ImageKnife设置图片缓存，或者配置LazyForEach懒加载的缓存最大容量和数量。
• [@Reusable组件复用](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-reusable)：@Reusable表示组件可以被复用，结合LazyForEach懒加载一起使用，可以进一步解决列表滑动场景的瓶颈问题，提供滑动场景下高性能创建组件的方式来提升滑动帧率。

【解决方案】

• 场景一：使用错误键值触发组件重建（必要检查场景）
  • 原因： 若LazyForEach使用了错误的键值（键值重复、键值跟随UI变化），当键值变化时，ArkUI框架将视为该数组元素已被替换或修改，触发组件重建。
  • 典型场景： 交换列表项后，两个图片短暂消失并重新加载，出现闪烁。
  • 错误代码示例：

    LazyForEach(this.data, (item) => { ... }, (item) => "same key")  // key相同
    LazyForEach(this.data, (item) => { ... }, (item) => item.index)  // index在前置代码中进行了变化
    

  • 修改方式： 改用唯一标识符。为每个数据项定义唯一ID，作为keyGenerator的返回值，确保组件复用稳定性。
  • 核心代码：

    // 数据列表中有唯一主键id
    LazyForEach(this.data, (item) => { ... }, (item) => item.id)  // 以item.id为key
    

• 场景二：组件重建触发图片重载
  • 原因： 当数据源变更时，LazyForEach默认会销毁旧组件并重建新组件，导致图片重新加载。
  • 典型场景：
    • 增删改列表图文项，所有已有图片短暂消失再重新加载，出现闪烁；
    • 仅修改列表中图文项的文字信息，图片会出现闪烁。（直接更改列表项中的文本部分，并通过notifyDataChange或notifyDataReload进行通知，都仍然会造成同行图片闪烁问题，因为该方式会直接修改数据源，造成组件重新加载。）
    • 修改方式： 使用@Observed+@ObjectLink进行数据项的精准更新。
    • 核心代码： 对数据类添加@Observed装饰器，子组件通过@ObjectLink绑定需响应的属性，仅更新变化部分。下方代码在修改message时，仅会触发Text更新，Image将保持原组件状态。详细代码请见：重渲染时图片闪烁。
• 场景三：图片加载未缓存导致短暂空白
  • 原因： 图片加载需从资源或网络获取，若未启用缓存机制，重复加载会导致短暂空白或闪烁。
  • 典型场景： 列表实时加载网络图片，来回滚动列表时，图片出现闪烁。
  • 修改方式： 使用ImageKnife预加载图片时，这张图片会被缓存到内存当中，只要在它还没从内存中被清除之前，下次再加载这张图片都会直接从内存中读取，而不用重新从网络或硬盘上读取，大幅度提升图片的加载效率，确保图片展示时不会出现因加载导致的短暂空白。除此之外，若自动的内存缓存不能满足处理图片的需求，开发者还可以在RequestOption类中配置相应的参数，包括图片路径、图片大小、占位图及缓存策略等。
• 场景四：数据量大时内存占用过大，渲染卡顿
  • 原因： 数据量极大，滑出可视区的数据不断重建，造成渲染卡顿、滑动丢帧。
  • 典型场景： 长列表滚动卡顿，图片闪烁。
  • 修改方式： 启用组件复用与缓存，通过@Reusable装饰器标记可复用列表项组件，滑出可视区后存入复用池，减少重建开销，详细原理请见：组件复用；同时配置缓冲区，预加载可视区前后N个项，降低滑动时的白屏概率，详细原理请见：缓存列表项。
  • 核心代码：在缓存列表项的基础上增加组件复用。

【常见FAQ】 Q：@ObjectLink和@Observed修饰的数据更新后界面并未刷新。 A：请参考[@ObjectLink与@Observed的详细使用方法和限制条件](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-observed-and-objectlink)。

Q：列表滚动配合LazyForEach中如何使用组件复用？ A：请参考指南：列表滚动配合LazyForEach使用。

Q：在使用@Reusable降低渲染卡顿、滑动丢帧的问题时，随着数据的增加，内存也在一直增长，直到触发到回收。 A：可以通过提高组件的复用率，来降低内存的增速：使用aboutToRecycle回调实现节点的复用，或者设置freezeWhenInactive属性为true，启用自定义组件冻结功能。

Q：使用swiper和lazyForeach展示列表数据，当动态添加数据时item会闪烁，添加数据的代码如下：

export class  WaterfallFlowDataSource extends BasicDataSource {
  mediaArray:Array<MediaBean> = []
  ...
  public putArrayData(data:Array<MediaBean>){
    let length = data.length
    this.mediaArray = this.mediaArray.concat(data)
    this.notifyDatasetChange([
      {
        type:DataOperationType.ADD,index:length == 0?0:length - 1,count:data.length
      }
    ])
  }
}

A：notifyDatasetChange会直接修改数据源，造成组件重新加载，可以使用notifyDataAdd通知控制器数据增加。

export class  WaterfallFlowDataSource extends BasicDataSource {
  mediaArray:Array<MediaBean> = []
  ...
  public putArrayData(data:Array<MediaBean>){
    this.mediaArray = this.mediaArray.concat(data)
    this.notifyDataAdd(this.mediaArray.length - 1)
  }
}

Q：使用被@ObjectLink和@Observed修饰的数据发生变动时，图片刷新后仍然出现闪烁现象，其原因是什么？ A：@Observed类装饰器，需要放在class的定义前，使用new创建类对象，参考链接：[@Observed类装饰器](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-observed-and-objectlink)。不使用new创建类也会导致刷新时出现闪烁。

【总结】 LazyForEach触发图片闪烁的核心在于组件重建，通过精准更新数据源（@Observed/@ObjectLink）、启用缓存策略（图片与组件复用），可显著减少闪烁问题。对于复杂场景，建议结合@Reusable和cachedCount进一步优化性能。

以下是官方提供的解决方案：

1、长列表数据刷新闪烁

2、重渲染时图片闪烁