鸿蒙每日知识分享 - 扩展原生组件样式

今天是 2025 年 1 月 22 日，今天要分享的鸿蒙知识点是如何扩展原生组件的样式。

假设我们页面上有三个 Text 组件，每个组件的字体大小都为 20，且字体颜色是蓝色。示例代码如下：

Column() {
  Text("文本1")
    .fontSize(20)
    .fontColor(Color.Blue)
  Text("文本2")
    .fontSize(20)
    .fontColor(Color.Blue)
  Text("文本2")
    .fontSize(20)
    .fontColor(Color.Blue)
}
.height('100%')
.width('100%')

与该篇分享的 @Style 装饰器解决的问题一样，该代码实现也存在重复代码，和如果后期需要修改要修改多个地方的问题。

但这个使用场景使用 @Style 装饰器是无法解决的，因为 @Style 装饰器只能包含通用属性，而字体大小和字体颜色并不属于组件的通用属性。

要解决这个问题就用到了另一个装饰器：@Extend。修改后的代码如下：

@Extend(Text) function title() {
  .fontColor(Color.Blue)
  .fontSize(20)
}

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text("文本1")
        .title()

      Text("文本2")
        .title()

      Text("文本2")
        .title()
    }
    .height('100%')
    .width('100%')
  }
}

@Extend 与 @Style 的不同点如下：

• @Extend 仅支持全局定义，不可定义在组件内；@Style 两种方式都支持。
• @Extend 修饰的函数可以有参数；@Style 修饰的函数不支持有参数。

相同点如下：

• 都不支持 export 导出。
• 都支持状态变量刷新 UI。