除了在开发静态页面时遇到的图片闪烁问题外，还会在一下类似场景中遇到图片闪烁问题

1.问题描述

在开发评论列表模块时，为了实现如下图点击“支持”位置时数字也跟着增加，和取消‘支持’时数字跟着减少的效果时，每点击一下图片就会闪烁一次的bug

2.问题解决

发生图片闪烁的原因是因为当实现点击支持变色数字增加功能时用到的代码并不能实现页面UI更新，只能实现数据更新

解决方式：就是添加如下代码：点击支持或取消支持时，由于数据发生改变，但是页面不更新，所以利用splice的添加数据功能，来实现对象数据重新渲染，但这是就触发了每点击一次图片都会闪烁一次的问题bug

最终解决方法：

利用装饰器@Observed和@ObjectLink来彻底解决

• @Observed: 用于装饰类，表示这个类的实例可以被观察，当类属性变化时会触发UI更新
• @ObjectLink: 用于装饰组件中的变量，表示这个变量与父组件中的@Observed对象建立双向绑定

第一步：定义一个类，在类上添加@Observed他可以观察类属性的状态，将数组对象修改成new对象数组

修改前：

数组数据：

修改后：

数组数据：

第二步：将子组件定义的状态变量的装饰球修改为@ObjectLink，和对象的数据进项双向绑定

修改前：

修改后：

第三步：由于@Observed和@Object装饰器可以通过数据绑定进行页面更新，因此就用不到splice方法来触发UI更新数据更新了，所以注释掉即可。

通过以上步骤就可以解决此类图片闪烁问题，如有不足之处还请各位大佬批评指正。

欢迎加入HarmonyOS赋能资源丰富度建设（第四期）：