鸿蒙5.0进阶开辟：UI开辟-不依靠UI组件的全局自界说弹出框 (openCustomDial ...

 往期鸿蒙全套实战文章必看：（文中附带鸿蒙全栈学习资料）

• 鸿蒙开辟核心知识点，看这篇文章就够了
  
• 最新版！鸿蒙HarmonyOS Next应用开辟实战学习门路
  
• 鸿蒙HarmonyOS NEXT开辟技能最全学习门路指南
  
• 鸿蒙应用开辟实战项目，看这一篇文章就够了（部分项目附源码）
  

---

不依靠UI组件的全局自界说弹出框 (openCustomDialog)（保举）

由于CustomDialogController在使用上存在诸多限定，不支持动态创建也不支持动态刷新，在相对较复杂的应用场景中保举使用UIContext中获取到的PromptAction对象提供的openCustomDialog接口来实现自界说弹出框。
   阐明
  弹出框（openCustomDialog）存在两种入参方式创建自界说弹出框：
  

• openCustomDialog（传参为ComponentContent形式）：通过ComponentContent封装内容可以与UI界面解耦，调用更加灵活，可以满足开辟者的封装诉求。拥有更强的灵活性，弹出框样式是完全自界说的，且在弹出框打开之后可以使用updateCustomDialog方法动态更新弹出框的一些参数。
  
• openCustomDialog（传builder的形式）：相对于ComponentContent，builder必须要与上下文做绑定，与UI存在一定耦合。此方法有效默认的弹出框样式，适合于开辟者想要实现与体系弹窗默认风格一致的结果。
  

  本文先容通过入参形式为ComponentContent创建自界说弹出框，传builder形式的弹出框使用方法可参考openCustomDialog。
弹出框（openCustomDialog）可以通过配置isModal来实现模态和非模态弹窗。isModal为true时，弹出框为模态弹窗。isModal为false时，弹出框为非模态弹窗。
生命周期

弹出框提供了生命周期函数用于关照用户该弹出框的生命周期。生命周期的触发时序依次为：onWillAppear -> onDidAppear -> onWillDisappear -> onDidDisappear。
名称类型阐明onDidAppear() => void弹出框弹出时的事件回调。onDidDisappear() => void弹出框消失时的事件回调。onWillAppear() => void弹出框显示动效前的事件回调。onWillDisappear() => void弹出框退出动效前的事件回调。 自界说弹出框的打开与关闭

• 创建ComponentContent。
  ComponentContent用于界说自界说弹出框的内容。此中，wrapBuilder(buildText)封装自界说组件，new Params(this.message)是自界说组件的入参，可以缺省，也可以传入基础数据类型。
  
  1. private contentNode: ComponentContent<Object> = new ComponentContent(this.ctx, wrapBuilder(buildText), new Params(this.message));

  复制代码
• 打开自界说弹出框。
  通过调用openCustomDialog接口打开的弹出框默以为customStyle为true的弹出框，即弹出框的内容样式完全按照contentNode自界说样式显示。
  
  1. this.ctx.getPromptAction().openCustomDialog(this.contentNode, this.options)
  2.   .then(() => {
  3.     console.info('OpenCustomDialog complete.')
  4.   })
  5.   .catch((error: BusinessError) => {
  6.     let message = (error as BusinessError).message;
  7.     let code = (error as BusinessError).code;
  8.     console.error(`OpenCustomDialog args error code is ${code}, message is ${message}`);
  9.   })

  复制代码
• 关闭自界说弹出框。
  由于closeCustomDialog接口必要传入待关闭弹出框对应的ComponentContent。因此，如果必要在弹出框中设置关闭方法，则可参考完备示例封装静态方法来实现。
  关闭弹出框之后若必要释放对应的ComponentContent，则必要调用ComponentContent的dispose方法。
  
  1. this.ctx.getPromptAction().closeCustomDialog(this.contentNode)
  2.   .then(() => {
  3.     console.info('CloseCustomDialog complete.')
  4.   })
  5.   .catch((error: BusinessError) => {
  6.     let message = (error as BusinessError).message;
  7.     let code = (error as BusinessError).code;
  8.     console.error(`CloseCustomDialog args error code is ${code}, message is ${message}`);
  9.   })

  复制代码

更新自界说弹出框的内容

ComponentContent与BuilderNode有相同的使用限定，不支持自界说组件使用@Reusable、@Link、@Provide、@Consume等装饰器，来同步弹出框弹出的页面与ComponentContent中自界说组件的状态。因此，若必要更新弹出框中自界说组件的内容可以通过ComponentContent提供的update方法来实现。

1. this.contentNode.update(new Params('update'))

复制代码

更新自界说弹出框的属性

通过updateCustomDialog可以动态更新弹出框的属性。目前支持的属性包括alignment、offset、autoCancel、maskColor。
必要注意的是，更新属性时，未设置的属性会规复为默认值。例如，初始设置{ alignment: DialogAlignment.Top, offset: { dx: 0, dy: 50 } }，更新时设置{ alignment: DialogAlignment.Bottom }，则初始设置的offset: { dx: 0, dy: 50 }不会保存，会规复为默认值。

1. this.ctx.getPromptAction().updateCustomDialog(this.contentNode, options)
2.   .then(() => {
3.     console.info('UpdateCustomDialog complete.')
4.   })
5.   .catch((error: BusinessError) => {
6.     let message = (error as BusinessError).message;
7.     let code = (error as BusinessError).code;
8.     console.error(`UpdateCustomDialog args error code is ${code}, message is ${message}`);
9.   })

复制代码

完备示例

1. // PromptActionClass.ts
2. import { BusinessError } from '@kit.BasicServicesKit';
3. import { ComponentContent, window } from '@kit.ArkUI';
4. import { UIContext } from '@ohos.arkui.UIContext';
6. export class PromptActionClass {
7.   static ctx: UIContext;
8.   static contentNode: ComponentContent<Object>;
9.   static options: Object;
11.   static setContext(context: UIContext) {
12.     this.ctx = context;
13.   }
15.   static setContentNode(node: ComponentContent<Object>) {
16.     this.contentNode = node;
17.   }
19.   static setOptions(options: Object) {
20.     this.options = options;
21.   }
23.   static openDialog() {
24.     if (this.contentNode !== null) {
25.       this.ctx.getPromptAction().openCustomDialog(this.contentNode, this.options)
26.         .then(() => {
27.           console.info('OpenCustomDialog complete.')
28.         })
29.         .catch((error: BusinessError) => {
30.           let message = (error as BusinessError).message;
31.           let code = (error as BusinessError).code;
32.           console.error(`OpenCustomDialog args error code is ${code}, message is ${message}`);
33.         })
34.     }
35.   }
37.   static closeDialog() {
38.     if (this.contentNode !== null) {
39.       this.ctx.getPromptAction().closeCustomDialog(this.contentNode)
40.         .then(() => {
41.           console.info('CloseCustomDialog complete.')
42.         })
43.         .catch((error: BusinessError) => {
44.           let message = (error as BusinessError).message;
45.           let code = (error as BusinessError).code;
46.           console.error(`CloseCustomDialog args error code is ${code}, message is ${message}`);
47.         })
48.     }
49.   }
51.   static updateDialog(options: Object) {
52.     if (this.contentNode !== null) {
53.       this.ctx.getPromptAction().updateCustomDialog(this.contentNode, options)
54.         .then(() => {
55.           console.info('UpdateCustomDialog complete.')
56.         })
57.         .catch((error: BusinessError) => {
58.           let message = (error as BusinessError).message;
59.           let code = (error as BusinessError).code;
60.           console.error(`UpdateCustomDialog args error code is ${code}, message is ${message}`);
61.         })
62.     }
63.   }
64. }

复制代码

1. // Index.ets
2. import { ComponentContent } from '@kit.ArkUI';
3. import { PromptActionClass } from './PromptActionClass';
5. class Params {
6.   text: string = ""
8.   constructor(text: string) {
9.     this.text = text;
10.   }
11. }
13. @Builder
14. function buildText(params: Params) {
15.   Column() {
16.     Text(params.text)
17.       .fontSize(50)
18.       .fontWeight(FontWeight.Bold)
19.       .margin({ bottom: 36 })
20.     Button('Close')
21.       .onClick(() => {
22.         PromptActionClass.closeDialog()
23.       })
24.   }.backgroundColor('#FFF0F0F0')
25. }
27. @Entry
28. @Component
29. struct Index {
30.   @State message: string = "hello"
31.   private ctx: UIContext = this.getUIContext();
32.   private contentNode: ComponentContent<Object> =
33.     new ComponentContent(this.ctx, wrapBuilder(buildText), new Params(this.message));
35.   aboutToAppear(): void {
36.     PromptActionClass.setContext(this.ctx);
37.     PromptActionClass.setContentNode(this.contentNode);
38.     PromptActionClass.setOptions({ alignment: DialogAlignment.Top, offset: { dx: 0, dy: 50 } });
39.   }
41.   build() {
42.     Row() {
43.       Column() {
44.         Button("open dialog and update options")
45.           .margin({ top: 50 })
46.           .onClick(() => {
47.             PromptActionClass.openDialog()
49.             setTimeout(() => {
50.               PromptActionClass.updateDialog({
51.                 alignment: DialogAlignment.Bottom,
52.                 offset: { dx: 0, dy: -50 }
53.               })
54.             }, 1500)
55.           })
56.         Button("open dialog and update content")
57.           .margin({ top: 50 })
58.           .onClick(() => {
59.             PromptActionClass.openDialog()
61.             setTimeout(() => {
62.               this.contentNode.update(new Params('update'))
63.             }, 1500)
64.           })
65.       }
66.       .width('100%')
67.       .height('100%')
68.     }
69.     .height('100%')
70.   }
71. }

复制代码

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