HarmonyOS 鸿蒙Next:@Observed修饰的class A 作为class B的属性,在Entry中使用@State修饰class B 对象,在UI中显示class A的属性,无法刷新

发布于 1周前 作者 zlyuanteng 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next:@Observed修饰的class A 作为class B的属性,在Entry中使用@State修饰class B 对象,在UI中显示class A的属性,无法刷新

相关代码如下:

[@Entry](/user/Entry)
[@Component](/user/Component)
struct LinkTester {
  [@State](/user/State) classB: LinkClassB = new LinkClassB("class B", new LinkClassA("A in B"))

  build() {
    Column() {
      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) {
        this.nestClassLinkTester()
      }
    }
  }


  [@Builder](/user/Builder)
  nestClassLinkTester() {
    Text("====nest class start=====").textCommonStyleInLink()
    Text(this.classB.classA.title).textCommonStyleInLink()
    Button("change nest class").buttonCommonStyleInLink(() => {
      this.classB.classA.title =
        this.classB.classA.title == "A class from parent" ? "A class value" : "A class from parent"
    })
    NestClassChildPanel({ classB: this.classB })
    Text("====nest class end=====").textCommonStyleInLink()
  }
}


[@Component](/user/Component)
struct NestClassChildPanel {
  [@Link](/user/Link) classB: LinkClassB

  build() {
    Column() {
      Text("==== chld nest start=====").textCommonStyleInLink()
      Text(this.classB.classA.title).textCommonStyleInLink()
      Button("child change nest").buttonCommonStyleInLink(() => {
        this.classB.classA.title = this.classB.classA.title == "A from child" ? "A  child value" : "A from child"
      })
      Text("==== chld nest end=====").textCommonStyleInLink()
    }
  }
}

[@Extend](/user/Extend)(Text)
function textCommonStyleInLink() {
  .fontSize(20).fontColor(Color.Blue)
}

[@Extend](/user/Extend)(Button)
function buttonCommonStyleInLink(event: (event: ClickEvent) => void) {
  .backgroundColor(Color.Blue)
  .fontColor(Color.White)
  .backgroundColor(Color.Blue)
  .onClick(event)
}

[@Observed](/user/Observed)
class LinkClassA {
  title: string

  constructor(title: string) {
    this.title = title
  }
}

class LinkClassB {
  title: string
  classA: LinkClassA

  constructor(title: string, classA: LinkClassA) {
    this.title = title
    this.classA = classA
  }
}
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>

问题描述: 点击change nest classButton时,关于this.classB.classA.title显示的Text不会刷新,debug Button的点击事件是执行了的,请大家帮忙看一下原因。

3 回复
[@state](/user/state) + [@Link](/user/Link)   只能观察到对象第一层的修改,建议使用[@Observed](/user/Observed)+[@ObjectLink](/user/ObjectLink) 可以观测深层的修改
文档没读透,没了解清楚[@State](/user/State)刷新的限制,再看看[@Observed](/user/Observed)和[@ObjectLink](/user/ObjectLink)的关系才是搭配用的。

在HarmonyOS中,使用@Observed@State进行数据绑定和响应式更新时,需要确保数据流的正确性和响应性。如果class A的属性被@Observed修饰,而class B中的class A实例被@State修饰,理论上UI应该能够响应class A属性的变化。

如果UI不刷新,可能的原因包括:

  1. class A的属性变化未正确触发通知。
  2. class B中的class A实例引用未正确更新。
  3. UI组件未正确绑定到class A的属性。

检查这些方面,确保属性变化能被系统捕获并通知到UI。如果问题依旧没法解决请加我微信,我的微信是itying888。

回到顶部