From 9bc31bb138907856d441504238b1e7f18d35c2d3 Mon Sep 17 00:00:00 2001 From: zenggaofeng Date: Tue, 23 Apr 2024 20:04:51 +0800 Subject: [PATCH] =?UTF-8?q?=E9=80=82=E9=85=8D=E5=A4=8D=E7=94=A8=E5=9C=BA?= =?UTF-8?q?=E6=99=AF=E8=A7=A6=E5=8F=91=E6=87=92=E5=8A=A0=E8=BD=BDonDataRel?= =?UTF-8?q?oaded?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: zenggaofeng --- CHANGELOG.md | 1 + .../ets/pages/imageknifeTestCaseIndex.ets | 5 + .../src/main/ets/pages/testReuseAblePages.ets | 204 ++++++++++++++++++ .../resources/base/profile/main_pages.json | 3 +- .../imageknife/ImageKnifeComponent.ets | 3 + 5 files changed, 215 insertions(+), 1 deletion(-) create mode 100644 entry/src/main/ets/pages/testReuseAblePages.ets diff --git a/CHANGELOG.md b/CHANGELOG.md index 1e3318c..1dbda67 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ - 修改ImageKnife跳过网络,点击默认,图片没有传入宽高,无显示bug - ImageKnife支持根据自定义key获取已缓存的图片 - ImageKnife加载图片支持自定义网络栈和图片加载组件 +- 适配复用场景触发懒加载onDataReloaded ## 2.2.0-rc.0 - 修复自定义DataFetch接口实现不生效问题 diff --git a/entry/src/main/ets/pages/imageknifeTestCaseIndex.ets b/entry/src/main/ets/pages/imageknifeTestCaseIndex.ets index 6bb39fb..a951647 100644 --- a/entry/src/main/ets/pages/imageknifeTestCaseIndex.ets +++ b/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) diff --git a/entry/src/main/ets/pages/testReuseAblePages.ets b/entry/src/main/ets/pages/testReuseAblePages.ets new file mode 100644 index 0000000..7144c87 --- /dev/null +++ b/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 = [ + "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) { + this.url = params.url + } + + build() { + Column() { + ImageKnifeComponent({ + imageKnifeOption: { + loadSrc: this.url, + placeholderSrc: $r('app.media.icon_loading') + } + }) + }.width("100%").height("100%") + } +} \ No newline at end of file diff --git a/entry/src/main/resources/base/profile/main_pages.json b/entry/src/main/resources/base/profile/main_pages.json index 6d5811e..3be410f 100644 --- a/entry/src/main/resources/base/profile/main_pages.json +++ b/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" ] } \ No newline at end of file diff --git a/library/src/main/ets/components/imageknife/ImageKnifeComponent.ets b/library/src/main/ets/components/imageknife/ImageKnifeComponent.ets index 7265bbb..11d288a 100644 --- a/library/src/main/ets/components/imageknife/ImageKnifeComponent.ets +++ b/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;