HarmonyOS 鸿蒙Next 如何解决LazyForEach数据源变更后界面闪烁的问题 鸿蒙场景化案例

HarmonyOS 鸿蒙Next 如何解决LazyForEach数据源变更后界面闪烁的问题 鸿蒙场景化案例

【问题现象】

在使用LazyForEach时，当点击按钮触发数据源List变更时，页面中的图片会闪烁。

【定位思路】

（1）ForEach中使用了index作为key，如果List中的元素索引发生变化，那么这些索引会导致子组件被重新创建，这可能会引起页面闪烁。

（2）数据变更每次都是clear后并重新添加数据，数据源引用改变也会引起子组件重建，从而导致页面闪烁。

（3）图片组件未使用缓存，每次加载时都会重新加载图片，导致性能降低和UI闪烁。

【解决方案】

方案一：去除ForEach中的index参数

修改ForEach结构，去除index参数，仅根据item本身进行遍历和渲染，避免因索引变化导致的子组件重建。

代码示例如下：

ForEach(this.arr, (item: number) => {
     ListItem() {
         this.buildItem(item)
     }
 }, (item: number) => item.toString())
 

注意：ForEach使用的时候第三个参数Key要保证唯一，否则可能导致组件反复重建的问题。

方案二：精细化修改数据源

避免每次都clear并重新添加数据，只对现有数据源进行增量更新，保持数据源引用不变。

代码示例如下：

let data = this.arr[4];
this.arr.splice(4, 1);
this.arr.splice(3, 0, data);

一般建议去除index参数与精细化修改数据源组合使用，最大程度减少了UI不必要的重绘，提高了性能，减少了图片闪烁和UI刷新问题。

方案三：image组件设置缓存

如果无法精细化修改数据，考虑使用缓存方案，确保图片加载更高效。

代码示例如下：

aboutToAppear(): void {
    app.setImageRawDataCacheSize(1024*1024*100);//缓存 解码前数据上限，单位为字节;约等于9.53M
    app.setImageCacheCount(100);//设置内存中缓存解码后图片的数量上限
  }

详情请见参考文档。

【总结】

对于LazyForEach数据源动态变更触发子组件重建，进而引发包含图片的子组件出现闪烁问题。

（1）尝试避免子组件重建问题，一般的解决方式是去除ForEach中的index参数以及精细化修改数据源。

（2）如果无法精细化修改数据，子组件重建问题依然存在的情况下。考虑使用缓存方案，提高图片加载效率。