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

在鸿蒙（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 = 20
  build() {
    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() { // 组件内Builder
    Column() {
      Text("Card Content").fontSize(16)
    }
    .border({ width: 1, color: Color.Gray })
  }

  build() {
    Column() {
      customButton("Click", () => console.log("Clicked")) // 全局调用
      this.customCard() // 组件内调用
    }
  }
}

最后来个对比总结：

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

通过合理使用这三种装饰器，可以显著提升鸿蒙开发的代码复用性和可读性。更多细节可参考官方文档或示例代码。