当前位置：首页 > news >正文

鸿蒙开发中，@Extend、@Styles 和 @Builder 的区别

news 来源：原创 2025/5/2 17:56:58

在鸿蒙（HarmonyOS）开发中，@Extend、@Styles 和 @Builder 是三种常用的装饰器，用于提升代码复用性和可维护性。以下是它们的详细介绍和示例：

1. @Extend：扩展组件样式

说明：

功能：用于扩展原生组件（如 Text、Column）的样式和事件，支持参数传递和全局定义。
特点：
- 仅支持全局定义，不支持组件内部定义。
- 可以封装组件的私有属性、事件和全局方法。
- 支持动态参数和状态变量响应式更新。

示例：

// 全局定义扩展Text组件的样式
@Extend(Text) function myText(size: number, color: ResourceColor) {.fontSize(size).fontColor(color)
}@Entry
@Component
struct Example {@State fontSize: number = 20build() {Column() {Text("Hello").myText(this.fontSize, Color.Red) // 调用扩展样式.onClick(() => { this.fontSize = 30 }) // 点击动态更新样式}}
}

2. @Styles：复用公共样式

说明：

功能：提取多个组件的公共样式，支持全局或组件内定义，但不支持参数传递 。
特点：
- 全局定义需加 function 关键字，组件内定义则不需要。
- 优先级：组件内样式 > 全局样式。

示例：

// 全局样式
@Styles function commonStyle() {.width(100).height(100).backgroundColor(Color.Orange)
}@Entry
@Component
struct Example {// 组件内样式@Styles localStyle() {.backgroundColor(Color.Blue)}build() {Column() {Text("Text1").commonStyle() // 全局样式Text("Text2").localStyle()  // 组件内样式}}
}

3. @Builder：复用结构与逻辑

说明：

功能：封装组件结构、样式和事件，支持参数传递，分为全局和组件内定义。
特点：
- 组件内定义需通过 this 调用，全局定义可直接使用。
- 适合复杂布局或动态内容的复用。

示例：

// 全局Builder
@Builder function customButton(text: string, onClick: () => void) {Button(text).width(100).onClick(onClick)
}@Entry
@Component
struct Example {@Builder customCard() { // 组件内BuilderColumn() {Text("Card Content").fontSize(16)}.border({ width: 1, color: Color.Gray })}build() {Column() {customButton("Click", () => console.log("Clicked")) // 全局调用this.customCard() // 组件内调用}}
}

最后来个对比总结：

装饰器	作用范围	参数支持	适用场景	定义位置
`@Extend`	特定组件扩展	✔️	扩展原生组件样式/事件	仅全局
`@Styles`	通用样式复用	❌	提取公共样式	全局或组件内
`@Builder`	结构与逻辑封装	✔️	复杂布局或动态内容复用	全局或组件内