1、自定义构建函数
1.1、构建函数- @Builder
如果你不想在直接抽象组件，ArkUI还提供了一种更轻量的UI元素复用机制 @Builder，可以将重复使用的UI元素抽象成一个方法，在 build 方法里调用。称之为自定义构建函数
- 用法- 使用@Builder修饰符修饰
1.1.1、全局自定义 @Builder function name () {}
全局自定义函数指在struct外面的函数
@Builder
function getCellContent(leftTitle: string, rightValue: string) { // 全局自定义函数带function
Row() {
Row() {
Text(leftTitle)
Text(rightValue)
}
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
.padding({
left: 15,
right: 15
})
.borderRadius(8)
.height(40)
.backgroundColor(Color.White)
}.padding({
left: 10,
right: 10
})
}
在组件中使用
Column({space:10}) {
getCellContent("时间", "2023-12-12")
getCellContent("位置", "上海")
getCellContent("爱好", "乒乓")
}
全局自定义函数的问题
● 全局的自定义构建函数可以被整个应用获取（下一代可用-当前4.0暂不支持），不允许使用this和bind方法。
● 如果不涉及组件状态变化，建议使用全局的自定义构建方法。
● 补一句-如果数据是响应式的-此时该函数不会自动渲染-哪怕是全局自定义函数，不可被其他文件引用
将数据声明为State响应式数据
class CardClass {
time: string = ""
location: string = ""
type: string = ""
}
@State formData: CardClass = {
time: "2023-12-12",
location: '回龙观',
type: '漏油'
}
传递数据，绑定为对应字段
Column({ space: 10 }) {
getCellContent("异常时间", this.formData.time)
getCellContent("异常位置", this.formData.location)
getCellContent("异常类型", this.formData.type)
Button("修改数据").onClick(() => {
this.formData.location = "望京"
})
}
.width('100%')
我们发现，点击修饰是没有任何反应的，说明此时即使你用了State，但是此时的全局builder依然不更新
1.1.2、组件内定义- 语法 @Builder name () {}
@Entry
@Component
struct BuilderCase {
@Builder
getCellContent(leftTitle: string, rightValue: string) { // 组件内自定义函数不带function
}
}
调用
this.getCellContent("异常时间", this.formData.time)
调用多了this，其他和全局属性一样，没有任何变化，此时我们发现修改数据依然没有任何变化
注意： 我们刚刚传过去的是类型，string是一个基础数据类型，它是按值传递的，不具备响应式更新的特点
总结
- 全局Builder函数和组件Builder构建函数可以实现一种轻量级的UI复用，
- 区别: 全局自定义构建函数不允许使用this，bind，它适合一种纯渲染的UI结构；组件内自定义Builder可以实现this调用
1.2、参数传递
自定义构建函数的参数传递有按值传递和按引用传递两种，均需遵守以下规则：
- 参数的类型必须与参数声明的类型一致，不允许undefined、null和返回undefined、null的表达式。
- 在自定义构建函数内部，不允许改变参数值。如果需要改变参数值，且同步回调用点，建议使用@Link。
- @Builder内UI语法遵循UI语法规则。
- 只有传入一个参数，且参数需要直接传入对象字面量才会按引用传递该参数，其余传递方式均为按值传递。
1)、使用了string这种基础数据类型，即使它属于用State修饰的变量，也不会引起UI的变化
2)、按引用传递参数时，传递的参数可为状态变量，且状态变量的改变会引起@Builder方法内的UI刷新。ArkUI提供$$作为按引用传递参数的范式。
ABuilder( $$ : 类型 );
函数名称( obj: 类型 );
3)、也就是我们需要在builder中传入一个对象， 该对象使用$$(可使用其他字符)的符号来修饰，此时数据具备响应式了
@Entry
@Component
struct BuilderCase {
@State formData: CardClass = { // state修饰的状态变量
time: "2023-12-12",
location: '回龙观',
type: '漏油'
}
@Builder
getCellContent($$: CellParams) { // 传入一个对象，$$可以为任意字符
Row() {
Row() {
Text($$.leftTitle)
Text($$.rightValue)
}
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
.padding({
left: 15,
right: 15
})
.borderRadius(8)
.height(40)
.backgroundColor(Color.White)
}.padding({
left: 10,
right: 10
})
}
build() {
Row() {
Column() {
Column({ space: 10 }) {
this.getCellContent({ leftTitle: '异常时间', rightValue: this.formData.time }) // 传入一个对象，且有state修饰符修饰的变量
this.getCellContent({ leftTitle: '异常位置', rightValue: this.formData.location }) // 传入一个对象，且有state修饰符修饰的变量
this.getCellContent({ leftTitle: '异常类型', rightValue: this.formData.type })
}
.width('100%')
Button("修改数据").onClick(() => {
this.formData.location = "望京" // 修改state修改是的对象的属性，可以导致UI更新
})
}
.width('100%')
}
.height('100%')
.backgroundColor('#ccc')
}
}
● 使用 @Builder 复用逻辑的时候，支持传参可以更灵活的渲染UI
● 参数可以使用状态数据，通过对象的方式传入 @Builder
