🔥前言：在鸿蒙 ArkTS 开发中，UI 样式代码重复是非常常见的问题。多个按钮、文本、布局使用相同的宽高、圆角、间距时，如果逐个编写会产生大量冗余代码，不利于后期维护。

📌 本文核心：为此，ArkTS 提供了 @Styles 装饰器，专门用于通用样式的抽取与复用。本文带你彻底掌握 @Styles 的用法、规则与实战场景。

一、@Styles 是什么？

@Styles 用于将一组通用样式封装成一个方法，在需要的组件上直接调用，实现一处定义、多处复用。
它支持封装通用属性（如 width、height、borderRadius 等）和通用事件，但不支持参数、不支持组件专有属性。

二、@Styles 核心使用规则

1. 支持组件内定义和全局定义两种方式。
2. 组件内定义不需要 function 关键字，全局定义必须加 function。
3. 只能包含通用属性和通用事件，不能使用组件专属 API。
4. 不支持传参。
5. 全局 @Styles 仅在当前 .ets 文件内有效。

三、组件内 @Styles（当前组件独享）

在组件内部定义的 @Styles 只能在当前组件内部使用，安全性更高。

@Entry
@Component
struct StylesPage {
  build() {
    Column() {
      Row({ space: 50 }) {
        Button("确认")
          .type(ButtonType.Normal)
          .backgroundColor(Color.Green)
          .compButtonStyle()
          .onClick(() => console.log("确认"))

        Button("取消")
          .type(ButtonType.Normal)
          .backgroundColor(Color.Gray)
          .compButtonStyle()
          .onClick(() => console.log("取消"))
      }
    }
    .width("100%")
    .height("100%")
    .justifyContent(FlexAlign.Center)
  }

  // 组件内样式定义
  @Styles compButtonStyle() {
    .width(100)
    .height(40)
    .borderRadius(10)
  }
}

四、全局 @Styles（当前文件通用）

定义在组件外部，当前 .ets 文件内所有组件均可调用。

@Entry
@Component
struct StylesPage {
  build() {
    Column() {
      Row({ space: 50 }) {
        Button("确认")
          .type(ButtonType.Normal)
          .backgroundColor(Color.Green)
          .globalButtonStyle()
          .onClick(() => console.log("确认"))

        Button("取消")
          .type(ButtonType.Normal)
          .backgroundColor(Color.Gray)
          .globalButtonStyle()
          .onClick(() => console.log("取消"))
      }
    }
    .width("100%")
    .height("100%")
    .justifyContent(FlexAlign.Center)
  }
}

// 全局样式定义
@Styles function globalButtonStyle() {
  .width(100)
  .height(40)
  .borderRadius(10)
}

五、总结

🧾 @Styles 是鸿蒙样式复用最基础、最常用的方案，适合抽取无差异、通用、无需传参的样式。
但它也有明显局限：不支持传参、不能使用组件专有属性与事件。

🤔 不过 @Styles 也有一定局限：不支持传参、不能使用组件专有属性与事件。如果想要更强大、更灵活的样式复用能力，比如动态传入颜色、封装点击事件、为特定组件定制专属样式，记得关注我的下一篇文章，将会带来比 @Styles 更进阶、功能更强的 @Extend 装饰器，咱们下篇不见不散～