什么是 attributeModifier？

attributeModifier 是 ArkUI 框架中一个强大的属性修饰器接口，它允许开发者封装和复用组件样式逻辑。通过实现 AttributeModifier<T> 接口，我们可以创建自定义的属性修改器，并在多个组件中共享这些样式配置。

接口定义

// T是组件的属性类型，开发者可以在回调中获取到属性对象，通过该对象设置属性。
declare interface AttributeModifier<T> { 

  applyNormalAttribute?(instance: T): void; // 默认态
  
  applyPressedAttribute?(instance: T): void; // 按压态
  
  applyFocusedAttribute?(instance: T): void; // 焦点态
  
  applyDisabledAttribute?(instance: T): void; // 禁用态
  
  applySelectedAttribute?(instance: T): void; // 选择态

}

核心优势

1. 样式复用 - 避免重复代码，保持 UI 一致性

2. 状态管理 - 区分常规状态和选中状态的样式

3. 集中维护 - 样式修改只需调整一处

基本用法

1. 创建自定义修饰器

class MyCustomModifier implements AttributeModifier<ComponentAttribute> {
  applyNormalAttribute(instance: ComponentAttribute): void {
    // 常规状态样式
    instance.width('100%')
      .height(50)
      .backgroundColor(Color.White)
  }

  applySelectedAttribute(instance: ComponentAttribute): void {
    // 选中状态样式
    instance.backgroundColor('#F5F5F5')
  }
}

export const myModifier = new MyCustomModifier();

2. 在组件上应用

Component()
  .attributeModifier(myModifier)

最佳实践

1. 资源引用 - 使用 $r() 引用资源文件中的值，便于主题切换
2. 类型安全 - 为不同组件创建专门的修饰器（如 CheckboxAttribute）
3. 状态区分 - 充分利用 applyNormalAttribute 和 applySelectedAttribute
4. 组合使用 - 可以与其他样式方法链式调用

常见问题

Q: attributeModifier 会影响性能吗？
A: 合理使用不会，反而能减少重复样式计算。

Q: 可以嵌套使用多个 modifier 吗？
A: 可以，但要注意执行顺序和属性覆盖问题。当一个组件上同时使用属性方法和applyNormalAttribute设置相同的属性时，遵循属性覆盖原则，即后设置的属性生效

Q: 支持哪些组件？
A: 所有支持属性设置的组件都可以使用

总结

attributeModifier 是 ArkUI 中提升代码复用率和维护性的利器，特别适合需要统一管理样式的场景。通过封装常用样式逻辑，我们可以让组件代码更简洁，同时保持整个应用的 UI 一致性。