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