【鸿蒙学习笔记】@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)