【鸿蒙】自定义弹窗非置顶解决方案 - 子窗口显示

问题概述

鸿蒙自带的自定义弹窗存在一直置顶的问题，具体业务例子

在隐私弹窗的Dialog里通过router跳转到隐私协议内容页后，弹窗一直处于最外层。按照真实业务，应该是在隐私弹窗的上层压入隐私协议，退出隐私协议页面后，弹窗还在。

目前鸿蒙自带的@CustomDialog 以及ComponentContent 封装弹窗类组件两种API实现效果均是弹窗一直置顶

解决方案

目前有两种解决方案

1.子窗口： 通过创建子窗口，并在子窗口Page内加载@Builder自定义组件( 弹窗 ) —— 本文

2.关闭 - 打开：通过订阅openCustomDialog和closeCustomDialog事件来控制显隐，实现业务。

具体实现

工程结构

• LoadContentWindow.ets // 子窗口
• SubWindowParams.ets // 子窗口传参封装
• SubWindowApi.ets // 子窗口创建初始化封装
• SubWindowFunction.ets // 方法调用封装

1. 子窗口的创建初始化，以及销毁，并且订阅对应事件 - SubWindowApi.ets

const EVENT_ID = 1234565; // 持续订阅事件ID

// window实例
interface Handler {
   
  windowStage: window.WindowStage;
}


/**
 * 窗口的创建，加载，显示，销毁操作
 */
export class SubWindowApi {
   
  private subWindow: window.Window | null = null; // 初始化window实例
  private Storage: LocalStorage = new LocalStorage(); // 创建页面级UI状态存储对象
  // eventId为1234565的持续订阅的事件
  private callbackEvent: emitter.InnerEvent = {
   
    eventId: EVENT_ID
  }

  // 显示当前窗口
  private showSubWindow() {
   
    if (this.subWindow) {
   
      this.subWindow.showWindow((err: BusinessError) => {
   
        if (err.code) {
   
          console.error('Fail to show window, Cause: ' + JSON.stringify(err));
        }
      })
    }
  }

  // 为当前WindowStage加载命名路由页面
  private loadContent(path: string) {
   
    if (this.subWindow) {
   
      // 用loadContentByName为当前窗口加载命名路由页面，通过LocalStorage传递状态属性给加载的页面
      this.subWindow.loadContentByName(path, this.Storage, (err: BusinessError) => {
   
        if (err.code) {
   
          console.error("Failed to load the content. Cause:" + JSON.stringify(err));
          return;
        }
      });
    }
  }

  // 销毁当前窗口
  private destroySubWindow() {
   
    if <