【HarmonyOS NEXT】解决Repeat复用导致Image加载图片展示的是上一张图片的问题
2025-07-18 12:37:07
128次阅读
0个评论
最后修改时间:2025-07-18 12:37:35
1. 背景
在使用Repeat+virtualScroll+image 的时候,滑动列表到第二屏的时候会发现Image 的alt 失效,先展示的是上一屏的图片,然后才会展示最新的图片,效果如下
代码如下
@Entry
@ComponentV2
struct Index {
@Local dataSource: Array<string> = []
aboutToAppear(): void {
for (let i = 0; i < 1000; i++) {
this.dataSource.push(`https://placehold.co/400x300/orange/white/png?text=testimage_${i}`)
}
}
build() {
Column() {
WaterFlow() {
Repeat(this.dataSource)
.virtualScroll()
.each(() => {
})
.key((item) => {
return item
})
.templateId((item) => {
return 'templateImage'
})
.template("templateImage", (ri) => {
Image(ri.item)
.width('100%')
.alt($r('app.media.ic_placeholder_400x300'))
.aspectRatio(4 / 3)
}, { cachedCount: 10 })
}
.width('100%')
.height('100%')
.cachedCount(0)
.columnsTemplate('1fr 1fr')
.rowsTemplate('1fr 1fr')
.columnsGap(3)
.rowsGap(3)
}
}
}
1.1 问题原因
和行业内的大佬沟通,发现这个问题其实在2024年11月左右就已经存在了,原因是image的问题,没有适配好repeat,导致alt 在Repeat virtualScroll image 复用的情况下无效,加载新的图片时,展示的还是上一次src的图片。
1.2 解决办法
既然是复用,那么可以在封装一个自定义image组件,内部监听src的变化,如果变化,则重新生成一个新的image 让image重复上下树
下面是解决后的效果
下面是解决代码
@Entry
@ComponentV2
struct Index {
@Local dataSource: Array<string> = []
aboutToAppear(): void {
for (let i = 0; i < 1000; i++) {
this.dataSource.push(`https://placehold.co/400x300/orange/white/png?text=testimage_${i}`)
}
}
build() {
Column() {
WaterFlow() {
Repeat(this.dataSource)
.virtualScroll()
.each(() => {
})
.key((item) => {
return item
})
.templateId((item) => {
return 'templateImage'
})
.template("templateImage", (ri) => {
RepeatImageV2({
src: ri.item,
attribute: {
alt: $r('app.media.ic_placeholder_400x300')
}
})
.width('100%')
.aspectRatio(4 / 3)
}, { cachedCount: 10 })
}
.width('100%')
.height('100%')
.cachedCount(0)
.columnsTemplate('1fr 1fr')
.rowsTemplate('1fr 1fr')
.columnsGap(3)
.rowsGap(3)
}
}
}
@ComponentV2
export struct RepeatImageV2 {
@Param @Require src: PixelMap | ResourceStr | DrawableDescriptor
@Param attribute: ZZImageModifier = {};
@Local isAppear: boolean = false
build() {
if (this.isAppear) {
this.imageContent()
} else {
this.imageContent()
}
}
@Builder
imageContent() {
Image(this.src)
.draggable(false)
.alt(this.attribute?.alt)
.objectFit(this.attribute?.objectFit)
.borderRadius(this.attribute?.borderRadius)
.borderColor(this.attribute?.borderColor)
.width('100%')
.height('100%')
}
@Monitor("src")
updateImageSrc() {
this.isAppear = !this.isAppear;
}
}
export interface ZZImageModifier {
objectFit?: ImageFit
alt?: string | Resource | PixelMap
borderRadius?: Length | BorderRadiuses | LocalizedBorderRadiuses
borderColor?: ResourceColor | EdgeColors | LocalizedEdgeColors
}
00
- 3回答
- 1粉丝
- 1关注
相关话题
- Image白块问题解决
- HarmonyOS Repeat 可复用的循环渲染
- Repeat:子组件复用
- [HarmonyOS]解决HMRouter路由地址无法抽取的问题
- 【HarmonyOS NEXT】解决自定义弹框遮挡气泡提示的问题
- 关于组件堆叠的问题及解决##ArkTS##
- harmony OS NEXT-Image组件如何引用网络图片
- [HarmonyOS NEXT 实战案例三] 音乐专辑网格展示(上)
- HarmonyOS NEXT开发实战:打造高效上拉刷新与下拉加载组件(一)空页面的设计与实现
- 关于鸿蒙app上架审核中的一些常见问题【1】
- HarmonyOS NEXT应用开发边学边玩,从零实现一影视APP(四、最近上映电影滚动展示及加载更多的实现)
- HarmonyOS Next 之列表上拉刷新下拉加载及其分页功能
- HarmonyOS Next Refresh+List实现下拉刷新上拉加载
- 什么是Uniapp(初识Uniapp)一
- 鸿蒙NEXT-HMRouter,在使用router后无法跳转问题解决