AttributeModifier与AttributeUpdater区别及源码使用DEMO

AttributeModifier与AttributeUpdater区别及源码使用DEMO

一、结论

鸿蒙ArkUI中AttributeModifier和AttributeUpdater均用于组件属性动态配置，核心差异在于更新机制与适用场景：

AttributeModifier是基础属性设置接口，主打多状态样式封装、共享UI样式、小批量属性更新，需绑定@State状态变量触发UI更新。

AttributeUpdater继承自AttributeModifier，主打属性直通更新、大批量属性修改、组件构造入参变更，可绕过@State机制直接触发UI更新，解决Modifier大批量修改的性能损耗问题。

二、代码实现和详细解释

1、通过基础示例分别实现AttributeModifier（多状态样式+小批量更新）和AttributeUpdater（直通更新+大批量修改+构造入参变更），直观对比两者的使用方式和更新机制。

import{AttributeUpdater}from'@ohos.arkui.modifier'/** * AttributeUpdater定义 */classMyButtonUpdateextendsAttributeUpdater<ButtonAttribute>{// 首次绑定时触发initializeModifier方法，进行属性初始化initializeModifier(instance:ButtonAttribute):void{instance.width('50%').height(30)}}/** * AttributeModifier定义 */classMyButtonModifierimplementsAttributeModifier<ButtonAttribute>{isDark:boolean=falseapplyNormalAttribute(instance:ButtonAttribute):void{if(this.isDark){instance.backgroundColor(Color.Blue)}else{instance.backgroundColor(Color.Red)}}}@Entry @Component struct Index{// AttributeUpdater 虽然继承于AttributeModifier需要使用，但是自带更新属性的能力update:MyButtonUpdate=newMyButtonUpdate();// AttributeModifier需要使用@State进行数据绑定，控件才能支持动态更新。// @State modifier: MyButtonModifier = new MyButtonModifier();build(){Row(){Column(){Button("Button")// .attributeModifier(this.modifier).attributeModifier(this.update).onClick(()=>{// this.modifier.isDark = !this.modifier.isDark// 通过attribute，直接修改组件属性，并立即触发组件属性更新this.update.attribute?.width('100%')