HarmonyOS鸿蒙Next中使用@Extend实现组件样式复用与风格扩展

HarmonyOS鸿蒙Next中使用@Extend实现组件样式复用与风格扩展 如何通过@Extend实现样式的复用或者风格的统一变更呢？

4 回复

1. 全局定义 @Extend 函数

需在全局作用域中定义，指定要扩展的组件类型（如 Text、Button）：

[@Extend](/user/Extend)(Text)
function fancyText(fontSize: number, color: Color) {
  .fontSize(fontSize)
  .fontColor(color)
  .backgroundColor(Color.Yellow)
  .textAlign(TextAlign.Center)
  .onClick(() => {
    AlertDialog.show({ message: '点击事件统一处理' })
  })
}

2. 在组件中复用样式

通过链式调用直接应用封装好的样式：

@Entry
@Component
struct ExamplePage {
  build() {
    Column() {
      Text('文本1')
        .fancyText(20, Color.Blue)  // 传递字体大小和颜色参数
      Text('文本2')
        .fancyText(24, Color.Red)
    }
  }
}

3. 组合调用

可嵌套调用其他 [@Extend](/user/Extend) 函数，实现复杂样式的分层复用：

[@Extend](/user/Extend)(Text)
function baseStyle() {
  .fontSize(16)
}

[@Extend](/user/Extend)(Text)
function enhancedStyle() {
  .baseStyle()
  .fontColor(Color.Green)
}

更多关于HarmonyOS鸿蒙Next中使用@Extend实现组件样式复用与风格扩展的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


场景

我们在开发的时候，可能会存大需要将多个 Button/Text 设置相同 padding、圆角、字体等，通过复制粘贴容易出错，在css中我们可能有公共的样式类，但也会有一些局限性，所以我们通过这种新的@Extend语法来实现就很简单了。

实现思路

首先用 [@Extend](/user/Extend) 定义可复用的样式

[@Extend](/user/Extend)(Button) function primaryButton() {
  .width('80%')
  .height(50)
  .backgroundColor('#007DFF')
  .fontColor(Color.White)
  .borderRadius(24)
  .fontSize(16)
}

在组件上直接应用扩展样式

Button('登录')
  .primaryButton()

完整示例代码

[@Extend](/user/Extend)(Button) function primaryButton() {
  .width('80%')
  .height(50)
  .backgroundColor('#007DFF')
  .fontColor(Color.White)
  .borderRadius(24)
  .fontSize(16)
}

// 扩展 Text 样式（带参数）
[@Extend](/user/Extend)(Text)
function statusBadge(color: ResourceColor) {
  .fontSize(12)
  .fontColor(Color.White)
  .backgroundColor(color)
  .padding({ left: 8, right: 8 })
  .borderRadius(10)
}


@Entry
@Component
struct ExtendPro {
  // 扩展 Button 样式

  build() {
    Column({ space: 25 }) {
      Text('[@Extend](/user/Extend) 样式复用')
        .fontSize(18)
        .fontWeight(FontWeight.Bold)

      // 应用 primaryButton 样式
      Button('立即登录')
        .primaryButton()

      Button('注册账号')
        .primaryButton()
        .backgroundColor('#5A5A5A') // 可覆盖部分属性

      // 应用参数化 statusBadge
      Row({ space: 10 }) {
        Text('在线').statusBadge(Color.Green)
        Text('忙碌').statusBadge('#FFA500')
        Text('离线').statusBadge(Color.Gray)
      }

      // 多个 [@Extend](/user/Extend) 组合使用
      Text('重要通知')
        .statusBadge(Color.Red)
        .fontSize(14) // 后定义的属性会覆盖 [@Extend](/user/Extend) 中的值
    }
    .padding(30)
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Center)
  }
}

实现的效果

通过@Extend就可以将多个组件的样式统一化。

cke_13897.png

@Extend装饰器

@Extend装饰器用于复用组件样式，支持扩展原生组件。通过@Styles定义样式，@Extend可将其应用到多个组件。例如，定义通用按钮样式后，使用@Extend快速应用。支持参数化样式，根据输入动态调整。在HarmonyOS Next中，@Extend提升了UI开发效率，保持界面风格统一。

在HarmonyOS Next中，[@Extend](/user/Extend)装饰器是ArkUI框架用于实现组件样式复用和风格统一扩展的核心机制。它本质上是一个函数装饰器，允许你基于已有的组件样式创建新的、可复用的样式变体。

核心作用与工作原理

[@Extend](/user/Extend)的主要作用是扩展组件样式。你可以：

  1. 复用样式：将一组常用的样式属性封装起来，避免在多个组件中重复编写。
  2. 统一变更：当设计风格需要调整时，只需修改[@Extend](/user/Extend)装饰的函数定义，所有使用该样式的地方都会自动更新。
  3. 创建变体：基于基础组件（如Text、Button）创建具有特定品牌风格的定制化组件样式。

基本语法

// 1. 定义扩展样式函数
[@Extend](/user/Extend)(组件类型) function functionName(...args) {
  // 在此处编写要扩展的样式属性
}

// 2. 在组件中使用
组件()
  .functionName(...args) // 应用扩展样式

关键特性与用法

  1. 支持参数传递：[@Extend](/user/Extend)函数可以接收参数，使样式更具动态性。
[@Extend](/user/Extend)(Text) function fancyText(color: ResourceColor) {
  .fontColor(color)
  .fontSize(20)
  .fontWeight(FontWeight.Bold)
}

// 使用
Text('Hello')
  .fancyText(Color.Red) // 传递颜色参数
  1. 支持状态管理：通过@Styles装饰器定义的样式可以包含状态变量，实现动态样式切换。
[@Extend](/user/Extend)(Text) function activeText(active: boolean) {
  .fontColor(active ? Color.Blue : Color.Gray)
  .backgroundColor(active ? '#F5F5F5' : Color.Transparent)
}
  1. 链式调用：可以与其他样式方法链式调用，且遵循样式继承规则。
Text('Hello')
  .fancyText(Color.Red)
  .margin(10) // 可以继续添加其他样式

实际应用示例

场景：统一应用的主按钮样式

// 定义扩展样式
[@Extend](/user/Extend)(Button) function primaryButton() {
  .width('90%')
  .height(40)
  .fontSize(16)
  .fontColor(Color.White)
  .backgroundColor('#007DFF')
  .borderRadius(8)
}

// 在多个页面中使用
Button('确认')
  .primaryButton() // 统一应用样式

Button('提交')
  .primaryButton()

场景：创建带参数的标题样式

[@Extend](/user/Extend)(Text) function titleStyle(level: number) {
  .fontWeight(FontWeight.Bold)
  .fontColor('#333333')
  
  if (level === 1) {
    .fontSize(24)
  } else if (level === 2) {
    .fontSize(20)
  } else {
    .fontSize(16)
  }
}

// 使用
Text('一级标题')
  .titleStyle(1)
Text('二级标题')
  .titleStyle(2)

注意事项

  • [@Extend](/user/Extend)装饰的函数只能在组件样式属性中使用，不能用于逻辑处理。
  • 扩展样式遵循样式优先级规则，后应用的样式会覆盖先应用的样式。
  • 与@Styles装饰器不同，[@Extend](/user/Extend)专门用于扩展组件样式，而@Styles可以定义更通用的样式集合。

通过合理使用[@Extend](/user/Extend)装饰器，你可以显著提升HarmonyOS Next应用的样式代码的可维护性和一致性，同时减少重复代码。

回到顶部