这是一个使用鸿蒙技术开发的本地原生记账应用，非常适合大家用来练手。相关源码已上传至 Github，点击此处查看项目。欢迎大家交流、指正，也欢迎提交 PR。
一、引言
在鸿蒙 ArkUI 声明式开发范式中，样式复用是提升开发效率的关键。@Extend 装饰器正是为此而生------它允许你将一组样式属性封装成可复用的方法，并支持参数传递和响应状态变化，显著提升代码的简洁性和可维护性。
本文将深入讲解 @Extend 的核心作用、基本语法、使用示例以及注意事项，帮助你快速掌握这一强大的样式扩展工具。
二、核心作用
@Extend 是 ArkUI 声明式开发范式中用于扩展原生组件样式的装饰器。与 @Styles 相比，@Extend 的核心优势在于：
- 支持扩展组件的私有属性和事件
- 支持参数传递（包括普通变量、状态变量、函数等）
这意味着你可以为 Text、Button 等组件定义专属的样式方法，并像调用普通方法一样传入参数，实现高度灵活的样式复用。
三、基本语法与规则
@Extend 的基本语法如下：
typescript
// 语法：@Extend(UIComponentName) function functionName { ... }
@Extend(Text) function fancyText(fontSize: number) {
.fontColor(Color.Red)
.fontSize(fontSize)
}3.1 关键规则
- 全局定义：必须在文件顶层定义，不能在组件内部声明
- 指定组件 ：必须明确指定要扩展的原生组件类型（如
Text、Button） - 支持参数：可定义参数，调用时传入
- 链式调用 ：可调用同一组件上已定义的
@Extend方法 - 响应状态：参数为状态变量时，状态变化自动触发 UI 更新
四、使用示例
4.1 基础用法：封装样式并传参
下面是一个最基础的示例，为 Text 组件定义 fancy 方法，传入字体大小参数：
typescript
@Extend(Text) function fancy (fontSize: number) {
.fontColor(Color.Red)
.fontSize(fontSize)
}
@Entry
@Component
struct FancyUse {
build() {
Column({ space: 10 }) {
Text('Fancy').fancy(20)
Text('Fancy').fancy(30)
}
.width('100%')
}
}运行效果：
4.2 使用函数作为事件句柄
@Extend 不仅支持样式属性，还支持传入函数作为事件回调：
typescript
@Extend(Text) function makeMeClick(onClick: () => void) {
.fontSize(20)
.backgroundColor(Color.Orange)
.onClick(onClick)
}
@Entry
@Component
struct FancyUse {
@State label: string = 'Hello World';
onClickHandler() {
this.label = 'Hello ArkUI';
}
build() {
Column({ space: 10 }) {
Text(`${this.label}`)
.makeMeClick(this.onClickHandler.bind(this))
}
.width('100%')
}
}运行效果：
4.3 响应状态变量变化
当 @Extend 的参数为 @State 状态变量时，状态变化会自动触发 UI 更新：
typescript
@Extend(Text) function fancy (fontSize: number) {
.fontColor(Color.Red)
.fontSize(fontSize)
}
@Entry
@Component
struct FancyUse {
@State fontSizeValue: number = 20
build() {
Row({ space: 10 }) {
Text('Fancy')
.fancy(this.fontSizeValue)
.onClick(() => {
this.fontSizeValue = 30
})
}
}
}运行效果：
五、注意事项
5.1 作用域限制
@Extend 只能在定义它的文件内使用，无法跨文件导出复用。不同文件中的同名扩展不会相互冲突。
5.2 唯一性
每个 @Extend 方法只能扩展一种组件类型，且同一文件内函数名应保持唯一。
5.3 与 @Styles 对比
| 特性 | @Styles |
@Extend |
|---|---|---|
| 支持通用属性/事件 | ✅ | ✅ |
| 支持组件私有属性/事件 | ❌ | ✅ |
| 支持参数传递 | ❌ | ✅ |
| 作用域 | 全局/组件内 | 文件内 |
5.4 与 AttributeModifier 对比
@Extend：编译期处理，不支持跨文件复用，适合单文件内的简单样式封装。AttributeModifier：支持跨文件导出，能更灵活地动态修改属性，适合需要逻辑判断或跨模块复用的复杂场景。
六、使用建议
- 简单样式复用 ：若样式逻辑仅限单文件使用，优先选择
@Extend，代码更简洁直观。 - 跨文件复用 ：需要跨文件共享样式时，推荐使用
AttributeModifier机制，更灵活且可维护。
七、总结
@Extend 是鸿蒙 ArkUI 开发中非常实用的样式扩展工具，它让组件样式的封装和复用变得简单高效。通过本文的学习，你应该已经掌握了 @Extend 的基本用法、参数传递、事件绑定以及状态响应等核心能力。在实际开发中，根据场景选择合适的样式复用方案，能让你的代码更加优雅和可维护。