鸿蒙HarmonyOS开发：@Observed装饰器和@ObjectLink装饰器：监听嵌套类对象属性变化

一、装饰器

• @State装饰器：组件内状态
• @Prop装饰器：父子单向同步
• @Link装饰器：父子双向同步
• @Provide装饰器和@Consume装饰器：与后代组件双向同步

上文所述的装饰器仅能观察到第一层的变化，但是在实际应用开发中，应用会根据开发需要，封装自己的数据模型。对于多层嵌套的情况，比如二维数组，或者数组项class，或者class的属性是class，他们的第二层的属性变化是无法观察到的。这就引出了@Observed/@ObjectLink装饰器。

二、概述

@ObjectLink和@Observed类装饰器用于在涉及嵌套对象或数组的场景中进行双向数据同步：

被@Observed装饰的类，可以被观察到属性的变化；

子组件中@ObjectLink装饰器装饰的状态变量用于接收@Observed装饰的类的实例，和父组件中对应的状态变量建立双向数据绑定。这个实例可以是数组中的被@Observed装饰的项，或者是class object中的属性，这个属性同样也需要被@Observed装饰。

@Observed用于嵌套类场景中，观察对象类属性变化，要配合自定义组件使用，如果要做数据双/单向同步，需要搭配@ObjectLink或者@Prop使用。

三、限制条件

使用@Observed装饰class会改变class原始的原型链，@Observed和其他类装饰器装饰同一个class可能会带来问题。

@ObjectLink装饰器不能在@Entry装饰的自定义组件中使用。

四、装饰器说明

五、Toggle组件

组件提供勾选框样式、状态按钮样式及开关样式。

1、子组件

仅当ToggleType为Button时可包含子组件。

2、接口

Toggle(options: { type: ToggleType, isOn?: boolean })

• 参数

3、ToggleType枚举

4、事件

开关状态切换时触发该事件。

onChange(callback: (isOn: boolean) => void)

• 参数

六、示例演示

本示例演示联系人管理功能页面。
可以新增，删除，收藏，展开手机号登功能。
使用到的组件间相互通信功能
@Prop装饰器：父子单向同步
@Link装饰器：父子双向同步
@Watch装饰器监听状态变量的变化
@Observed装饰器和@ObjectLink装饰器：嵌套类对象属性变化
@Extend装饰器：定义扩展组件样式
Toggle组件

1、代码

// 定义变量ID，默认从1开始，自增
let id = 1

// @Observed装饰的类
@Observed
class Person {
  name: string
  phone: string
  isCollect: boolean = false
  id: number

  constructor(name: string, phone: string) {
    // id自增
    this.id = id++
    this.name = name
    this.phone = phone
  }
}

// 随机姓名方法，为了演示简写
function getRandomName() {
  return "张三" + Math.floor(Math.random() * 100)
}

//随机手机号，为了演示简写
function getRandomPhone() {
  return "1" + (Math.floor(Math.random() * 9000000000) + 1000000000)
}

@Entry
@Component
struct ContactsList {
  // 联系人列表
  @State contactsList: Person[] = [new Person(getRandomName(), getRandomPhone()), new Person(getRandomName(), getRandomPhone())]
  // 当前展开的联系人ID
  @State currentExpandID: number = 0
  // 是否点击选中
  @State isSelect: boolean = false
  // 选中的联系人ID列表
  @State selectIdList: number[] = []

  build() {
    Column() {
      Row({ space: 10 }) {
        Text("联系人管理")
          .fontSize(20)
        Blank()
        Button(this.isSelect ? "取消" : "选中")
          // 扩展组件样式
          .globalButtonStyle(Color.Gray)
            // 点击切换选中/取消按钮事件
          .onClick(() => {
            this.isSelect = !this.isSelect
            this.selectIdList = []
          })
        Button("+")
          // 扩展组件样式
          .globalButtonStyle(Color.Gray)
          .onClick(() => {
            // 新增联系人
            this.contactsList.push(new Person(getRandomName(), getRandomPhone()))
          })
      }
      .width("100%")
      .padding(10)

      List({ space: 10 }) {
        ForEach(this.contactsList, (item: Person) => {
          ListItem() {
            // 观察对象类属性变化，要配合自定义组件使用
            ContactsItem({ item,
              currentExpandID: $currentExpandID,
              isSelect: this.isSelect,
              selectIdList: $selectIdList })
          }
        })

      }.padding(10)
      .layoutWeight(1)

      if (this.isSelect) {
        Button("删除")
          .margin(10)
            // 扩展组件样式
          .globalButtonStyle(Color.Red)
            // 删除按钮点击事件
          .onClick(() => {
            this.contactsList = this.contactsList.filter((item: Person) => {
              return !this.selectIdList.includes(item.id)
            })
          })
      }

    }
    .width('100%')
    .height('100%')
    .backgroundColor("#f7f7f7")
  }
}

// 自定义组件
@Component
struct ContactsItem {
  // 数据双向同步，需要搭配@ObjectLink
  @ObjectLink item: Person
  // 组件内状态
  @State isExpand: boolean = false
  // 父子双向同步 监听状态变化
  @Link @Watch("onChangeCurrentID") currentExpandID: number
  // 父子单向同步
  @Prop isSelect: boolean
  // 父子双向同步
  @Link selectIdList: number[]

  // 监听状态变量变化回调
  onChangeCurrentID() {
    if (this.item.id != this.currentExpandID) {
      this.isExpand = false
    }
  }

  build() {
    Column() {
      Row({ space: 10 }) {
        // 复选框
        if (this.isSelect) {
          Toggle({ type: ToggleType.Checkbox })
            // 选中状态发生变化时的事件
            .onChange((val) => {
              if (val) {
                this.selectIdList.push(this.item.id)
              } else {
                let index: number = this.selectIdList.indexOf(this.item.id)
                this.selectIdList.splice(index, 1)
              }
            })
        }
        // 头像
        Image($r("app.media.picture"))
          .width(30)
          .height(30)
        // 姓名
        Text(this.item.name)
          .fontSize(18)

        Blank()
        // 收藏
        Image(this.item.isCollect ? $r("app.media.collect_select") : $r("app.media.collect"))
          .width(26)
          .height(26)
          .onClick(() => {
            // 第二层的属性值变化
            this.item.isCollect = !this.item.isCollect
          })
      }
      .height(40)
      .width("100%")

      // 手机号
      if (this.isExpand) {
        Divider()
          .margin({ top: 10, bottom: 6 })
          .color("#EEEEEE")

        Row() {
          Text("手机号码：" + this.item.phone)
            .fontSize(16)
        }
        .height(30)
        .width("100%")
      }
    }
    .width("100%")
    .padding(10)
    .borderRadius(6)
    .backgroundColor(Color.White)
    // 点击展开显示手机号码
    .onClick(() => {
      this.isExpand = !this.isExpand
      this.currentExpandID = this.item.id
    })
  }
}

// 定义扩展组件样式
@Extend(Button) function globalButtonStyle(color: Color) {
  .height(30)
  .fontSize(14)
  .backgroundColor(color)
}
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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190

2、效果

• 点击新增按钮，可以新增联系人
• 点击收藏按钮，可以切换是否收藏
  
• 点击联系人，可以展开当前联系人，查看手机号码
• 点击上面选择按钮，可以切换选择页面
• 点击联系人前面复选框，可以选中联系
• 点击删除按钮，可以删除选中的联系人