OpenHarmony ETS 类状态@Observed和@ObjectLink图文示例秒懂用法原创

陈浩南xxx

发布于 2022-4-12 10:03

浏览

0收藏

简单的变量传值：OpenHarmony ETS 状态变量(@State，@Prop，@Link) 图文秒懂用法-OpenHarmony技术社区-51CTO.COM

跨组件传值：OpenHarmony ETS 类状态 @Consume和@Provide 图文示例秒懂用法-OpenHarmony技术社区-51CTO.COM

1，@ObjectLink和@Observed作用

由于 @State无法监听到类嵌套类的属性，@ObjectLink可以监听到类嵌套@Observed修饰的类的属性

@Observed

装饰class ，表示此对象中的数据变更将被UI页面管理

@ObjectLink

@ObjectLink用于修饰变量，并且不可以初始化
不能用在@entry修饰的组件中

OpenHarmony ETS 类状态@Observed和@ObjectLink图文示例秒懂用法-鸿蒙开发者社区

@Observed class ClassAAA {
  public numA: number
  public classB: ClassBBB

  constructor(cValue: ClassBBB, aValue: number = 0) {
    this.classB = cValue;
    this.numA = aValue;
  }
}

@Observed
class ClassBBB {
  public numB: number

  constructor(aValue: number = 0) {
    this.numB = aValue;
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

Entry部分

  @State classA: ClassAAA = new ClassAAA(new ClassBBB());
1.

子组件部分

  @ObjectLink  classB: ClassBBB
1.

2，完整代码

@Observed class ClassAAA {
  public numA: number
  public classB: ClassBBB

  constructor(cValue: ClassBBB, aValue: number = 0) {
    this.classB = cValue;
    this.numA = aValue;
  }
}

@Observed
class ClassBBB {
  public numB: number

  constructor(aValue: number = 0) {
    this.numB = aValue;
  }
}

@Entry
@Component
struct Observer_page {
  @State classA: ClassAAA = new ClassAAA(new ClassBBB());

  build() {
    Column() {

      Text(' 注意：@State无法监听到类嵌套类的属性，@ObjectLink可以监听到类嵌套@Observed修饰的类的属性。')
        .fontColor('#FF0000')
        .fontSize(24)
        .margin({ top: 20 })

      Text('父组件').fontSize(24).margin({ top: 20 })
      Text(`ClassAAA的numA值：${this.classA.numA}`)
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
        .onClick(() => {
          this.classA.numA += 1
        })

      Text('父组件不会刷新').fontSize(16).margin({ top: 20 })  .fontColor('#FF0000')
      Text(`ClassBBB的numB值：${this.classA.classB.numB}`)
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
        .onClick(() => {
          // 修改值，只会导致 @ObjectLink 装饰的变量所在的组件被刷新，当前组件不会刷新
          this.classA.classB.numB += 1
        })

      Text('子组件').fontSize(24).margin({ top: 20 })

      Observer_page2({ classB: this.classA.classB })
    }
    .width('100%')
    .height('100%')
  }
}

@Component
struct Observer_page2 {
  @ObjectLink  classB: ClassBBB

  build() {
    Column() {
      Text('子组件被刷新').fontSize(16).margin({ top: 20 })  .fontColor('#FF0000')

      Text(`ClassBBB的numB值：${this.classB.numB}`)
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
        .onClick(() => {
          // 修改值，只会导致 @ObjectLink 装饰的变量所在的组件被刷新
          this.classB.numB += 1
        })

    }.width('100%')
    .height('100%')
  }
}



1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.