修复发送消息时最近的两条消息头像闪动的问题

Signed-off-by: 张欢 <zhanghuan165@h-partners.com>

CHANGELOG.md

@@ -8,6 +8,7 @@
 - 支持option自定义实现图片获取/网络下载
 - 继承Image的能力，支持option传入border，设置边框，圆角
 - 继承Image的能力，支持option传入objectFit设置图片缩放
+- 修复发送消息时最近的两条消息头像闪动的问题
    
 缺失特性
 - 不支持drawLifeCycle接口，通过canvas自会图片

entry/src/main/ets/pages/Index.ets

@@ -56,6 +56,12 @@ struct Index {
 
         });
       })
+      Button("消息+List").margin({top:10}).onClick(()=>{
+        router.push({
+          uri: 'pages/TestImageFlash',
+
+        });
+      })
 
 
     }

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

@@ -0,0 +1,134 @@
+/*
+ * Copyright (C) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the 'License');
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { ImageKnifeComponent } from '@ohos/imageknife/src/main/ets/components/ImageKnifeComponent'
+
+@Observed
+export class MsgModel {
+  id: string
+  cId: string
+  body: string
+  status: number
+
+  constructor(id: string, body: string, cId?: string) {
+    this.id = id
+    this.body = body
+    this.status = -1
+    this.cId = cId || ''
+  }
+}
+
+
+@Reusable
+@Component
+export struct MsgItem {
+  count: number = 0
+  private data: Array<string> = [
+    "http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg",
+    "http://c.hiphotos.baidu.com/image/pic/item/30adcbef76094b36de8a2fe5a1cc7cd98d109d99.jpg",
+    "http://h.hiphotos.baidu.com/image/pic/item/7c1ed21b0ef41bd5f2c2a9e953da81cb39db3d1d.jpg",
+    "http://g.hiphotos.baidu.com/image/pic/item/55e736d12f2eb938d5277fd5d0628535e5dd6f4a.jpg",
+    "http://e.hiphotos.baidu.com/image/pic/item/4e4a20a4462309f7e41f5cfe760e0cf3d6cad6ee.jpg",
+    "http://b.hiphotos.baidu.com/image/pic/item/9d82d158ccbf6c81b94575cfb93eb13533fa40a2.jpg",
+    "http://e.hiphotos.baidu.com/image/pic/item/4bed2e738bd4b31c1badd5a685d6277f9e2ff81e.jpg",
+    "http://g.hiphotos.baidu.com/image/pic/item/0d338744ebf81a4c87a3add4d52a6059252da61e.jpg",
+    "http://a.hiphotos.baidu.com/image/pic/item/f2deb48f8c5494ee5080c8142ff5e0fe99257e19.jpg",
+    "http://f.hiphotos.baidu.com/image/pic/item/4034970a304e251f503521f5a586c9177e3e53f9.jpg",
+    "http://b.hiphotos.baidu.com/image/pic/item/279759ee3d6d55fbb3586c0168224f4a20a4dd7e.jpg",
+    "http://img2.xkhouse.com/bbs/hfhouse/data/attachment/forum/corebbs/2009-11/2009113011534566298.jpg",
+    "http://a.hiphotos.baidu.com/image/pic/item/e824b899a9014c087eb617650e7b02087af4f464.jpg",
+    "http://c.hiphotos.baidu.com/image/pic/item/9c16fdfaaf51f3de1e296fa390eef01f3b29795a.jpg",
+    "http://d.hiphotos.baidu.com/image/pic/item/b58f8c5494eef01f119945cbe2fe9925bc317d2a.jpg",
+    "http://h.hiphotos.baidu.com/image/pic/item/902397dda144ad340668b847d4a20cf430ad851e.jpg",
+    "http://b.hiphotos.baidu.com/image/pic/item/359b033b5bb5c9ea5c0e3c23d139b6003bf3b374.jpg",
+    "http://a.hiphotos.baidu.com/image/pic/item/8d5494eef01f3a292d2472199d25bc315d607c7c.jpg",
+    "http://b.hiphotos.baidu.com/image/pic/item/e824b899a9014c08878b2c4c0e7b02087af4f4a3.jpg",
+    "http://g.hiphotos.baidu.com/image/pic/item/6d81800a19d8bc3e770bd00d868ba61ea9d345f2.jpg",
+  ]
+  build(){
+    if (this.count % 2 == 0 && this.count <6){
+      ImageKnifeComponent({
+        ImageKnifeOption:{
+          loadSrc:$r("app.media.startIcon")
+        }
+      })
+    }else if (this.count > 6 && this.count - 6 < this.data.length){
+      ImageKnifeComponent({
+        ImageKnifeOption:{
+          loadSrc:this.data[this.count - 6],
+        }
+      })
+    }else {
+      ImageKnifeComponent({
+        ImageKnifeOption:{
+          loadSrc:$r("app.media.loading")
+        }
+      })
+    }
+  }
+}
+
+@Entry
+@Component
+struct ImageTestPage {
+  count : number = 0
+  rCount: number = 0
+  scroller: Scroller = new Scroller()
+  @State list: MsgModel[] = []
+  @State imageSize: number =100
+  handAdd(){
+    this.count++
+    const msgItem = new MsgModel('add_id'+this.count, 'addBody'+this.count,'cId'+ this.count)
+    this.list.push(msgItem)
+    setTimeout(()=> {
+      msgItem.status = 1
+    },3000)
+    this.scroller.scrollEdge(Edge.Bottom)
+  }
+
+  build(){
+    Column(){
+      Row(){
+        Button("addItem").onClick(()=> {
+          this.handAdd()
+        })
+        Button("remove").onClick(()=> {
+          this.list.splice(0,1)
+        })
+      }
+      Row(){
+        Text("点击尺寸加50")
+          .onClick(()=> {
+            this.imageSize = this.imageSize + 50
+          })
+          .width('50%').backgroundColor(0x88ff0000).textAlign(TextAlign.Center).height(50)
+        Text("点击尺寸减50")
+          .onClick(()=> {
+            this.imageSize = Math.max(this.imageSize - 50, 0)
+          })
+          .width('50%').backgroundColor(0x88ff0000).textAlign(TextAlign.Center).height(50)
+      }.height(50).width('100%')
+
+      List({space: 20, scroller: this.scroller }) {
+        ForEach(this.list, (item: MsgModel)=> {
+          ListItem(){
+            MsgItem({count : this.count}).width(this.imageSize).height(this.imageSize);
+          }
+        },(item:MsgModel)=> item.id)
+      }.width('100%').height('auto').layoutWeight(1)
+    }
+    .width('100%')
+    .height('100%')
+  }
+}

entry/src/main/resources/base/profile/main_pages.json

@@ -6,6 +6,7 @@
     "pages/ManyPhotoShowPage",
     "pages/LongImagePage",
     "pages/TransformPage",
-    "pages/UserPage"
+    "pages/UserPage",
+    "pages/TestImageFlash"
   ]
 }

library/src/main/ets/ImageKnifeDispatcher.ets

@@ -31,6 +31,7 @@ import { Constants } from './utils/Constants';
 import taskpool from '@ohos.taskpool';
 import { FileTypeUtil } from './utils/FileTypeUtil';
 import util from '@ohos.util';
+import { Tools } from './utils/Tools';
 
 export class ImageKnifeDispatcher {
   // 最大并发
@@ -71,7 +72,7 @@ export class ImageKnifeDispatcher {
    * 获取和显示图片
    */
   getAndShowImage(currentRequest: ImageKnifeRequest, imageSrc: string | PixelMap | Resource, requestSource: ImageKnifeRequestSource): void {
-    let key: string = currentRequest.generateKey(imageSrc)
+    let key: string = Tools.generateKey(imageSrc)
     let requestList: List<ImageKnifeRequestWithSource> | undefined = this.executingJobMap.get(key)
     if (requestList == undefined) {
       requestList = new List()

library/src/main/ets/ImageKnifeRequest.ets

@@ -19,6 +19,7 @@ import common from '@ohos.app.ability.common';
 import { SparkMD5 } from './3rd_party/sparkmd5/spark-md5'
 import { LogUtil } from './utils/LogUtil'
 import { ImageKnifeRequestSource } from './ImageKnifeDispatcher';
+import { Tools } from './utils/Tools';
 
 
 export class ImageKnifeRequest {
@@ -46,7 +47,7 @@ export class ImageKnifeRequest {
 
   showFromMemomry(imageSrc: string | PixelMap | Resource, requestSource: ImageKnifeRequestSource): boolean {
     let memoryCache: ImageKnifeData | undefined = ImageKnife.getInstance()
-      .loadFromMemoryCache(this.generateKey(imageSrc))
+      .loadFromMemoryCache(Tools.generateKey(this.ImageKnifeOption.loadSrc))
     if (memoryCache !== undefined) {
       // 画主图
       if (this.requestState === ImageKnifeRequestState.PROGRESS) {

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

@@ -20,6 +20,8 @@ import { LogUtil } from '../utils/LogUtil';
 import componentUtils from '@ohos.arkui.componentUtils'
 import util from '@ohos.util'
 import inspector from '@ohos.arkui.inspector'
+import { Tools } from '../utils/Tools';
+import { ImageKnifeData } from '../model/ImageKnifeData'
 
 @Component
 export struct ImageKnifeComponent {
@@ -40,7 +42,17 @@ export struct ImageKnifeComponent {
   private listener: inspector.ComponentObserver = inspector.createComponentObserver(this.keyCanvas.keyId)
 
   aboutToAppear(): void {
-    this.listener.on("layout", this.onLayoutComplete)
+    let memoryCache: ImageKnifeData | undefined = ImageKnife.getInstance()
+      .loadFromMemoryCache(Tools.generateKey(this.ImageKnifeOption.loadSrc))
+    if (memoryCache !== undefined){
+      LogUtil.log("aboutToAppear load from memory cache for key = "+ Tools.generateKey(this.ImageKnifeOption.loadSrc))
+      //画主图
+      this.pixelMap = memoryCache.source;
+    }else {
+      LogUtil.log("aboutToAppear onLayoutComplete")
+      this.listener.on("layout", this.onLayoutComplete)
+    }
+
   }
 
   aboutToDisappear(): void {

library/src/main/ets/utils/Tools.ets

@@ -0,0 +1,23 @@
+/*
+ * Copyright (C) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the 'License');
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { SparkMD5 } from '../3rd_party/sparkmd5/spark-md5'
+
+export class Tools {
+
+  // 生成唯一的key
+  public  static generateKey(key: string | PixelMap | Resource): string{
+    return SparkMD5.hashBinary(JSON.stringify(key)) as string
+  }
+}