鸿蒙 ArkTS 高级样式复用：@Extend 装饰器完全解析（比 @Styles 更强大）
🔥前言：在上一篇文章《鸿蒙 ArkTS 样式复用：@Styles 装饰器从入门到实战》中，我们学习了使用@Styles实现基础样式复用。
但@Styles不支持传参、不能使用组件专有属性，在复杂 UI 场景下能力有限。
📌 本文核心：介绍 ArkTS 中功能更强大的样式复用方案：@Extend装饰器。它支持传参、支持专属属性、支持封装事件，是企业级项目 UI 规范统一的首选方案。
一、@Extend 是什么？
@Extend用于为指定组件扩展专属样式方法，可以理解为给组件“扩展一个自带样式的方法”。
与@Styles相比，它最大的优势是：
- 支持传参
- 支持组件专有属性与事件
- 语义更明确，只作用于特定组件
二、@Extend 核心规则
- 只能定义在全局，不能写在组件内部。
- 必须指定组件类型：
@Extend(Button)、@Extend(Text)。 - 内部可使用该组件的专有属性 + 专有事件。
- 支持传入参数（颜色、尺寸、回调函数均可）。
- 作用范围仅限当前
.ets文件。
三、@Extend 基础语法
@Extend(组件类型)function方法名(参数...){// 样式与属性封装}四、实战：封装可传参的 Button 扩展样式
我们将按钮的尺寸、圆角、类型、背景色、点击事件全部封装，使用时只需一行调用。
@Entry@Componentstruct 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)functionbuttonExtendStyle(bgColor:Color,callback:()=>void){// 通用样式.width(100).height(40).borderRadius(10)// Button 专有属性.type(ButtonType.Normal).backgroundColor(bgColor)// 点击事件.onClick(callback)}使用后，组件代码极度简洁，UI 风格高度统一，维护成本大幅降低。
五、@Extend vs @Styles 快速对比
| 特性 | @Styles | @Extend |
|---|---|---|
| 定义位置 | 组件内 / 全局 | 只能全局 |
| 支持传参 | 不支持 | 支持 |
| 适用组件 | 任意通用组件 | 指定单一组件（Button/Text 等） |
| 专有属性 | 不能使用 | 可以使用 |
| 适用场景 | 简单通用样式 | 复杂专属样式、动态样式、UI 规范 |
六、总结
- 简单样式复用 → 使用
@Styles - 组件专属、需要传参、需要封装事件 → 使用
@Extend
🧾 两者搭配使用，可以让你的鸿蒙 ArkTS 项目代码结构更清晰、冗余更少、维护性更强，是现代鸿蒙 UI 开发必备技能。