HarmonyOS 鸿蒙Next 怎么实现状态变量变化时，触发指定函数

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

HarmonyOS 鸿蒙Next 怎么实现状态变量变化时，触发指定函数

请教一个状态触发的问题。

当前流程：
1：使用AppStorage(key, value)保存状态值
2：相应的组件中使用@StorageProp(key) value进行关联
3：根据value的值更新页面.

因为页面逻辑复杂，希望可以实现如下的效果，
新定义状态变量：
@State UIState
新定义状态处理函数
doUIState(){
//按value的值，更新UIState
}

当value产生变化时，能触发指定函数 doUIState，然后再通过UIState更新页面。


更多关于HarmonyOS 鸿蒙Next 怎么实现状态变量变化时，触发指定函数的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
2 回复

请参考以下示例：

import { window } from '[@kit](/user/kit).ArkUI'

import { BusinessError } from '[@kit](/user/kit).BasicServicesKit'

[@Entry](/user/Entry)

[@Component](/user/Component)

struct ScrollExample {

  scroller: Scroller = new Scroller()

  [@State](/user/State) testRowStr: string = '50%'

  [@State](/user/State) widthDia: string = '50%'

  [@StorageProp](/user/StorageProp)('name') [@Watch](/user/Watch)('doUIState') name:string = ''

  [@State](/user/State) UIState:number = 0

  aboutToAppear(): void {

  AppStorage.setOrCreate('name','小明')

    console.log(`qwer ===From AppStorage ${this.name}`)

  }

  doUIState(){

    //按value的值，更新UIState

    if (this.name == '小明') {

      this.UIState = 0

    }else {

      this.UIState = 1

    }

  }

  build() {

    Column() {

        Column(){

          Text('更新性别')

            .fontSize(20)

            .onClick(()=>{

              if (this.name == '小明' ) {

                AppStorage.setOrCreate('name','小花')

              }else {

                AppStorage.setOrCreate('name','小明')

              }

            })

          Text(this.UIState ==0?'男':'女')

            .fontSize(20)

            .onClick(()=>{

            })

        }.width('100%').height('100%').backgroundColor(Color.Orange)



      .backgroundColor(Color.Gray)

    }.width('100%').height('100%').backgroundColor(0xDCDCDC)

  }

}

更多关于HarmonyOS 鸿蒙Next 怎么实现状态变量变化时，触发指定函数的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，实现状态变量变化时触发指定函数，可以利用数据绑定和观察者模式。具体步骤如下：

  1. 定义状态变量：在ViewModel或相应逻辑类中，定义所需的状态变量，并使用@Published或@ObservableObject（视框架具体实现而定）进行标记，使其具备被观察的能力。

  2. 创建观察者：在UI组件或需要响应状态变化的类中，通过订阅状态变量的变化来创建观察者。例如，使用onReceive或objectWillChange等API进行订阅。

  3. 实现触发函数：在观察者内部，实现当状态变量变化时需要执行的逻辑函数。该函数会在订阅的状态变量发生变化时被自动调用。

  4. 绑定状态变量：在UI层，将状态变量绑定到相应的UI组件上，确保UI能够实时反映状态变量的变化。

示例代码（伪代码，具体实现依赖实际框架和编程语言）：

class MyViewModel: ObservableObject {
    @Published var stateVar: Bool = false
}

struct MyView: View {
    @ObservedObject var viewModel: MyViewModel

    var body: some View {
        Text("State: \(viewModel.stateVar)")
            .onReceive(viewModel.$stateVar) { newValue in
                // 触发指定函数
                myFunction(newValue)
            }
    }

    func myFunction(_ newValue: Bool) {
        // 实现逻辑
    }
}

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

回到顶部