【鸿蒙生态共建】一文讲清窗口(window)的基础用法(三)数据状态变更的同步-《精通HarmonyOS NEXT :鸿蒙App开发入门与项目化实战》读者福利

15 阅读4分钟

 在鸿蒙(HarmonyOS)系统中使用ArkTS开发中,window(窗口)模块是实现多窗口管理、灵活交互和系统资源优化的核心机制,尤其对需要复杂交互(如分屏、悬浮操作)或跨设备适配的应用不可或缺。

同时,使用window来承载UI组件的展示及交互,具备更好的独立性,更适合于三方库中的UI组件的实现,减少对于宿主App的UI环境的依赖。

本篇内容是《精通HarmonyOS NEXT :鸿蒙App开发入门与项目化实战》这本书第7章内容的延续,是咱这本书读者的福利,内容以window的使用时的事件同步(子窗口向父窗口)为主体,包括通过AppStorage+Watch、emitter和eventHub来实现。

对本书感兴趣的同学可以点击以下链接进行购买,及参加 我的班级(华为官方)共同学习

1.创建示例工程及基础配置

在开始之前,我们创建一个名称为TextWindow的工程,可以使用本系列中的工程,可以参考上面的第15、16的链接。

2.通过AppStorage+Watch实现事件同步

AppStorage+Watch实现事件同步的方式,需要先使用AppStorage.setOrCreate 方法指定某个key值变量。如下代码通常在onWindowStageCreate(或其它)方法中实现

AppStorage.setOrCreate("AppStorageWatchEventStatus","");

之后在index文件中实现与 AppStorage 中的 "AppStorageWatchEventStatus" 建立双向绑定,并监听该变量的变化,当值发生变化时,自动调用指定的方法 appStorageWatchEventStatusChange

struct Index {
  @StorageLink("AppStorageWatchEventStatus") @Watch("appStorageWatchEventStatusChange") appStorageWatchEventStatus:string = "";

  appStorageWatchEventStatusChange() {
    console.log('俩毛豆 Index appStorageWatchEventStatusChange ' + this.appStorageWatchEventStatus);
  }
}

在SubWindowPage文件中实现与 AppStorage 中的 "AppStorageWatchEventStatus" 建立双向绑定,并在页面将要展示时更改该值

struct SubWindowPage {
  @StorageLink("AppStorageWatchEventStatus") appStorageWatchEventStatus:string = "";

  aboutToAppear(): void {
    this.appStorageWatchEventStatus = "俩毛豆"
  }
}

编译运行示例工程,如下图

点击 窗口展示,进入子窗口,如下图

这时查看log,Index组件中,收到了在SubWindowPage中AppStorageWatchEventStatus变更的事件。

3.emitter方式实现事件同步

emitter的方式,先需要在Index中增加以下代码

handleEmitterEvent(event: string) {
  console.info('俩毛豆 Index handleEmitterEvent: ' + event);
}

aboutToAppear() {
  emitter.on({ eventId: 888888 }, (event) => {
    // 如果事件携带数据,则调用子组件方法处理数据
    if (event.data && event.data.data) {
      this.handleEmitterEvent(event.data.data as string);
    }
  });
}

在SubWindowPage文件中实现通过emitter发送事件

aboutToAppear(): void {
  emitter.emit(
    { eventId: 888888, priority: emitter.EventPriority.IMMEDIATE },
    { data: { 'data': "俩毛豆" } }
  );
}

运行示例工程,同样进入 子窗口,这时查看log,Index组件中,收到了在SubWindowPage中emitter发送的id为888888的事件。

4.eventHub方式实现事件同步

eventHub的方式,先需要在Index中增加以下代码

handleEventHubEvent(event: string) {
  console.info('俩毛豆 Index handleEventHubEvent: ' + event);
}
async aboutToAppear() {
  this.getUIContext().getHostContext()!.eventHub.on('eventHubEvent', (data: string) => {
    this.handleEventHubEvent(data);
  });
}

在SubWindowPage文件中实现通过eventHub发送事件

aboutToAppear(): void {
  this.getUIContext().getHostContext()!.eventHub.emit('eventHubEvent', "俩毛豆");
}

运行示例工程,同样进入 子窗口,这时查看log,Index组件中,收到了在SubWindowPage中通过eventHub发送的eventHubEvent事件。

总结:

本文介绍了鸿蒙系统ArkTS开发中窗口事件同步的三种实现方式:1. 使用AppStorage+Watch机制,通过设置共享变量并监听变化实现窗口间通信;2. 采用emitter模块,通过事件ID注册和触发实现跨窗口事件传递;3. 通过eventHub的事件发布订阅模式完成窗口交互。文章通过TextWindow示例工程详细演示了主窗口创建子窗口、子窗口向主窗口发送事件的技术实现,包括相关API使用和代码结构说明,为鸿蒙开发者实现复杂窗口交互提供了实用参考方案。所有示例代码均可直接运行验证,适合鸿蒙应用开发学习。