【HarmonyOS 5】AttributeModifier 和 AttributeUpdater 区别详解
一、AttributeModifier 和 AttributeUpdater 的定义和作用
1. AttributeModifier 是 ArkUI 组件的动态属性，提供属性设置功能。开发者可使用 attributeModifier 方法，通过自定义实现 AttributeModifier<T>接口，来动态设置组件属性。
该属性可以提供实现以下三种场景的效果实现：
（1）封装共享 UI 属性样式
// 自定义实现AttributeModifier UI样式接口用于复用class MyModifier implements AttributeModifier<ButtonAttribute> { // 普通状态样式 applyNormalAttribute(instance: ButtonAttribute): void { instance.fontColor(Color.Black) instance.fontSize(20) }}
@Entry@Componentstruct AttTestPage {
@State modifier: MyModifier = new MyModifier()
build() { Column() { Button("按钮1") .attributeModifier(this.modifier)
Button("按钮2") .attributeModifier(this.modifier) Button("按钮3") .attributeModifier(this.modifier) } .width('100%') .height('100%') .backgroundColor(Color.White) .justifyContent(FlexAlign.Center) }}
复制代码
（2）动态更新样式
class MyButtonModifier implements AttributeModifier<ButtonAttribute> { isDark: boolean = false
applyNormalAttribute(instance: ButtonAttribute): void { if (this.isDark) { instance.backgroundColor(Color.Blue); } else { instance.backgroundColor(Color.Red); } }}
@Entry@Componentstruct updateTestPage { @State modifier: MyButtonModifier = new MyButtonModifier();
build() { Column() { Button("Button") .attributeModifier(this.modifier) .onClick(() => { this.modifier.isDark = !this.modifier.isDark; }) } .width('100%') .height('100%') }}
复制代码
（3）满足多态度样式的修改（聚焦，按下，默认，选择，禁用）
// 自定义实现AttributeModifier多种状态接口class MyModifier implements AttributeModifier<ButtonAttribute> { // 普通状态样式 applyNormalAttribute(instance: ButtonAttribute): void { instance.fontColor(Color.Black) instance.fontSize(20) } // 按下状态样式 applyPressedAttribute(instance: ButtonAttribute): void { instance.fontColor(Color.Red) instance.fontSize(14) } // 聚焦状态样式 applyFocusedAttribute(instance: ButtonAttribute): void { instance.fontColor(Color.Blue) instance.fontSize(18) } // 选择状态样式 applySelectedAttribute(instance: ButtonAttribute): void { instance.fontColor(Color.Green) instance.fontSize(16) } // 禁用状态样式 applyDisabledAttribute(instance: ButtonAttribute): void { instance.fontColor(Color.Gray) instance.fontSize(16) }}
@Entry@Componentstruct AttTestPage {
@State modifier: MyModifier = new MyModifier() @State isDisabled: boolean = false; @State isFocused: boolean = false;
@State textContent: string = "默认文本内容";
build() { Column() { // 测试文本组件 Button(this.textContent) .attributeModifier(this.modifier) .width('100%') .height(50) .id("testButton") .onFocus(() => { // 聚焦事件 this.textContent = "聚焦时的文本内容"; }) .onBlur(() => { // 失焦事件 }) .enabled(!this.isDisabled) .margin({ bottom: 50 })
// 切换禁用状态按钮 Button(this.isDisabled? '启用文本' : '禁用文本') .onClick(() => { this.isDisabled =!this.isDisabled; if(this.isDisabled){ this.textContent = "禁用时的文本内容"; } }) .id("enableButton") .width('100%') .height(50) .margin({ bottom: 50 })
// 切换选择状态按钮 Button(this.isFocused? '设置聚焦' : '取消聚焦') .onClick(() => { this.isFocused =!this.isFocused; if(this.isFocused){ this.getUIContext().getFocusController().requestFocus("testButton") this.textContent = "选择时的文本内容"; }else{ this.getUIContext().getFocusController().requestFocus("enableButton") } }) .width('100%') .height(50) } .width('100%') .height('100%') .backgroundColor(Color.White) .justifyContent(FlexAlign.Center) }}
复制代码
详情参见官方 API 文档AttributeModifier动态属性设置-通用属性-组件通用信息-ArkTS组件-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者
2. AttributeUpdater 是 ArkUI 框架提供的属性更新器。用于更新属性的给组件触发 UI 更新。需从 @kit.ArkUI 导入模块，开发者自定义类继承 AttributeUpdater。
// 导入必要的模块import { AttributeUpdater } from '@kit.ArkUI';
// 自定义 AttributeUpdater 类class TextAttributeUpdater extends AttributeUpdater<TextAttribute, TextInterface> { // 初始化设置组件样式 initializeModifier(instance: TextAttribute): void { instance.fontSize(16) .fontColor(Color.Yellow) }
// 定义正常态更新属性函数 applyNormalAttribute(instance: TextAttribute): void { instance.fontSize(20) .fontColor(Color.Blue) }
}
// 页面组件@Entry@Componentstruct AttUpdateTestPage { private textUpdater: TextAttributeUpdater = new TextAttributeUpdater();
build() { Column({ space: 50 }) { // 使用 AttributeUpdater 的 Text 组件 Text("默认文本") .attributeModifier(this.textUpdater) .width('100%') .textAlign(TextAlign.Center)
// 按钮用于触发属性更新 Button('更新属性') .onClick(() => { this.textUpdater.attribute?.fontColor(Color.Red); this.textUpdater.updateConstructorParams("修改文本内容"); }) .width('100%') } .width('100%') .padding({ top: 100 }) }}
复制代码
详情参见官方 API 文档AttributeUpdater-arkui-UI界面-ArkTS API-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者
二、AttributeModifier 和 AttributeUpdater 的共性和区别
1. 共性
(1) 都可对组件属性进行设置
(2) AttributeUpdater 继承于 AttributeModifier，实际上 update 是个特殊的 modifier。
2. 区别
（1）AttributeModifie 主要用于上述描述的三种场景，封装共享 UI 属性样式，实现多态 UI 表现，动态修改小批量的 UI 属性。
（2）AttributeUpdater 侧重于将属性直接设置给组件，无需标记为状态变量即可直接触发 UI 更新。它更强调属性的直通更新以及对组件构造入参的更改等功能。实际上 Update 主要处理大批量的属性修改，主要就是为了解决 AttributeModifie 处理大量属性修改时性能损耗的问题。所以使用属性更新器，可直接绕过 ArkUI 的 @State 机制进行属性的更新。
(3) AttributeModifier：自定义 Modifier 不支持感知 @State 装饰的状态数据变化。AttributeUpdater：可直接更新属性触发 UI 变化，在一定程度上可以看作是绕过了常规的状态管理机制来实现属性更新，对属性更新的控制更为直接。
三、源码示例
import { AttributeUpdater } from '@ohos.arkui.modifier'
/** * AttributeUpdater定义 */class MyButtonUpdate extends AttributeUpdater<ButtonAttribute> { // 首次绑定时触发initializeModifier方法，进行属性初始化 initializeModifier(instance: ButtonAttribute): void { instance .width('50%') .height(30)
}}
/** * AttributeModifier定义 */class MyButtonModifier implements AttributeModifier<ButtonAttribute> { isDark: boolean = false
applyNormalAttribute(instance: ButtonAttribute): void { if (this.isDark) { instance.backgroundColor(Color.Blue) } else { instance.backgroundColor(Color.Red) } }}
@Entry@Componentstruct Index { // AttributeUpdater 虽然继承于AttributeModifier需要使用，但是自带更新属性的能力 update: MyButtonUpdate = new MyButtonUpdate();
// 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%').fontSize(52); }) } .width('100%') } .height('100%') }}
复制代码
注意：
AttributeModifier：属性支持范围不支持入参为 CustomBuilder 或 Lamda 表达式的属性，且不支持手势，事件仅支持部分特定事件。
AttributeUpdater：updateConstructorParams 当前只支持 Button、Image、Text 和 Span 组件，且不支持深浅色切换等状态管理相关的操作。
评论