HarmonyOS 鸿蒙Next 使用懒加载加载时,图片在当前页显示过多,刷新会闪烁

发布于 1周前 作者 caililin 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 使用懒加载加载时,图片在当前页显示过多,刷新会闪烁

LazyForEach(this.resultData, (item: StudyPlanBean, index: number) => { ListItem() { this.studyPlanItem(item, index) } }, (item: StudyPlanBean, index: number) => JSON.stringify(item) + index);

类似上面代码 如果 图片高度较低,占满整个屏幕的时候,刷新图片会闪烁

3 回复

LazyForEach的刷新机制会导致整个ListItem被重建。由于Image组件是异步刷新,所以视觉上图片会发生闪烁。为了解决这种情况我们应该使用@ObjectLink@Observed去单独刷新使用了item.message的Text组件,首次渲染闪动建议添加alt,默认占位图片来解决,具体参考:

LazyForEach:数据懒加载-渲染控制-学习ArkTS语言-基础入门 - 华为HarmonyOS开发者

如果往数据源追加数据,内部要求应该使用notifyDataAdd,  notifyDataReload是用来重载所有子组件的,所以会刷新整个列表。可以使用notifyDataAdd来添加新数据。

@ObjectLink去改造:若仅靠LazyForEach的刷新机制,当item变化时若想更新子组件,需要将原来的子组件全部销毁再重新构建,在子组件结构较为复杂的情况下,靠改变键值去刷新渲染性能较低。因此框架提供了@Observed@ObjectLink机制进行深度观测,可以做到仅刷新使用了该属性的组件,提高渲染性能。

更多关于HarmonyOS 鸿蒙Next 使用懒加载加载时,图片在当前页显示过多,刷新会闪烁的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


图片闪烁问题,可以使用本地图片缓存和占位图方案进行处理。

针对HarmonyOS鸿蒙Next在使用懒加载加载图片时,图片在当前页显示过多且刷新时出现闪烁的问题,这通常与图片的加载策略、内存管理及UI刷新机制有关。

可能的原因之一是图片加载库或框架在处理图片缓存和显示时未能高效管理内存,导致在快速滚动或刷新页面时,系统资源分配出现波动,从而引起闪烁。此外,如果UI刷新机制不够优化,也可能在图片加载完成时触发不必要的重绘,导致视觉上的闪烁。

解决这类问题的一种方法是优化图片加载策略,比如调整预加载的图片数量,确保只在必要时加载图片,同时提高图片加载的效率。另外,检查并优化内存管理机制,避免内存泄漏或过度占用,也可以减少刷新时的闪烁现象。

此外,考虑使用更高效的图片加载库或框架,这些库通常会有更好的内存管理和UI刷新机制,能有效减少闪烁问题。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部