【HarmonyOS 4.0】UI结构复用

本文主要是介绍【HarmonyOS 4.0】UI结构复用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1. @Builder装饰器自定义构建函数

当页面有多个相同的UI结构时，开发者可以将重复使用的UI元素抽象成一个 @Builder 方法，该方法可在 build() 方法中调用多次，以完成UI结构的复用。
@Builder 方法可以定义在组件内或全局。
组件内的 @Builder 方法可通过 this 访问当前组件的属性和方法，而全局的 @Builder 方法则不能。
组件内的 @Builder 方法只能用于当前组件，全局的 @Builder 方法导出（export）后，可用于整个应用。

1.1 组件内自定义构建函数

// 1. 定义语法
@Builder MyBuilderFunction() {}// 2. 使用语法
this.MyBuilderFunction() {}

全局自定义构建函数

// 1. 定义语法
@Builder export function MyGlobalBuilderFunction() {}// 2. 使用语法
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 = '花花' // 当传递的参数为状态变量时，状态变量的改变才会引起@Builder方法内的UI刷新build() {Column() {MyBuilder({username: this.person_name})Button('点击修改').margin({top: 8}).onClick(() => {this.person_name = '七喜'})}}
}