鸿蒙Next中如何实现观察者模式？

在鸿蒙Next开发中，我想实现观察者模式来解耦组件间的通信，但不太清楚具体的实现方法。请问鸿蒙Next的ArkUI框架是否提供了内置的观察者模式支持？如果有的话，应该如何通过@Observed和@ObjectLink装饰器来建立数据观察关系？能否提供一个具体的代码示例，比如如何实现一个被观察对象状态变化时自动通知多个订阅者的功能？另外，这种实现方式和传统的观察者模式有什么异同点？

2 回复

鸿蒙Next里实现观察者模式？简单！

  1. 定义被观察者（Subject），用@Observed装饰类。
  2. 观察者用@Watch监听属性变化，像盯外卖进度一样专注！
  3. 数据一变，自动触发回调，比女朋友查岗还及时。
    代码示例？抱歉，这里写不下，但记住：少写bug，多观察生活！ 😄

更多关于鸿蒙Next中如何实现观察者模式？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next（HarmonyOS Next）中，实现观察者模式可以通过以下步骤完成，主要使用[@Observed](/user/Observed)和[@ObjectLink](/user/ObjectLink)装饰器来构建数据观察和更新机制。以下是一个清晰的示例：

实现步骤：

  1. 定义被观察的类：使用[@Observed](/user/Observed)装饰器标记类，使其可被观察。
  2. 定义观察者组件：在UI组件中使用[@ObjectLink](/user/ObjectLink)装饰器引用被观察的对象，当数据变化时自动更新UI。
  3. 更新数据：修改被观察对象的属性，触发UI重新渲染。

代码示例：

// 1. 导入必要的模块
import { Observed, ObjectLink, Component, struct } from '@kit.arkui';

// 2. 定义被观察的类，使用[@Observed](/user/Observed)装饰器
[@Observed](/user/Observed)
class UserData {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

// 3. 定义观察者组件，使用[@ObjectLink](/user/ObjectLink)引用被观察对象
@struct
@Component
struct UserProfile {
  [@ObjectLink](/user/ObjectLink) userData: UserData; // 引用被观察对象

  build() {
    Column() {
      Text(`Name: ${this.userData.name}`) // 显示数据
        .fontSize(20)
      Text(`Age: ${this.userData.age}`)
        .fontSize(20)
      Button('Increase Age')
        .onClick(() => {
          this.userData.age += 1; // 修改数据，触发UI更新
        })
    }
    .padding(10)
  }
}

// 4. 在入口组件中使用
@Entry
@Component
struct MainPage {
  @State user: UserData = new UserData('Alice', 25); // 初始化被观察对象

  build() {
    Column() {
      UserProfile({ userData: this.user }) // 传递被观察对象给子组件
    }
    .width('100%')
    .height('100%')
  }
}

解释：

  • @Observed：标记UserData类为可观察对象，当其属性变化时，会通知依赖它的组件。
  • @ObjectLink：在UserProfile组件中引用被观察对象，确保数据变化时组件自动更新。
  • 数据更新：点击按钮修改age属性，UI中的文本会自动刷新。

注意事项：

  • 确保使用[@Observed](/user/Observed)和[@ObjectLink](/user/ObjectLink)处理对象属性变化，对于简单类型（如字符串、数字），可以直接使用@State。
  • 这种方法适用于鸿蒙Next的ArkUI框架，基于声明式UI开发。

通过以上代码，你可以轻松在鸿蒙Next中实现观察者模式，实现数据与UI的响应式绑定。

回到顶部