
观察上面这个模块的样式布局,可以使用@Build 修饰符来实现布局的复用,比如可以这样:
@Local buildingName: string = ""
@Builder
OutSelectBuild(param: FieldParam) {
Column() {
Row() {
Text(param.key).fontSize(14).fontColor("#646566")
Text(" *").fontSize(14).fontColor("#F64444")
}.width("100%")
Row() {
Text(param.value || "请选择").fontSize(14).fontColor(param.value?"#646566": "#C2C5CC").layoutWeight(1)
Image($r("app.media.icon_right_arrow")).width(18).height(18)
}.padding({ top: 8, bottom: 8 })
.onClick(() => {
switch (param.key) {
case "外出地点":
this.pageStack.pushPath({
name: "SelectBuildingPage", onPop: (popInfo) => {
if (popInfo != null) {
this.houseData = popInfo.result as HouseSearchBean
this.buildingName = this.houseData.BuildingName
}
}
})
break
case "外出事项":
break
case "开始时间":
break
case "结束时间":
break
}
})
}
}在页面中使用@Build修饰的组件用法,按引用传递参数支持更新组件;
this.OutSelectBuild({ key: "外出地点", value: this.buildingName })由@ObservedV2和@Trace装饰的类对象实例具备深度观测属性变化的能力。
@ObservedV2
class FieldParam {
key: string = "外出地点"
@Trace value: string = ""
}为什么这个复用方法不直接传递两个参数,一个 key和 value,而是需要创建一个对象,这是因为:
- 调用@Builder装饰的函数默认按值传递。当传递的参数为状态变量时,状态变量的改变不会引起@Builder函数内的UI刷新。所以当使用状态变量的时候,推荐使用按引用传递。
- 按引用传递参数时,传递的参数可为状态变量,且状态变量的改变会引起@Builder函数内的UI刷新。
- 由@ObservedV2和@Trace装饰的类对象实例具备深度观测属性变化的能力。在@ComponentV2装饰的自定义组件中,当调用全局Builder或局部Builder且使用值传递的方式传递参数时,修改@Trace装饰的对象属性可以触发UI刷新。
这里的外出地点,点击后会跳转到一个选择楼盘地址的页面,选中楼盘后,会返回到当前录外勤页面,这时候会在该页面接受一个选中楼盘的实体类,通过给定义全局变量 buildingName赋值,可以改变对应复用组件的数据刷新:
this.pageStack.pushPath({
name: "SelectBuildingPage", onPop: (popInfo) => {
if (popInfo != null) {
this.houseData = popInfo.result as HouseSearchBean
this.buildingName = this.houseData.BuildingName
}
}
})所以当我们需要刷新@Builder装饰的组件的时候,需要采用引用传递的方式,且如果是V2装饰器,还需要在引用参数对象中配合@ObservedV2和@Trace修饰符来使用,修改@Trace修饰的值,即可刷新@Builder组件数据。
















