diff --git a/entry/src/main/ets/pages/imageknifeTestCaseIndex.ets b/entry/src/main/ets/pages/imageknifeTestCaseIndex.ets index 6677d37..9281818 100644 --- a/entry/src/main/ets/pages/imageknifeTestCaseIndex.ets +++ b/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("测试失败占位图") diff --git a/entry/src/main/ets/pages/testReusePhotoPage.ets b/entry/src/main/ets/pages/testReusePhotoPage.ets new file mode 100644 index 0000000..52abc1e --- /dev/null +++ b/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 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 = new CommonDataSource([]) + private data: 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' + ] + + 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) { + 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) + } +} \ 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 63e11fa..12883ee 100644 --- a/entry/src/main/resources/base/profile/main_pages.json +++ b/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" ] } \ 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 5027b36..9b60907 100644 --- a/library/src/main/ets/components/imageknife/ImageKnifeComponent.ets +++ b/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; } })