在鸿蒙(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使用和代码结构说明,为鸿蒙开发者实现复杂窗口交互提供了实用参考方案。所有示例代码均可直接运行验证,适合鸿蒙应用开发学习。