【鸿蒙学习笔记】@Extend装饰器：定义扩展组件样式

官方文档：@Extend装饰器：定义扩展组件样式

[Q&A] @Extend装饰器 作用

@Extend用于扩展原生组件样式。

[Q&A] @Extend装饰器 特点

１・@Extend仅支持在全局定义，不支持在组件内部定义。
２・@Extend支持封装指定组件的私有属性、私有事件和自身定义的全局方法。
３・@Extend装饰的方法支持参数。
３．１・@Extend装饰的方法的参数可以为function。
３．２・@Extend的参数可以为状态变量。

常见用法

@Extend(Text)
function opacityTextStyle() {
  .fontSize(CommonConstants.FONT_SIZE_SMALL)
  .fontColor(CommonConstants.COLOR_FONT)
  .opacity(CommonConstants.FONT_OPACITY)
}

@Extend(Text)
function opacityTextStyle2(size: number) {
  .fontSize(size)
  .fontColor(CommonConstants.COLOR_FONT)
  .opacity(CommonConstants.FONT_OPACITY)
}

@Extend(Text) 
function fancyText(weightValue: number, color: Color) {
  .fontStyle(FontStyle.Italic)
  .fontWeight(weightValue)
  .backgroundColor(color)
}

// 优化前
Text("test")
  .fontStyle(FontStyle.Italic)
  .fontWeight(100)
  .backgroundColor(Color.Blue)
Text("test")
  .fontStyle(FontStyle.Italic)
  .fontWeight(200)
  .backgroundColor(Color.Pink)
// 优化后
Text("test")
  .fancyText(100, Color.Blue)
Text("test")
  .fancyText(200, Color.Pink)