HarmonyOS V2 状态管理中@Build 方法状态更新_传递参数

观察上面这个模块的样式布局,可以使用@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,而是需要创建一个对象,这是因为:

  1. 调用@Builder装饰的函数默认按值传递。当传递的参数为状态变量时,状态变量的改变不会引起@Builder函数内的UI刷新。所以当使用状态变量的时候,推荐使用按引用传递。
  2. 按引用传递参数时,传递的参数可为状态变量,且状态变量的改变会引起@Builder函数内的UI刷新。
  3. 由@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组件数据。