在HarmonyOS NEXT开发中，管理好UI样式是写出高质量代码的关键。@Styles和AttributeModifier是官方提供的两种主要方案，它们各有侧重，可以理解为“轻量级静态复用”与“重量级动态控制”的区别。

📌 @Styles：轻量级静态样式复用

@Styles就像是给样式起了一个“别名”，用于在同一页面或组件内，复用一组通用的样式设置。它的核心价值是让代码更简洁，避免重复的链式调用。

核心用法与限制

• 基础用法：用@Styles修饰一个函数，在里面编写样式代码，然后像调用普通方法一样在组件上使用.myStyle()即可。

  typescript

  @Entry
  @Component
  struct Index {
    build() {
      Column() {
        Text('Hello').textStyle() // 复用样式
        Text('World').textStyle()
      }
    }
  
    @Styles
    textStyle() {
      .width(100)
      .height(50)
      .backgroundColor(Color.Blue)
      .margin({ top: 10 })
    }
  }

• 关键限制：

  • 不支持参数：@Styles方法不能传递参数，意味着同一个样式方法只能有一种固定形态。

  • 作用域有限：无法通过export导出供其他文件使用。

  • 能力受限：仅支持所有组件都有的通用属性和事件，无法设置Text组件特有的fontSize等自有属性。

适用场景：当你需要在一个页面内，为多个组件设置一组完全相同的通用样式（如宽高、背景色、外边距）时，@Styles是最直接的选择。

⚙️ AttributeModifier：强大的动态样式与控制

AttributeModifier的出现就是为了解决@Styles的局限，提供更强大和灵活的样式管理能力。它可以实现跨文件复用、支持业务逻辑和动态设置属性。

核心用法与能力

• 实现样式类：新建一个类，实现AttributeModifier<组件Attribute>接口。关键是实现applyNormalAttribute方法，在该方法中通过instance参数来设置样式。

  typescript

  // CommonTextModifier.ets
  import { TextModifier } from '@kit.ArkUI'
  
  export class CommonTextModifier implements AttributeModifier<TextModifier> {
    // 你可以在这里定义变量，并通过构造函数传参，实现动态控制
    isLarge: boolean = false
  
    applyNormalAttribute(instance: TextModifier): void {
      // 在这里编写样式
      instance.fontColor(Color.White)
        .backgroundColor(Color.Blue)
        .textAlign(TextAlign.Center)
  
      // 支持业务逻辑，动态决定是否设置某个属性
      if (this.isLarge) {
        instance.fontSize(50).width(300).height(100)
      } else {
        instance.fontSize(30).width(200).height(60)
      }
    }
  }

• 跨文件使用：将上面的CommonTextModifier类通过export导出，就可以在项目的任何地方引入使用，真正实现全局复用。

  typescript

  // Index.ets
  import { CommonTextModifier } from '../common/CommonTextModifier'
  
  @Entry
  @Component
  struct Index {
    txtModifier: CommonTextModifier = new CommonTextModifier()
  
    build() {
      Column() {
        Text("开启广播")
          .attributeModifier(this.txtModifier) // 应用样式
      }
    }
  }

• 支持多态样式：除了默认的applyNormalAttribute，你还可以实现applyPressedAttribute（按压态）、applyDisabledAttribute（禁用态）等方法，让组件在不同状态下呈现不同样式。

• 动态更新：将Modifier对象用@State装饰，当它的属性变化时，UI会自动刷新，重新应用样式。

⚖️ 如何选择？一张表看懂差异

信息综合自

💎 总结

• 首选AttributeModifier：对于需要跨页面复用、动态控制、包含业务逻辑的复杂样式需求，AttributeModifier是官方推荐且能力最强的方案。虽然前期编写成本稍高，但它带来的可维护性和灵活性是值得的。

• 善用@Styles：对于页面内部、简单固定、仅含通用属性的样式复用，@Styles依然是一个轻便高效的工具，可以快速让代码变得整洁。

如果你正在开始一个新项目或构建组件库，从AttributeModifier入手会是更具前瞻性的选择。