diff --git a/CHANGELOG.md b/CHANGELOG.md index 17970b7..5f17062 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ - 修复成功回调获取不到宽高 - 新增svg图片解码 - 新增媒体图片file://格式 +- 修复头像超过设备高度图片闪动问题-消息列表底部头像闪动问题 ## 3.0.0-rc.6 - 支持多种组合变换 diff --git a/README.md b/README.md index a7b1278..7d204f4 100644 --- a/README.md +++ b/README.md @@ -242,7 +242,16 @@ ImageKnifeComponent({ ImageKnifeOption: } }).width(100).height(100) ``` - +#### 9.ImageKnifeComponent - syncLoad 的使用 +修复在消息列表场景,新增消息时头像出现闪动 +``` +ImageKnifeComponent({ + imageKnifeOption:{ + loadSrc:$r("app.media.pngSample"), + placeholderSrc:$r("app.media.loading") + },syncLoad:true + }) +``` ## 接口说明 ### ImageKnifeOption参数列表 diff --git a/entry/src/main/ets/pages/TestImageFlash.ets b/entry/src/main/ets/pages/TestImageFlash.ets index c192a2b..75144e0 100644 --- a/entry/src/main/ets/pages/TestImageFlash.ets +++ b/entry/src/main/ets/pages/TestImageFlash.ets @@ -60,20 +60,23 @@ export struct MsgItem { if (this.count % 2 == 0 && this.count <6){ ImageKnifeComponent({ imageKnifeOption:{ - loadSrc:$r("app.media.startIcon") - } + loadSrc:$r("app.media.startIcon"), + placeholderSrc:$r("app.media.loading") + },syncLoad:true }) }else if (this.count > 6 && this.count - 6 < this.data.length){ ImageKnifeComponent({ imageKnifeOption:{ loadSrc:this.data[this.count - 6], - } + placeholderSrc:$r("app.media.loading") + },syncLoad:true }) }else { ImageKnifeComponent({ imageKnifeOption:{ - loadSrc:$r("app.media.loading") - } + loadSrc:$r("app.media.pngSample"), + placeholderSrc:$r("app.media.loading") + },syncLoad:true }) } } diff --git a/library/src/main/ets/components/ImageKnifeComponent.ets b/library/src/main/ets/components/ImageKnifeComponent.ets index 2d8c3bd..2bb1641 100644 --- a/library/src/main/ets/components/ImageKnifeComponent.ets +++ b/library/src/main/ets/components/ImageKnifeComponent.ets @@ -17,12 +17,15 @@ import { ImageKnifeRequest, ImageKnifeRequestState } from '../ImageKnifeRequest' import common from '@ohos.app.ability.common'; import { ImageKnife } from '../ImageKnife'; import { LogUtil } from '../utils/LogUtil'; -import { ImageKnifeRequestSource } from '../model/ImageKnifeData'; +import { ImageKnifeData, ImageKnifeRequestSource } from '../model/ImageKnifeData'; +import { IEngineKey } from '../key/IEngineKey'; +import { DefaultEngineKey } from '../key/DefaultEngineKey'; @Component export struct ImageKnifeComponent { @Watch('watchImageKnifeOption') @ObjectLink imageKnifeOption: ImageKnifeOption; @State pixelMap: PixelMap | string | undefined = undefined + @State syncLoad: boolean = false @State adaptiveWidth: Length = '100%' @State adaptiveHeight: Length = '100%' @State objectFit: ImageFit = ImageFit.Contain @@ -36,14 +39,24 @@ export struct ImageKnifeComponent { aboutToAppear(): void { //闪动问题失效,注释相应代码后续修复 - // let memoryCache: ImageKnifeData | undefined = ImageKnife.getInstance() - // .loadFromMemoryCache(Tools.generateMemoryKey(this.ImageKnifeOption.loadSrc)) - // if (memoryCache !== undefined){ - // LogUtil.log("aboutToAppear load from memory cache for key = "+ Tools.generateMemoryKey(this.ImageKnifeOption.loadSrc)) - // //画主图 - // this.pixelMap = memoryCache.source; - // }else { - // } + if(this.syncLoad) { + let engineKey: IEngineKey = new DefaultEngineKey(); + let memoryCacheSrc: ImageKnifeData | undefined = ImageKnife.getInstance() + .loadFromMemoryCache(engineKey.generateMemoryKey(this.imageKnifeOption.loadSrc,ImageKnifeRequestSource.SRC,this.imageKnifeOption)) + if (memoryCacheSrc !== undefined){ + LogUtil.log("aboutToAppear load from memory cache for key = "+ engineKey.generateMemoryKey(this.imageKnifeOption.loadSrc,ImageKnifeRequestSource.SRC,this.imageKnifeOption)) + //画主图 + this.pixelMap = memoryCacheSrc.source; + }else { + let memoryCachePlace: ImageKnifeData | undefined = ImageKnife.getInstance() + .loadFromMemoryCache(engineKey.generateMemoryKey(this.imageKnifeOption.placeholderSrc!,ImageKnifeRequestSource.PLACE_HOLDER,this.imageKnifeOption)) + if (memoryCachePlace !== undefined){ + LogUtil.log("aboutToAppear load from memory cache for key = "+ engineKey.generateMemoryKey(this.imageKnifeOption.loadSrc,ImageKnifeRequestSource.SRC,this.imageKnifeOption)) + //画主图 + this.pixelMap = memoryCachePlace.source; + } + } + } this.objectFit = this.imageKnifeOption.objectFit === undefined ? ImageFit.Contain : this.imageKnifeOption.objectFit } @@ -68,6 +81,7 @@ export struct ImageKnifeComponent { .width(this.adaptiveWidth) .height(this.adaptiveHeight) .border(this.imageKnifeOption.border) + .syncLoad(this.syncLoad) .onSizeChange((oldValue:SizeOptions, newValue:SizeOptions) => { this.currentWidth = newValue.width as number this.currentHeight = newValue.height as number