仓颉应用开发之——状态管理@Watch(10)

发表于 分类于 ， ， 阅读时长 ≈ 1 分钟

一 概述

  • @Watch的作用
  • @Watch注意事项
  • @Watch代码示例

二 @Watch的作用

  • @Watch 用于监听状态变量的变化
  • 给状态变量增加一个@Watch装饰器，通过@Watch注册一个回调方法onChanged，当状态变量count被改变时，触发onChanged回调。

三 @Watch注意事项

  • 可以监听 @State 、 @Prop 、 @Link 、 @Provide 、 @Consume 、 @StorageLink 和 @StorageProp 装饰的变量的变化。
  • 被监听的变量必须声明类型

四 @Watch代码示例

4.1 示例

1-自定义组件代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
package ohos_app_cangjie_entry.pages
import ohos.base.*
internal import ohos.component.*
internal import ohos.state_manage.*
import ohos.state_macro_manage.*
import ohos_app_cangjie_entry.bean.*

@Component
public class TotalView {

    @Link @Watch[onCountUpdated] var count:Int64 = 0;
    @State var total: Int64 = 0;

  // @Watch 回调
  func onCountUpdated() {
    this.total += this.count;
  }

  func build() {
    Text("Total: ${this.total}")
  }
}

2-调用组件并传递参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
package ohos_app_cangjie_entry
import ohos.base.*
internal import ohos.component.*
internal import ohos.state_manage.*
import ohos.state_macro_manage.*
import ohos_app_cangjie_entry.pages.*
import ohos_app_cangjie_entry.bean.*

@Entry
@Component
class MyView {
    @State var count: Int64 = 0;
    func build() {
          Column(20) {
            Button("add to basket").onClick{ =>
                this.count++
            }
            Text("Count=${this.count}")
            TotalView(count:this.count)
        }
    }
}

4.2 效果图

五 参考

  • HarmonyOS Beta5 仓颉—@Watch
  • HarmonyOS Beta5 ArkTS—@Watch装饰器