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

标题概述

鸿蒙自带的自定义弹窗存在不停置顶的标题，详细业务例子
在隐私弹窗的Dialog里通过router跳转到隐私协议内容页后，弹窗不停处于最外层。按照真实业务，应该是在隐私弹窗的上层压入隐私协议，退出隐私协议页面后，弹窗还在。
目前鸿蒙自带的@CustomDialog 以及ComponentContent 封装弹窗类组件两种API实现结果均是弹窗不停置顶
解决方案

目前有两种解决方案
1.子窗口： 通过创建子窗口，并在子窗口Page内加载@Builder自定义组件( 弹窗 ) —— 本文
2.关闭 - 打开：通过订阅openCustomDialog和closeCustomDialog事件来控制显隐，实现业务。
详细实现

工程结构

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

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

1. const EVENT_ID = 1234565; // 持续订阅事件ID
3. // window实例
4. interface Handler {
5.   windowStage: window.WindowStage;
6. }
9. /**
10. * 窗口的创建，加载，显示，销毁操作
11. */
12. export class SubWindowApi {
13.   private subWindow: window.Window | null = null; // 初始化window实例
14.   private Storage: LocalStorage = new LocalStorage(); // 创建页面级UI状态存储对象
15.   // eventId为1234565的持续订阅的事件
16.   private callbackEvent: emitter.InnerEvent = {
17.     eventId: EVENT_ID
18.   }
20.   // 显示当前窗口
21.   private showSubWindow() {
22.     if (this.subWindow) {
23.       this.subWindow.showWindow((err: BusinessError) => {
24.         if (err.code) {
25.           console.error('Fail to show window, Cause: ' + JSON.stringify(err));
26.         }
27.       })
28.     }
29.   }
31.   // 为当前WindowStage加载命名路由页面
32.   private loadContent(path: string) {
33.     if (this.subWindow) {
34.       // 用loadContentByName为当前窗口加载命名路由页面，通过LocalStorage传递状态属性给加载的页面
35.       this.subWindow.loadContentByName(path, this.Storage, (err: BusinessError) => {
36.         if (err.code) {
37.           console.error("Failed to load the content. Cause:" + JSON.stringify(err));
38.           return;
39.         }
40.       });
41.     }
42.   }
44.   // 销毁当前窗口
45.   private destroySubWindow() {
46.     if (this.subWindow) {
47.       this.subWindow.destroyWindow((err) => {
48.         if (err.code) {
49.           console.error('Fail to destroy the window. Cause:' + JSON.stringify(err));
50.           return;
51.         }
52.         this.subWindow = null;
53.       });
54.     }
55.   }
57.   // 创建子窗口
58.   private createSubWindow(windowStage: window.WindowStage | null) {
59.     try {
60.       if (!windowStage) {
61.         return;
62.       }
63.       windowStage.createSubWindow('subDialogWindow', (err: BusinessError, data) => {
64.         if (err.code) {
65.           console.error("Failed to create the subwindow, Cause: " + JSON.stringify(err));
66.           return;
67.         }
68.         this.subWindow = (data as window.Window);
69.         if (this.subWindow) {
70.           // 设置子窗口尺寸
71.           this.subWindow.resize(
72.             UIUtil.getScreenWidthPx(),
73.             UIUtil.getScreenHeightPx())
74.           // 布局避让状态栏与导航栏
75.           this.subWindow.setWindowLayoutFullScreen(false)
76.           // 设置子窗口可触
77.           this.subWindow.setWindowTouchable(true);
78.           // 设置窗口UI
79.           this.loadContent(entryName);
80.           // 展示子窗口
81.           this.showSubWindow();
82.         }
83.       });
84.     } catch (exception) {
85.       console.error("Failed to create the window, Cause: " + JSON.stringify(exception));
86.     }
87.   }
89.   /**
90.    * 订阅eventId为1234565的事件
91.    */
92.   subscribeCallback(): void {
93.     emitter.on(this.callbackEvent, () => {
94.       this.hideSubWindow();
95.     })
96.   }
98.   /**
99.    * 取消针对eventId为1234565的事件的订阅
100.    */
101.   offCallback(): void {
102.     emitter.off(this.callbackEvent.eventId);
103.   }
105.   /**
106.    * 更新key为'ad'的变量值
107.    * @param { AdWindowParams } params - 页面显示的值
108.    */
109.   updateOrCreateParams(params: SubWindowParams): void {
110.     this.Storage.setOrCreate("subWindowParams", params);
111.   }
113.   /**
114.    * 创建并展示弹窗
115.    * @param { AdWindowParams } params - 页面显示的值
116.    * @param { Handler } handler - WindowStage对象
117.    */
118.   initSubWindow(handler: Handler, params: SubWindowParams): void {
119.     const windowStage = handler.windowStage;
120.     // 注册回调
121.     this.subscribeCallback();
122.     // 初始化参数
123.     this.updateOrCreateParams(params);
124.     // 新建子窗口
125.     this.createSubWindow(windowStage);
126.   }
128.   /**
129.    * 隐藏弹窗
130.    */
131.   hideSubWindow(): void {
132.     // 注销监听事件
133.     this.offCallback();
134.     // 关闭弹窗
135.     this.destroySubWindow();
136.   }
137. }

复制代码

2. 创建子窗口所加载的页面 - LoadContentWindow.ets

1. export const entryName: string = 'LoadContent';
3. const EVENT_ID = 1234565; // 持续订阅事件ID
4. const DURATION = 400; // 动画时间
5. const IMAGE_SCALE = 0.8; // 弹窗画面缩放大小
8. @Entry({
9.   routeName: entryName,
10.   storage: LocalStorage.getShared()
11. })
12.   // window单独加载的命名路由页面: LoadContent
13. @Component
14. export struct LoadContent {
15.   @LocalStorageLink('subWindowParams') params: SubWindowParams | null = null;
16.   private windowClass: window.Window = window.findWindow('subDialogWindow');
17.   private event: emitter.InnerEvent = {
18.     eventId: EVENT_ID
19.   }
20.   aboutToAppear(): void {
21.     if (this.params != null) {
22.       this.params.onBtnCloseListener = () => {
23.         // 触发回调，关闭弹窗
24.         emitter.emit(this.event);
25.       }
26.     }
27.   }
29.   onBackPress(): boolean | void {
30.     //监听反回键
31.     emitter.emit(this.event);
32.     return true;
33.   }
35.   onPageHide(): void {
36.     //设置子窗口蒙层颜色
37.     try {
38.       this.windowClass.setWindowBackgroundColor('#ffffff');
39.     } catch (exception) {
40.       console.error('Failed to set the background color. Cause: ' + JSON.stringify(exception));
41.     }
42.   }
44.   onPageShow(): void {
45.     //设置子窗口蒙层颜色
46.     try {
47.       this.windowClass.setWindowBackgroundColor("#57050505")
48.     } catch (exception) {
49.       console.error('Failed to set the background color. Cause: ' + JSON.stringify(exception));
50.     }
51.   }
53.   build() {
54.     Column() {
55.       Stack() {
56.         if (this.params != null) {
57.           dialog_privacy(this.params)
58.         } else {
59.           Text("NULL")
60.         }
61.       }
62.     }
63.     .width(UIUtil.getScreenWidthVp())
64.     .height(UIUtil.getScreenHeightVp())
65.     .alignItems(HorizontalAlign.Center)
66.     .justifyContent(FlexAlign.Center)
67.     .transition(TransitionEffect.OPACITY.animation({
68.       duration: DURATION,
69.       curve: Curve.Ease
70.     }).combine(TransitionEffect.scale({
71.       x: IMAGE_SCALE,
72.       y: IMAGE_SCALE
73.     })))
74.   }
75. }

复制代码

3. 封装方法调用 - SubWindowFunction.ets

1. const context = getContext(this) as common.UIAbilityContext; // 获取当前页面的上下文
3. /**
4. * 创建并展示弹窗
5. * @param { api.SubWindowApi | null } SubWindowApi - SubWindowApi对象
6. * @param { window.WindowStage | undefined } windowStage - WindowStage对象
7. */
8. export function showApiSubWindow(SubWindowApi: api.SubWindowApi | null, windowStage: window.WindowStage | undefined, params: SubWindowParams) {
9.   SubWindowApi?.initSubWindow({ windowStage: windowStage as window.WindowStage }, params);
10. }
12. /**
13. * 隐藏弹窗
14. * @param { api.SubWindowApi | null } SubWindowApi - SubWindowApi对象
15. */
16. export function hideApiSubWindow(SubWindowApi: api.SubWindowApi | null) {
17.   SubWindowApi?.hideSubWindow();
18. }

复制代码

4. 自定义传参 - SubWindowParams.ets

1. export class SubWindowParams {
2.   onBtnCloseListener?: () => void
3.   
4.   constructor() {
5.   }
7. }

复制代码

参考

https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/customdialog/README.md

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。