适配复用场景触发懒加载onDataReloaded

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

CHANGELOG.md

@@ -2,6 +2,7 @@
 - 修改ImageKnife跳过网络,点击默认,图片没有传入宽高,无显示bug
 - ImageKnife支持根据自定义key获取已缓存的图片
 - ImageKnife加载图片支持自定义网络栈和图片加载组件
+- 适配复用场景触发懒加载onDataReloaded
 
 ## 2.2.0-rc.0
 - 修复自定义DataFetch接口实现不生效问题

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

@@ -127,6 +127,11 @@ struct IndexFunctionDemo {
               console.log("测试一级内存缓存")
               router.pushUrl({ url: "pages/testReusePhotoPage" });
             }).margin({ top: 5, left: 3 })
+          Button("适配复用场景")
+            .onClick(() => {
+              console.log("测试一级内存缓存")
+              router.pushUrl({ url: "pages/testReuseAblePages" });
+            }).margin({ top: 5, left: 3 })
         }.width('100%')
         .height(60).backgroundColor(Color.Pink)
         Text("测试占位图 失败占位图 功能点").fontSize(15)

entry/src/main/ets/pages/testReuseAblePages.ets

@@ -0,0 +1,204 @@
+/*
+ * 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/libraryimageknife'
+
+class BasicDataSource implements IDataSource {
+  private listeners: DataChangeListener[] = [];
+  private originDataArray: StringData[] = [];
+
+  public totalCount(): number {
+    return 0;
+  }
+
+  public getData(index: number): StringData {
+    return this.originDataArray[index];
+  }
+
+  registerDataChangeListener(listener: DataChangeListener): void {
+    if (this.listeners.indexOf(listener) < 0) {
+      console.info('add listener');
+      this.listeners.push(listener);
+    }
+  }
+
+  unregisterDataChangeListener(listener: DataChangeListener): void {
+    const pos = this.listeners.indexOf(listener);
+    if (pos >= 0) {
+      console.info('remove listener');
+      this.listeners.splice(pos, 1);
+    }
+  }
+
+  notifyDataReload(): void {
+    this.listeners.forEach(listener => {
+      listener.onDataReloaded();
+    })
+  }
+
+  notifyDataAdd(index: number): void {
+    this.listeners.forEach(listener => {
+      listener.onDataAdd(index);
+    })
+  }
+
+  notifyDataChange(index: number): void {
+    this.listeners.forEach(listener => {
+      listener.onDataChange(index);
+    })
+  }
+
+  notifyDataDelete(index: number): void {
+    this.listeners.forEach(listener => {
+      listener.onDataDelete(index);
+    })
+  }
+
+  notifyDataMove(from: number, to: number): void {
+    this.listeners.forEach(listener => {
+      listener.onDataMove(from, to);
+    })
+  }
+}
+
+class MyDataSource extends BasicDataSource {
+  private dataArray: StringData[] = [];
+
+  public totalCount(): number {
+    return this.dataArray.length;
+  }
+
+  public getData(index: number): StringData {
+    return this.dataArray[index];
+  }
+
+  public addData(index: number, data: StringData): void {
+    this.dataArray.splice(index, 0, data);
+    this.notifyDataAdd(index);
+  }
+
+  public pushData(data: StringData): void {
+    this.dataArray.push(data);
+    this.notifyDataAdd(this.dataArray.length - 1);
+  }
+
+  public reloadData(): void {
+    this.notifyDataReload();
+  }
+}
+
+class StringData {
+  message: string;
+  imgSrc: string;
+
+  constructor(message: string, imgSrc: string) {
+    this.message = message;
+    this.imgSrc = imgSrc;
+  }
+}
+
+@Entry
+@Component
+struct TestReuseAbleComponent {
+  @State dataArray: 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'
+  ]
+  private data: MyDataSource = new MyDataSource();
+  private index: number = 0
+  private timeId: number = -1
+
+  aboutToAppear() {
+    for (let i = 0; i <= 4; i++) {
+      this.data.pushData(new StringData(`Hello ${i}`, this.dataArray[i]));
+    }
+  }
+
+  build() {
+    List({ space: 3 }) {
+      LazyForEach(this.data, (item: StringData, index: number) => {
+        ListItem() {
+          Column() {
+            Text(item.message).fontSize(50)
+              .onAppear(() => {
+                console.info("appear:" + item.message)
+              })
+            ReusableComponent({ url: item.imgSrc })
+              .width(500)
+              .height(200)
+          }.margin({ left: 10, right: 10 })
+        }
+        .onClick(() => {
+          item.message += '00';
+          this.data.reloadData();
+        })
+      }, (item: StringData, index: number) => JSON.stringify(item))
+    }.cachedCount(5)
+    .onReachEnd(()=>{
+      clearTimeout(this.timeId)
+      this.timeId = setTimeout(()=>{
+        this.data.reloadData()
+        if(this.data.totalCount() <= this.dataArray.length) {
+          this.index = this.data.totalCount()
+          for (let index = this.index; index <= this.index + 4; index++) {
+            this.data.addData(index,new StringData(`Hello ${index}`, this.dataArray[index]));
+          }
+        }
+      },1500)
+    })
+  }
+}
+
+@Reusable
+@Component
+struct ReusableComponent {
+  @State url: string = ""
+
+  aboutToReuse(params: Record<string, string>) {
+    this.url = params.url
+  }
+
+  build() {
+    Column() {
+      ImageKnifeComponent({
+        imageKnifeOption: {
+          loadSrc: this.url,
+          placeholderSrc: $r('app.media.icon_loading')
+        }
+      })
+    }.width("100%").height("100%")
+  }
+}

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

@@ -55,6 +55,7 @@
     "pages/testImageKnifeDataFetch",
     "pages/testImageKnifeHeic",
     "pages/testImageKnifeNetPlaceholder",
-    "pages/testCustomDataFetchClientWithPage"
+    "pages/testCustomDataFetchClientWithPage",
+    "pages/testReuseAblePages"
   ]
 }

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

@@ -724,6 +724,9 @@ export struct ImageKnifeComponent {
   aboutToRecycle(){
     this.resetGifData()
   }
+  aboutToReuse(params: ESObject) {
+    this.context.clearRect(0,0,this.context.width,this.context.height)
+  }
   aboutToAppear() {
     LogUtil.log('ImageKnifeComponent aboutToAppear happened!')
     this.canvasHasReady = false;