HarmonyOS 鸿蒙Next 请问我这个代码如何使TestPageViewModel中的+1操作生效

发布于 1周前 作者 yibo5220 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 请问我这个代码如何使TestPageViewModel中的+1操作生效

class TestPageViewModel {
subViewModel: SubViewModel = new SubViewModel()
testStr: string = ‘test’

constructor() {
this.subViewModel.onTextClick = () => {
this.testStr += ‘1’
}
}
}

@Observed
class SubViewModel {
onTextClick?: () => void
}


@Entry
@Component
struct TestPage {
@State testPageViewModel: TestPageViewModel = new TestPageViewModel()

build() {
Column() {
Text(this.testPageViewModel.testStr)
Blank().height(100)
SubView({subViewModel: this.testPageViewModel.subViewModel})
.width(200)
.height(50)
.backgroundColor(Color.Brown)
}
.width(‘100s’)
.height(‘100%’)
.justifyContent(FlexAlign.Center)
.onClick(() => {
this.testPageViewModel.testStr += ‘2’
})
}
}

@Component
struct SubView {
@ObjectLink subViewModel: SubViewModel
build() {
Column() {
Text(‘subview’)
}
.width(‘100%’)
.height(‘100%’)
.onClick(() => {
this.subViewModel.onTextClick?.()
})
}
}
以上代码,我想在TestPageViewModel中的改变状态变量,没有触发UI的刷新,该怎么做呢

2 回复
使用[@Observed](/user/Observed)装饰类后,会给该类使用一层“代理”进行包装。当在组件中改变该类的成员变量时,会被该代理进行拦截,在更改数据源中值的同时,也会将变化通知给绑定的组件,从而实现观测变化与触发刷新。

当开发者在类的构造函数中对成员变量进行赋值或者修改时,此修改不会经过代理(因为是直接对数据源中的值进行修改),也就无法被观测到。所以,如果开发者在类的构造函数中使用定时器修改类中的成员变量,即使该修改成功执行了,也不会触发UI的刷新。

具体请参考以下文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-observed-and-objectlink-0000001774279618#ZH-CN_TOPIC_0000001811157490__在observed装饰类的构造函数中延时更改成员变量。                              如果非要this.subViewModel.onTextClick放在TestPageViewModel的构造函数内,只能在 this.subViewModel.onTextClick函数内返回结果,然后在subview的onClick函数内接收返回值,因为实际testStr的值和onClick函数内接收到的返回值是相同的,因此只能先通过 this.testPageViewModel.testStr = '',然后再给 this.testPageViewModel.testStr赋上返回值才能触发更新,这是目前唯一的取巧办法。

具体可参考以下示例:

@Observed
class TestPageViewModel {
  subViewModel: SubViewModel = new SubViewModel()
  testStr: string = 'test'

  constructor() {
    this.subViewModel.onTextClick = () => {
      this.testStr += '1'
      return this.testStr
    }
  }

}

@Observed
class SubViewModel {
  onTextClick?: () => string
}


@Entry
@Component
struct TestPage {
  @State testPageViewModel: TestPageViewModel = new TestPageViewModel()

  build() {
    Column() {
      Text(this.testPageViewModel.testStr)
      Blank().height(100)
      SubView({testPageViewModel: this.testPageViewModel})
        .width(200)
        .height(50)
        .backgroundColor(Color.Brown)
    }
    .width('100s')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .onClick(() => {
      this.testPageViewModel.testStr += '2'
    })
  }
}

@Component
struct SubView {
  @ObjectLink testPageViewModel: TestPageViewModel
  build() {
    Column() {
      Text('subview')
    }
    .width('100%')
    .height('100%')
    .onClick(() => {
    let res =   this.testPageViewModel.subViewModel.onTextClick?.()
      if (res){
        //因为此时this.testPageViewModel.testStr的值和res是相同的,所以只能通过先置空再赋值触发Ui刷新
        this.testPageViewModel.testStr = ''
        this.testPageViewModel.testStr = res
      }
    })
  }
}

在HarmonyOS鸿蒙系统中,要使TestPageViewModel中的+1操作生效,通常涉及数据绑定和事件处理。以下是一些基本步骤和注意事项,以确保你的代码能够正确执行:

  1. 确保ViewModel正确初始化:在你的页面或组件中,确保TestPageViewModel已经正确初始化并绑定到视图。

  2. 数据绑定:使用数据绑定机制(如双向数据绑定)将视图中的按钮或其他控件与ViewModel中的方法进行绑定。例如,如果你有一个按钮,点击它应该触发+1操作,那么你应该将按钮的点击事件绑定到ViewModel中负责+1操作的方法。

  3. 通知视图更新:确保ViewModel中的+1操作能够触发数据变更通知,这样视图才能感知到数据的变化并更新。在HarmonyOS中,这通常通过实现观察者模式或使用MVVM框架提供的数据绑定机制来完成。

  4. 检查日志和调试:如果+1操作没有生效,检查控制台日志以查找可能的错误或警告。使用调试工具逐步执行代码,查看+1操作是否被执行以及数据是否成功更新。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部