🔥前言：在上一篇文章《鸿蒙 ArkTS 样式复用：@Styles 装饰器从入门到实战》中，我们学习了使用 @Styles 实现基础样式复用。
但 @Styles 不支持传参、不能使用组件专有属性，在复杂 UI 场景下能力有限。

📌 本文核心：介绍 ArkTS 中功能更强大的样式复用方案：@Extend 装饰器。它支持传参、支持专属属性、支持封装事件，是企业级项目 UI 规范统一的首选方案。

一、@Extend 是什么？

@Extend 用于为指定组件扩展专属样式方法，可以理解为给组件“扩展一个自带样式的方法”。
与 @Styles 相比，它最大的优势是：

• 支持传参
• 支持组件专有属性与事件
• 语义更明确，只作用于特定组件

二、@Extend 核心规则

1. 只能定义在全局，不能写在组件内部。
2. 必须指定组件类型：@Extend(Button)、@Extend(Text)。
3. 内部可使用该组件的专有属性 + 专有事件。
4. 支持传入参数（颜色、尺寸、回调函数均可）。
5. 作用范围仅限当前 .ets 文件。

三、@Extend 基础语法

@Extend(组件类型) function 方法名(参数...) {
  // 样式与属性封装
}

四、实战：封装可传参的 Button 扩展样式

我们将按钮的尺寸、圆角、类型、背景色、点击事件全部封装，使用时只需一行调用。

@Entry
@Component
struct ExtendPage {
  build() {
    Column() {
      Row({ space: 50 }) {
        Button("确认")
          .buttonExtendStyle(Color.Green, () => console.log("确认"))

        Button("取消")
          .buttonExtendStyle(Color.Gray, () => console.log("取消"))
      }
    }
    .width("100%")
    .height("100%")
    .justifyContent(FlexAlign.Center)
  }
}

// 扩展 Button 专属样式
@Extend(Button) function buttonExtendStyle(
  bgColor: Color,
  callback: () => void
) {
  // 通用样式
  .width(100)
  .height(40)
  .borderRadius(10)

  // Button 专有属性
  .type(ButtonType.Normal)
  .backgroundColor(bgColor)

  // 点击事件
  .onClick(callback)
}

使用后，组件代码极度简洁，UI 风格高度统一，维护成本大幅降低。

五、@Extend vs @Styles 快速对比

六、总结

• 简单样式复用 → 使用 @Styles
• 组件专属、需要传参、需要封装事件 → 使用 @Extend

🧾 两者搭配使用，可以让你的鸿蒙 ArkTS 项目代码结构更清晰、冗余更少、维护性更强，是现代鸿蒙 UI 开发必备技能。