鸿蒙页面开发 - 扩展组件样式 @Extend

这篇文章介绍一个装饰器 @Extend，它的主要作用是：用于扩展原生组件的样式

比如我们扩展 Text 组件的样式，为其添加一个默认的 fontSize 和 fontColor，如下：

@Entry
@Component
struct Index {
  build() {
    Text('碧玉妆成一树高，万条垂下绿丝绦。')
      .TextExtend()
  }
}

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

通过上面的代码，我们就为 Text 组件扩展了一些样式，让其拥有了默认的字体大小和字体颜色

效果如下：

因为@Extend是作用于单个组件，所以也支持组件的所有属性和事件（包括组件的私有属性），这点和 @Styles 不同

并且他 只能在全局定义，不支持组件内部定义

@Extend支持传参（@Styles不支持）

@Entry
@Component
struct Index {
  build() {
    Text('碧玉妆成一树高，万条垂下绿丝绦。')
      .TextExtend(22)
  }
}

@Extend(Text)
function TextExtend(fontSize: number) {
  .fontSize(fontSize)
  .fontColor(Color.Blue)
}

@Extend传的参数，支持传入状态变量，当变量改变时，UI也会重新渲染

@Entry
@Component
struct Index {
  @State fontSize: number = 16

  build() {
    Text('碧玉妆成一树高，万条垂下绿丝绦。')
      .TextExtend(this.fontSize)
      .onClick(() => {
        this.fontSize = 24
      })
  }
}

@Extend(Text)
function TextExtend(fontSize: number) {
  .fontSize(fontSize)
  .fontColor(Color.Blue)
}

效果如下：

@Extend支持调用其他方法，继承其他方法的属性

比如在 TextExtend_1 中定义字体的大小、颜色。在 TextExtend_2 定义背景颜色，并且在 TextExtend_2 中调用 TextExtend_1 方法

@Entry
@Component
struct Index {
  build() {
    Text('碧玉妆成一树高，万条垂下绿丝绦。')
      .TextExtend_2()
  }
}

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

@Extend(Text)
function TextExtend_2() {
  .backgroundColor(Color.Gray)
  .TextExtend_1()
}

@Extend装饰的方法，参数可以为function，作为Event事件的句柄。

@Extend(Text) function makeMeClick(onClick: () => void) {
   .backgroundColor(Color.Blue)
   .onClick(onClick)
}

@Entry
@Component
struct FancyUse {
   @State label: string = 'Hello World';

   onClickHandler() {
      this.label = 'Hello ArkUI';
   }

   build() {
      Row({ space: 10 }) {
         Text(`${this.label}`)
            .makeMeClick(() => {this.onClickHandler()})
      }
   }
}

总结

1. @Extend 支持组件的私有属性和私有方法。并且只能在全局定义，不支持组件内部定义 （@Styles只支持通用属性和通用方法，可以在全局定义，也可以在组件内定义）
2. @Extend 支持传参，也可以传入状态变量，当变量改变的时候，UI也会重新渲染（@Style不支持传参）

最后

如果大家有不理解的地方可以留言，或自行阅读文档 文档地址