修复头像超过设备高度图片闪动问题-消息列表底部头像闪动问题

Signed-off-by: zgf <zenggaofeng2@h-partners.com>

CHANGELOG.md

@@ -2,6 +2,7 @@
 - 修复成功回调获取不到宽高
 - 新增svg图片解码
 - 新增媒体图片file://格式
+- 修复头像超过设备高度图片闪动问题-消息列表底部头像闪动问题
 
 ## 3.0.0-rc.6
 - 支持多种组合变换

README.md

@@ -242,7 +242,16 @@ ImageKnifeComponent({ ImageKnifeOption:
   }
 }).width(100).height(100)
 ```
-
+#### 9.ImageKnifeComponent - syncLoad 的使用
+修复在消息列表场景，新增消息时头像出现闪动
+```
+ImageKnifeComponent({
+        imageKnifeOption:{
+          loadSrc:$r("app.media.pngSample"),
+          placeholderSrc:$r("app.media.loading")
+        },syncLoad:true
+      })
+```
 ## 接口说明
 
 ### ImageKnifeOption参数列表

entry/src/main/ets/pages/TestImageFlash.ets

@@ -60,20 +60,23 @@ export struct MsgItem {
     if (this.count % 2 == 0 && this.count <6){
       ImageKnifeComponent({
         imageKnifeOption:{
-          loadSrc:$r("app.media.startIcon")
+          loadSrc:$r("app.media.startIcon"),
-        }
+          placeholderSrc:$r("app.media.loading")
+        },syncLoad:true
       })
     }else if (this.count > 6 && this.count - 6 < this.data.length){
       ImageKnifeComponent({
         imageKnifeOption:{
           loadSrc:this.data[this.count - 6],
-        }
+          placeholderSrc:$r("app.media.loading")
+        },syncLoad:true
       })
     }else {
       ImageKnifeComponent({
         imageKnifeOption:{
-          loadSrc:$r("app.media.loading")
+          loadSrc:$r("app.media.pngSample"),
-        }
+          placeholderSrc:$r("app.media.loading")
+        },syncLoad:true
       })
     }
   }

library/src/main/ets/components/ImageKnifeComponent.ets

@@ -17,12 +17,15 @@ import { ImageKnifeRequest, ImageKnifeRequestState } from '../ImageKnifeRequest'
 import common from '@ohos.app.ability.common';
 import { ImageKnife } from '../ImageKnife';
 import { LogUtil } from '../utils/LogUtil';
-import { ImageKnifeRequestSource } from '../model/ImageKnifeData';
+import { ImageKnifeData, ImageKnifeRequestSource } from '../model/ImageKnifeData';
+import { IEngineKey } from '../key/IEngineKey';
+import { DefaultEngineKey } from '../key/DefaultEngineKey';
 
 @Component
 export struct ImageKnifeComponent {
   @Watch('watchImageKnifeOption') @ObjectLink imageKnifeOption: ImageKnifeOption;
   @State pixelMap: PixelMap | string | undefined = undefined
+  @State syncLoad: boolean = false
   @State adaptiveWidth: Length = '100%'
   @State adaptiveHeight: Length = '100%'
   @State objectFit: ImageFit = ImageFit.Contain
@@ -36,14 +39,24 @@ export struct ImageKnifeComponent {
 
   aboutToAppear(): void {
     //闪动问题失效，注释相应代码后续修复
-    // let memoryCache: ImageKnifeData | undefined = ImageKnife.getInstance()
+    if(this.syncLoad) {
-    //   .loadFromMemoryCache(Tools.generateMemoryKey(this.ImageKnifeOption.loadSrc))
+      let engineKey: IEngineKey = new DefaultEngineKey();
-    // if (memoryCache !== undefined){
+      let memoryCacheSrc: ImageKnifeData | undefined = ImageKnife.getInstance()
-    //   LogUtil.log("aboutToAppear load from memory cache for key = "+ Tools.generateMemoryKey(this.ImageKnifeOption.loadSrc))
+        .loadFromMemoryCache(engineKey.generateMemoryKey(this.imageKnifeOption.loadSrc,ImageKnifeRequestSource.SRC,this.imageKnifeOption))
-    //   //画主图
+      if (memoryCacheSrc !== undefined){
-    //   this.pixelMap = memoryCache.source;
+        LogUtil.log("aboutToAppear load from memory cache for key = "+ engineKey.generateMemoryKey(this.imageKnifeOption.loadSrc,ImageKnifeRequestSource.SRC,this.imageKnifeOption))
-    // }else {
+        //画主图
-    // }
+        this.pixelMap = memoryCacheSrc.source;
+      }else {
+        let memoryCachePlace: ImageKnifeData | undefined = ImageKnife.getInstance()
+          .loadFromMemoryCache(engineKey.generateMemoryKey(this.imageKnifeOption.placeholderSrc!,ImageKnifeRequestSource.PLACE_HOLDER,this.imageKnifeOption))
+        if (memoryCachePlace !== undefined){
+          LogUtil.log("aboutToAppear load from memory cache for key = "+ engineKey.generateMemoryKey(this.imageKnifeOption.loadSrc,ImageKnifeRequestSource.SRC,this.imageKnifeOption))
+          //画主图
+          this.pixelMap = memoryCachePlace.source;
+        }
+      }
+    }
     this.objectFit = this.imageKnifeOption.objectFit === undefined ? ImageFit.Contain : this.imageKnifeOption.objectFit
   }
 
@@ -68,6 +81,7 @@ export struct ImageKnifeComponent {
       .width(this.adaptiveWidth)
       .height(this.adaptiveHeight)
       .border(this.imageKnifeOption.border)
+      .syncLoad(this.syncLoad)
       .onSizeChange((oldValue:SizeOptions, newValue:SizeOptions) => {
         this.currentWidth = newValue.width as number
         this.currentHeight = newValue.height as number