1. @Styles装饰器：定义组件重用样式
// 当前@Styles仅支持通用属性和通用事件。
// @Styles可以定义在组件内或全局，在全局定义时需在方法名前面添加function关键字，组件内定义时则不需要添加function关键字。
//只能在当前文件内使用，不支持export。
// 不支持在@Styles方法内使用逻辑组件，在逻辑组件内的属性不生效。
//只能支持通用属性 通用方法事件
// 组件内@Styles的优先级高于全局@Styles。
// 框架优先找当前组件内的@Styles，如果找不到，则会全局查找。
@Entry
@Component
struct StylesPage {
@State message: string = 'Hello World';
@Styles
fancy() {
.id('StylesPageHelloWorld')
}
build() {
RelativeContainer() {
Text(this.message).fancy()
Text(this.message)
.id('StylesPageHelloWorld')
.fontSize(50)
.fontWeight(FontWeight.Bold)
.alignRules({
center: { anchor: '__container__', align: VerticalAlign.Center },
middle: { anchor: '__container__', align: HorizontalAlign.Center }
})
Text(this.message)
.id('StylesPageHelloWorld')
.fontSize(50)
.fontWeight(FontWeight.Bold)
.alignRules({
center: { anchor: '__container__', align: VerticalAlign.Center },
middle: { anchor: '__container__', align: HorizontalAlign.Center }
})
}
.height('100%')
.width('100%')
}
}
2.@Builder装饰器：自定义构建函数
//参数传递规则
//自定义构建函数的参数传递有按值传递和按引用传递两种，均需遵守以下规则：
//参数的类型必须与参数声明的类型一致，不允许undefined、null和返回undefined、null的表达式。
//在@Builder修饰的函数内部，不允许改变参数值。
//@Builder内UI语法遵循UI语法规则。
//只有传入一个参数，且参数需要直接传入对象字面量才会按引用传递该参数，其余传递方式均为按值传递。
class Tmp {
p:number = 0;
}
@Entry
@Component
struct BuilderPage {
@State count: number = 0
// 调用@Builder装饰的函数默认按值传递。
// 当传递的参数为状态变量时，状态变量的改变不会引起@Builder方法内的UI刷新。
// 所以当使用状态变量的时候，推荐使用按引用传递。
@Builder
builderFn(count:number){
Text('count='+count.toString())
}
// 按引用传递
@Builder
builderF2(params:Tmp){
Text('count2='+params.p.toString())
}
build() {
Column() {
this.builderFn(this.count)//默认按值传递
// @Builder通过按引用传递的方式传入参数，才会触发动态渲染UI，并且参数只能是一个。请参考按引用传递参数。
this.builderF2({p:this.count})// 按引用传递
Button('count++').onClick(()=>{
this.count++
})
}
.height('100%')
.width('100%')
}
}
3.@Extend装饰器：定义扩展组件样式
// 扩展组件样式
// @Extend支持封装指定组件的私有属性、私有事件和自身定义的全局方法。
// @Extend的参数可以为状态变量，当状态变量改变时，UI可以正常的被刷新渲染。
// 和@Styles不同，@Extend仅支持在全局定义，不支持在组件内部定义。
// 和@Styles不同，@Extend装饰的方法支持参数，开发者可以在调用时传递参数，调用遵循TS方法传值调用。
// @Extend装饰的方法的参数可以为function，作为Event事件的句柄。
@Extend(Text)
function fancy(fontSizeValue: number) {
.fontSize(fontSizeValue)
}
@Entry
@Component
struct ExtendPage {
@State fontSizeValue: number = 20
build() {
RelativeContainer() {
Text('Fancy')
.fancy(this.fontSizeValue)
.onClick(() => {
this.fontSizeValue = 120
})
}
.height('100%')
.width('100%')
}
}
