@Extend
语法
只能放在全局
@Extend(扩展组件)
function 方法名(参数) {
具体的扩展
}
例子
下面为一个Text组件做扩展，调用扩展的文字就会直接有字体大小和颜色
@Extend(Text)
function fontSizeAndColor() {
.fontSize(30)
.fontColor("#323843")
}
build() {
Text("哈哈哈哈哈哈").fontSizeAndColor()
}
也可以扩展一个带参数的
@Extend(Text)
function fontSizeAndColor(size: number) {
.fontSize(size)
.fontColor("#323843")
}
build() {
Text("哈哈哈哈哈哈").fontSizeAndColor(40)
}
@Styles
作用
抽取通用属性、事件
语法
1、当前仅支持通用属性和通用事件，且不支持传参
2、可以定义在组件内或全局，在全局定义时需在方法名前面添加function关键字，组件内定义时则不需要添加function关键字。
3、全局定义的不可以使用成员变量，组内定义的可以使用成员变量
4、组件内@Styles的优先级高于全局@Styles。框架优先找当前组件内的@Styles，如果找不到，则会全局查找。
5、只能在当前文件内使用，不支持export
全局定义
@Styles
function 方法名() {
// 通用属性、事件
}
组内定义
@Styles
方法名() {
// 通用属性、事件
}
例子
全局定义
@Styles
function CommonStyles() {
.width(80)
.height(100)
.backgroundColor(Color.Red)
}
@Component
export struct HomePage {
build() {
Text("哈哈哈哈哈哈").CommonStyles()
}
}
组内定义
@Component
export struct HomePage {
@State bgColor: Color = Color.Gray
@Styles
CommonStyles() {
.width(80)
.height(100)
.backgroundColor(this.bgColor)
.onClick(() => {
this.bgColor = Color.Red
})
}
build() {
Text("哈哈哈哈哈哈").CommonStyles()
}
}
@Builder
作用
自定义构建函数（结构、样式、事件）
语法
1、可以使用封装结构、样式、事件，且支持参数传参
2、可以定义在组件内或全局，在全局定义时需在方法名前面添加function关键字，组件内定义时则不需要添加function关键字。
3、全局定义的不可以使用成员变量，组内定义的可以使用成员变量，组内定义的调用时需要用this.来调用
全局定义
@Builder
function 方法名(参数) {
// 结构、样式、事件
}
组内定义
@Builder
方法名(参数) {
// 结构、样式、事件
}
例子
全局定义
@Builder
function itemBuilder(bgColor: ResourceColor) {
Column() {
Text("第一行")
Text("第二行")
}.backgroundColor(bgColor)
}
@Component
export struct HomePage {
build() {
itemBuilder(Color.Red)
}
}
组内定义
@Component
export struct HomePage {
@State title: string = "我是标题"
@Builder
itemBuilder(bgColor: ResourceColor) {
Column() {
Text(this.title)
Text("第二行")
}.backgroundColor(bgColor)
}
build() {
this.itemBuilder(Color.Red)
}
}
