HarmonyOS ForEach加载多张图片，删除图片某张图片其他image会闪一下？

Question

场景是使用ForEach加载多张图片，如果删除某一张图片，其他Image组件会闪烁一下才能加载出来。代码如下：

ForEach(this.selectedAssetModels, (assetModel: AssetModel, index: number) => {
  ListItem() {
    RotatableStack({
      alignContent: Alignment.TopEnd
    }) {
      Image(assetModel.uri)
        .width(56)
        .height(56)
        .borderRadius(4)
        .autoResize(true)//降低内存
        .interpolation(ImageInterpolation.Low)
        .onClick(() => {
          this.cameraStack.pushPathByName(routeNames.PICTURE_PREVIEW, index)
        })

      Stack() {
        Image($r('app.media.ic_white_cross'))
          .width(8)
          .height(8)
      }
      .width(16)
      .height(16)
      .backgroundColor('#B2191A1D')
      .borderRadius({ bottomLeft: 7, topRight: 4 })
      .onClick(() => {
        this.selectedAssetModels = this.selectedAssetModels.filter(it => it != assetModel)
      })
    }
  }
})

Answer 1

根据描述来看， 删除某张图片，其他Image组件会闪烁，是由于删除图片时，页面需要重新渲染，图片也需要做解码加载的步骤，导致图片当时没有渲染出来才会进行闪烁。可以尝试给image组件设置缓存，来避免此问题，文档请参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-system-app-V5\#setimagecachecount7

onPageShow() {
  // 设置解码前图片数据内存缓存上限为100MB (100MB=100*1024*1024B=104857600B)
  app.setImageRawDataCacheSize(104857600)

  //设置内存中缓存解码后图片的数量上限
  app.setImageCacheCount(100);
}

autoRize主要是设置图片解码过程中是否对图源自动缩放，主要用于减少内存占用，仍需要图片解码这一步骤。由于删除图片页面需要重新渲染，从而需要重新进行图片解码加载，而图片闪烁也是因为解码加载过程中图片未渲染。可以使用设置缓存的方式来解决此问题