【HarmonyOS Next】鸿蒙中自定义弹框OpenCustomDialog、CustomDialog与Dial ...

【HarmonyOS Next】鸿蒙中自定义弹框OpenCustomDialog、CustomDialog与DialogHub的区别详解

一、三者的区别与关系

1. 官方迭代过程为：
CustomDialog = 》 OpenCustomDialog = 》 DialogHub
迭代过程表明，弹框的调用越来越便捷，与UI解耦，终极到达在纯逻辑中使用自定义弹出，弹框内容更新和生命周期可控，写法简洁。
2.CustomDialog的用法：
首先需要创建@CustomDialog装饰的自定义弹框布局，CustomDialogController来实现弹窗弹出和关闭。

1. @CustomDialog
2. struct CustomDialogUI {
3.   // CustomDialog可直接获取到dialogController
4.   dialogController: CustomDialogController;
5.   // 定义事件回调给外部使用
6.   onClose?: () => void;
8.   build() {
9.     Column() {
10.       Text('我是内容')
11.         .fontSize(20)
13.       Button('Close')
14.         .onClick(() => {
15.           // 点击关闭弹框
16.           this.dialogController.close();
17.           if (this.onClose) {
18.             this.onClose()
19.           }
20.         }).backgroundColor(Color.White).fontColor(Color.Black)
21.     }.height(60).justifyContent(FlexAlign.Center)
22.   }
23. }
25. @Entry
26. @Component
27. struct CustomDialogPage {
28.   // CustomDialog - CustomDialogController需在@Component内定义初始化。
29.   dialogController: CustomDialogController | null = new CustomDialogController({
30.     builder: CustomDialogUI({
31.       onClose: ()=> {
32.         console.info('Callback when the onClose button is clicked')
33.       },
34.     }),
35.   })
37.   build() {
38.     Column() {
39.       Button('click me')
40.         .onClick(() => {
41.           this.dialogController.open()
42.         })
43.     }.width('100%').margin({ top: 5 })
44.   }
45. }

复制代码

综上所述，CustomDialog 因为CustomDialogController强耦合于UI，需要在UI界面或者自定义View中使用CustomDialogController控制弹框显示隐蔽。无法在纯逻辑类中处理弹框时机的显示。（这种环境下只能想办法发送通知给UI，UI再处理回调显示，处理起来贫苦。）致命的标题是，弹框内的UI无法动态刷新。需要重新创建渲染。
3.OpenCustomDialog 的用法：
对标CustomDialog 的CustomDialogController。官方通过将弹框对象实例，放到上下文中，实现在纯逻辑类中也可以调用弹框的显示和隐蔽。
将@CustomDialog弹框布局内容，放到ComponentContent节点对象中，实现弹框UI的解耦。

1. @Builder
2. function ComponentContentBuildText() {
4.   Column() {
5.     Text("测试数据")
6.       .fontSize(50)
7.       .fontWeight(FontWeight.Bold)
8.       .margin({ bottom: 36 })
9.   }.backgroundColor('#FFF0F0F0')
10. }
12.   // OpenCustomDialog - ComponentContent // 建议整体抽个单例
13.   private contentNode: ComponentContent<Object> = new ComponentContent(this.getUIContext(), wrapBuilder(ComponentContentBuildText));
15.     this.getUIContext().getPromptAction().openCustomDialog(this.contentNode)
16.       .then(() => {
17.         console.info('UpdateCustomDialog complete.')
18.       })
19.       .catch((error: BusinessError) => {
20.         let message = (error as BusinessError).message;
21.         let code = (error as BusinessError).code;
22.         console.error(`onClickOpenCustomDialog args error code is ${code}, message is ${message}`);
23.       })

复制代码

DialogHub的用法：
参考：【HarmonyOS Next】鸿蒙应用实现弹框DialogHub详解
二、自定义View与UI解耦的办理方案：

现在共有三种方式，使用浮层(DialogHub底层原理)，使用OpenCustomDialog，使用subWindow。
1.浮层

DialogHub底层原理。在页面Page与弹框层之间，ArkUI框架有一个浮层。该层通过节点管控（增加，删除）的方式，可以插入自定义UI。
ComponentContent可以理解为一个节点内容对象，在其中进行自定义UI的界面编写，打包为一个ComponentContent节点，添加到浮层上，ArkUI框架就会加载显示。

2. @Builder
3. function builderOverlay() {
4.   Column() {
5. }.focusable(false).width('100%').height('100%').hitTestBehavior(HitTestMode.Transparent)
6. }
8.   private overlayNode
9.   : OverlayManager = this.uiContext.getOverlayManager()
10.   let componentContent = new ComponentContent(
11.       this.uiContext, wrapBuilder<>(builderOverlay)
12.     )
13.     this.overlayNode.addComponentContent(componentContent, 0)
14.     this.overlayContent.push(componentContent)
15.      

复制代码

2.OpenCustomDialog
参考：【HarmonyOS Next】鸿蒙应用弹框和提示气泡详解（一）
3.subWindow
因为三方应用不能使用FloatWindow，没有悬浮窗。只能通过子窗口SubWindow实现独立的自定义View层级。

1. import { window } from '@kit.ArkUI';
2. import { BusinessError } from '@kit.BasicServicesKit';
4. @Entry
5. @Component
6. struct SubWinPage {
7.   private TAG: string = "SubWinPage";
8.   private sub_windowClass: window.Window | null = null;
10.    aboutToAppear() {
11.     this.showSubWindow()
12.      setTimeout(()=>{
13.        try {
14.          this.destroySubWindow();
15.          // window.getLastWindow(getContext()).then((win)=>{
16.          //   console.error(this.TAG, 'win:' + JSON.stringify(win));
17.          //   let height = win.getWindowDecorHeight();
18.          //   console.error(this.TAG, 'height:' + height);
19.          // })
21.          let windowStage_:  window.WindowStage = globalThis.mWindowStage;
22.          let win = windowStage_.getMainWindowSync();
23.          let height = win.getWindowDecorHeight();
24.        }catch (e){
25.          console.error(this.TAG, 'e:' + JSON.stringify(e));
26.        }
27.      },1000)
28.   }
30.   private showSubWindow() {
31.     console.log(this.TAG, 'showSubWindow start');
32.     let windowStage_:  window.WindowStage = globalThis.mWindowStage;
33.     // 1.创建应用子窗口。
34.     if (windowStage_ == null) {
35.       console.error(this.TAG, 'Failed to create the subwindow. Cause: windowStage_ is null');
36.     }
37.     else {
38.       windowStage_.createSubWindow("mySubWindow", (err: BusinessError, data) => {
39.         let errCode: number = err.code;
40.         if (errCode) {
41.           console.error(this.TAG, 'Failed to create the subwindow. Cause: ' + JSON.stringify(err));
42.           return;
43.         }
44.         this.sub_windowClass = data;
45.         console.info(this.TAG, 'Succeeded in creating the subwindow. Data: ' + JSON.stringify(data));
46.         // 2.子窗口创建成功后，设置子窗口的位置、大小及相关属性等。
47.         this.sub_windowClass.moveWindowTo(300, 300, (err: BusinessError) => {
48.           let errCode: number = err.code;
49.           if (errCode) {
50.             console.error(this.TAG, 'Failed to move the window. Cause:' + JSON.stringify(err));
51.             return;
52.           }
53.           console.info(this.TAG, 'Succeeded in moving the window.');
54.         });
55.         this.sub_windowClass.resize(500, 500, (err: BusinessError) => {
56.           let errCode: number = err.code;
57.           if (errCode) {
58.             console.error(this.TAG, 'Failed to change the window size. Cause:' + JSON.stringify(err));
59.             return;
60.           }
61.           console.info(this.TAG, 'Succeeded in changing the window size.');
62.         });
63.         // 3.为子窗口加载对应的目标页面。
64.         this.sub_windowClass.setUIContent("pages/SubWinLoadPage", (err: BusinessError) => {
65.           let errCode: number = err.code;
66.           if (errCode) {
67.             console.error(this.TAG, 'Failed to load the content. Cause:' + JSON.stringify(err));
68.             return;
69.           }
70.           console.info(this.TAG, 'Succeeded in loading the content.');
71.           // 3.显示子窗口。
72.           (this.sub_windowClass as window.Window).showWindow((err: BusinessError) => {
73.             let errCode: number = err.code;
74.             if (errCode) {
75.               console.error(this.TAG, 'Failed to show the window. Cause: ' + JSON.stringify(err));
76.               return;
77.             }
78.             console.info(this.TAG, 'Succeeded in showing the window.');
79.           });
80.         });
81.       })
82.     }
83.     console.log(this.TAG, 'showSubWindow end');
84.   }
86.   destroySubWindow() {
87.     // 4.销毁子窗口。当不再需要子窗口时，可根据具体实现逻辑，使用destroy对其进行销毁。
88.     (this.sub_windowClass as window.Window).destroyWindow((err: BusinessError) => {
89.       let errCode: number = err.code;
90.       if (errCode) {
91.         console.error(this.TAG, 'Failed to destroy the window. Cause: ' + JSON.stringify(err));
92.         return;
93.       }
94.       console.info(this.TAG, 'Succeeded in destroying the window.');
95.     });
96.   }
98.   build() {
99.     Column() {
100.       Text("点击创建子窗口")
101.         .id('SubWinPageHelloWorld')
102.         .fontSize(50)
103.         .fontWeight(FontWeight.Bold)
104.         .onClick(()=>{
105.           this.showSubWindow();
106.         })
108.       Text("点击销毁子窗口")
109.         .id('SubWinPageHelloWorld')
110.         .fontSize(50)
111.         .fontWeight(FontWeight.Bold)
112.         .onClick(()=>{
113.           this.destroySubWindow();
114.         })
115.     }
116.     .height('100%')
117.     .width('100%')
118.     .justifyContent(FlexAlign.Center)
119.   }
120. }

复制代码

三、多弹框源码示例：

1. import {
2.   DialogHub
3. } from "@hadss/dialoghub"
4. import { ComponentContent } from "@kit.ArkUI";
5. import { BusinessError } from "@kit.BasicServicesKit";
7. @CustomDialog
8. struct CustomDialogUI {
9.   // CustomDialog可直接获取到dialogController
10.   dialogController: CustomDialogController;
11.   // 定义事件回调给外部使用
12.   onClose?: () => void;
14.   build() {
15.     Column() {
16.       Text('我是内容')
17.         .fontSize(20)
19.       Button('Close')
20.         .onClick(() => {
21.           // 点击关闭弹框
22.           this.dialogController.close();
23.           if (this.onClose) {
24.             this.onClose()
25.           }
26.         }).backgroundColor(Color.White).fontColor(Color.Black)
27.     }.height(60).justifyContent(FlexAlign.Center)
28.   }
29. }
31. @Builder
32. function ComponentContentBuildText() {
34.   Column() {
35.     Text("测试数据")
36.       .fontSize(50)
37.       .fontWeight(FontWeight.Bold)
38.       .margin({ bottom: 36 })
39.   }.backgroundColor('#FFF0F0F0')
40. }
42. /**
43. * 弹框测试页
44. */
45. @Entry
46. @Component
47. struct DialogTestPage {
49.   // CustomDialog - CustomDialogController需在@Component内定义初始化。
50.   dialogController: CustomDialogController | null = new CustomDialogController({
51.     builder: CustomDialogUI({
52.       onClose: ()=> {
53.         console.info('Callback when the onClose button is clicked')
54.       },
55.     }),
56.   })
58.   // OpenCustomDialog - ComponentContent // 建议整体抽个单例
59.   private contentNode: ComponentContent<Object> = new ComponentContent(this.getUIContext(), wrapBuilder(ComponentContentBuildText));
61.   /**
62.    * 统一样式封装
63.    */
64.   @Styles ButtonStyle(){
65.     .width(px2vp(350))
66.     .height(px2vp(200))
67.     .margin({ top: px2vp(66) })
68.   }
70.   /**
71.    * 点击显示CustomDialog弹框 【官方不推荐】
72.    */
73.   onClickCustomDialog = ()=>{
74.     this.dialogController?.open()
75.   }
77.   /**
78.    * 点击显示OpenCustomDialog
79.    */
80.   onClickOpenCustomDialog = ()=>{
81.     this.getUIContext().getPromptAction().openCustomDialog(this.contentNode)
82.       .then(() => {
83.         console.info('UpdateCustomDialog complete.')
84.       })
85.       .catch((error: BusinessError) => {
86.         let message = (error as BusinessError).message;
87.         let code = (error as BusinessError).code;
88.         console.error(`onClickOpenCustomDialog args error code is ${code}, message is ${message}`);
89.       })
90.   }
92.   /**
93.    * 点击显示DialogHub弹框
94.    */
95.   onClickDialogHub = ()=>{
96.     DialogHub.getToast().setTextContent("测试数据").setDuration(2000).build().show();
97.   }
100.   aboutToDisappear() {
101.     // 在自定义组件即将析构销毁时将dialogController置空
102.     this.dialogController = null; // 将dialogController置空
103.   }
105.   build() {
106.     Column(){
107.       Button("customDialog")
108.         .ButtonStyle()
109.         .onClick(this.onClickCustomDialog)
111.       Button("openCustomDialog")
112.         .ButtonStyle()
113.         .onClick(this.onClickOpenCustomDialog)
115.       Button("dialogHub")
116.         .ButtonStyle()
117.         .onClick(this.onClickDialogHub)
119.     }.size({
120.       width: "100%",
121.       height: "100%"
122.     })
123.   }
124. }

复制代码

1. {
2.   "name": "entry",
3.   "version": "1.0.0",
4.   "description": "Please describe the basic information.",
5.   "main": "",
6.   "author": "",
7.   "license": "",
8.   "dependencies": {
9.     "@hadss/dialoghub": "^1.0.0-rc.1"
10.   }
11. }

复制代码

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