1. @Builder装饰器 自定义构建函数
- 当页面有多个相同的UI结构时,开发者可以将重复使用的UI元素抽象成一个 @Builder 方法,该方法可在 build() 方法中调用多次,以完成UI结构的复用。
- @Builder 方法可以定义在组件内或全局。
- 组件内的 @Builder 方法可通过 this 访问当前组件的属性和方法,而全局的 @Builder 方法则不能。
- 组件内的 @Builder 方法只能用于当前组件,全局的 @Builder 方法导出(export)后,可用于整个应用。
1.1 组件内自定义构建函数
@Builder MyBuilderFunction() {}
this.MyBuilderFunction() {}
全局自定义构建函数
@Builder export function MyGlobalBuilderFunction() {}
MyGlobalBuilderFunction() {}
1.2 参数传递规则
- 按引用传递参数:当只有一个参数且参数为对象字面量时按引用传递,其余情况均为按值传递。
1.1 按引用传递时,若传递的参数为状态变量,则状态变量的变化将会触发 @Builder 方法内部UI的刷新;按值传递则不会。 - 按值传递参数
2.1 当传递的参数为状态变量时,状态变量的改变不会引起@Builder方法内的UI刷新。所以当使用状态变量的时候,推荐使用按引用传递。
class obj {
username: string = ''
}
@Builder function MyBuilder($$: obj) {
Column() {
Text(`hello ${$$.username}`)
.fontSize(18)
.fontColor(Color.Grey)
}
}
@Entry
@Component
struct UITest4 {
@State person_name: string = '花花'
build() {
Column() {
MyBuilder({username: this.person_name})
Button('点击修改')
.margin({top: 8})
.onClick(() => {
this.person_name = '七喜'
})
}
}
}
1.3 @Builder 方法和自定义组件的区别
- @Builder 方法和自定义组件虽然都可以使用UI复用的效果,但是俩者还是有着本质的区别,其中最为显著的一个区别就是自定义组件可以定义自己的状态变量,而 @Builder 方法则不能。
- 若复用的UI结构没有状态,推荐使用 @Builder 方法,否则使用自定义组件。