修复复用场景下图片闪动以及概率错位

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

entry/src/main/ets/pages/imageknifeTestCaseIndex.ets

@@ -113,7 +113,21 @@ struct IndexFunctionDemo {
 
         }.width('100%')
         .height(60).backgroundColor(Color.Pink)
+        Text("测试复用场景").fontSize(15)
+        Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+          Button("懒加载复用列表")
+            .onClick(() => {
+              console.log("测试一级内存缓存")
+              router.pushUrl({ url: "pages/testReusePhotoPage" });
+            }).margin({ top: 5, left: 3 })
+          Button("测试所有缓存信息输出")
+            .onClick(() => {
+              console.log("pages/testAllCacheInfoPage 页面跳转")
+              router.pushUrl({ url: "pages/testAllCacheInfoPage" });
+            }).margin({ top: 5, left: 3 })
 
+        }.width('100%')
+        .height(60).backgroundColor(Color.Pink)
         Text("测试占位图 失败占位图 功能点").fontSize(15)
         Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
           Button("测试失败占位图")

entry/src/main/ets/pages/testReusePhotoPage.ets

@@ -0,0 +1,203 @@
+/*
+ * 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, ImageKnifeOption, ScaleType } from '@ohos/libraryimageknife'
+
+class CommonDataSource <T> implements IDataSource {
+  private dataArray: T[] = []
+  private listeners: DataChangeListener[] = []
+
+  constructor(element: []) {
+    this.dataArray = element
+  }
+
+  public getData(index: number) {
+    return this.dataArray[index]
+  }
+
+  public totalCount(): number {
+    return this.dataArray.length
+  }
+
+  public addData(index: number, data: T[]): void {
+    this.dataArray = this.dataArray.concat(data)
+    this.notifyDataAdd(index)
+  }
+
+  unregisterDataChangeListener(listener: DataChangeListener): void {
+    const pos = this.listeners.indexOf(listener);
+    if (pos >= 0) {
+      this.listeners.splice(pos, 1);
+    }
+  }
+
+  registerDataChangeListener(listener: DataChangeListener): void {
+    if (this.listeners.indexOf(listener) < 0) {
+      this.listeners.push(listener)
+    }
+  }
+
+  notifyDataAdd(index: number): void {
+    this.listeners.forEach((listener: DataChangeListener) => {
+      listener.onDataAdd(index)
+    })
+  }
+}
+
+@Entry
+@Component
+struct TestReusePhotoPage {
+  @State hotCommendList: CommonDataSource<string> = new CommonDataSource<string>([])
+  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",
+    "https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB",
+    'https://img-blog.csdnimg.cn/20191215043500229.png',
+    'https://img-blog.csdn.net/20140514114029140',
+    'https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp'
+  ]
+
+  aboutToAppear() {
+    this.hotCommendList.addData(this.hotCommendList.totalCount(), this.data)
+    AppStorage.set("image_size",1)
+  }
+
+  build() {
+    Column() {
+      Button("up").onClick(()=>{
+        AppStorage.set("image_size",1.6)
+      })
+      Button("down").onClick(()=>{
+        AppStorage.set("image_size",0.9)
+      })
+      List() {
+        LazyForEach(this.hotCommendList, (item: string) => {
+          ListItem() {
+            ReuseComponent({ url: item }).width("100%").height("100%")
+          }.width(200).height(200).backgroundColor(Color.Orange)
+        })
+      }
+      .width("100%")
+      .height("100%")
+      .backgroundColor(0xFAEEE0)
+    }.width("100%").height("100%")
+  }
+}
+
+@Reusable
+@Component
+struct ReuseComponent {
+  @Prop url: string = ""
+  imgSize: number = 100
+  @StorageProp("image_size") @Watch("updateImageSize") image_size: number = 0
+  scaleAble: boolean = true
+  @State calcImgSize: number = 100
+  aboutToReuse(params: Record<string, string>) {
+    this.url = params.url
+  }
+  aboutToAppear(){
+    this.setImageSize()
+  }
+  updateImageSize() {
+    this.setImageSize()
+  }
+
+  setImageSize() {
+    if (!this.scaleAble) {
+      this.calcImgSize = this.imgSize
+    } else if (this.image_size < 0.9) {
+      this.calcImgSize = this.imgSize * 0.9
+    } else if (this.image_size > 1.6) {
+      this.calcImgSize = this.imgSize * 1.6
+    } else {
+      this.calcImgSize = this.imgSize * this.image_size
+    }
+  }
+
+  build() {
+    Column() {
+      ImageKnifeComponent({
+        imageKnifeOption:{
+          loadSrc: this.url,
+          mainScaleType: ScaleType.FIT_XY,
+          placeholderSrc: $r('app.media.icon_loading'),
+          placeholderScaleType: ScaleType.FIT_XY,
+          errorholderSrc: $r('app.media.icon_failed'),
+          errorholderSrcScaleType: ScaleType.FIT_XY
+        }
+      }).width(this.calcImgSize).height(this.calcImgSize)
+    }.width("100%").height("100%")
+  }
+}
+
+@Component
+struct PhotoComponent {
+  @Watch("updateTheUrl") @Prop url: string = ""
+  imgSize: number = 100
+  @State imageKnifeOption: ImageKnifeOption = new ImageKnifeOption()
+  @StorageProp("image_size") @Watch("updateImageSize") image_size: number = 0
+  scaleAble: boolean = true
+  @State calcImgSize: number = 100
+
+  updateImageSize() {
+    this.setImageSize()
+  }
+
+  setImageSize() {
+    if (!this.scaleAble) {
+      this.calcImgSize = this.imgSize
+    } else if (this.image_size < 0.9) {
+      this.calcImgSize = this.imgSize * 0.9
+    } else if (this.image_size > 1.6) {
+      this.calcImgSize = this.imgSize * 1.6
+    } else {
+      this.calcImgSize = this.imgSize * this.image_size
+    }
+  }
+
+  updateTheUrl() {
+    this.imageKnifeOption = {
+      loadSrc: this.url,
+      mainScaleType: ScaleType.FIT_XY,
+      placeholderSrc: $r('app.media.icon_loading'),
+      placeholderScaleType: ScaleType.FIT_XY,
+      errorholderSrc: $r('app.media.icon_failed'),
+      errorholderSrcScaleType: ScaleType.FIT_XY
+    }
+  }
+
+  build() {
+    Column() {
+      ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption })
+    }.width(this.calcImgSize).height(this.calcImgSize)
+  }
+}

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

@@ -43,6 +43,7 @@
     "pages/testImageKnifeHttpRequestHeader",
     "pages/testImageKnifeAutoPage",
     "pages/testImageKnifeAutoWidthPage",
-    "pages/testImageKnifeAutoHeightPage"
+    "pages/testImageKnifeAutoHeightPage",
+    "pages/testReusePhotoPage"
   ]
 }

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

@@ -103,6 +103,7 @@ export struct ImageKnifeComponent {
   private detachFromLayoutGIF :DetachFromLayout|undefined = undefined;
 
   private detachFromLayoutPixelMap :DetachFromLayout|undefined = undefined;
+  private lastSrc: string | Resource | PixelMap = ""
   listener: inspector.ComponentObserver = inspector.createComponentObserver(this.keyCanvas.keyId)
   private value: componentUtils.ComponentInfo = componentUtils.getRectangleById(this.keyCanvas.keyId)
 
@@ -159,6 +160,7 @@ export struct ImageKnifeComponent {
 
   watchImageKnifeOption() {
     LogUtil.log('ImageKnifeComponent watchImageKnifeOption is happened!')
+    this.lastSrc = this.imageKnifeOption.loadSrc
     this.whetherWaitSize();
   }
 
@@ -209,7 +211,10 @@ export struct ImageKnifeComponent {
         } else {
           this.isGif = false
         }
-        this.runNextFunction(this.displayMainSource,data);
+        if(this.lastSrc !== request.loadSrc && this.lastSrc !== ""){}
+        else {
+          this.runNextFunction(this.displayMainSource,data);
+        }
         return false;
       }
       })