官方文档:@Extend装饰器:定义扩展组件样式
[Q&A] @Extend装饰器 作用
@Extend
用于扩展原生组件样式。
[Q&A] @Extend装饰器 特点
1・@Extend仅支持在全局定义
,不支持在组件内部定义。
2・@Extend支持封装指定组件的私有属性
、私有事件
和自身定义的全局方法
。
3・@Extend装饰的方法支持参数
。
3.1・@Extend装饰的方法的参数可以为function
。
3.2・@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)