1# 不依赖UI组件的全局自定义弹出框 (openCustomDialog)（推荐）
2
3由于[CustomDialogController](../reference/apis-arkui/arkui-ts/ts-methods-custom-dialog-box.md#customdialogcontroller)在使用上存在诸多限制，不支持动态创建也不支持动态刷新，在相对较复杂的应用场景中推荐使用UIContext中获取到的PromptAction对象提供的[openCustomDialog](../reference/apis-arkui/js-apis-arkui-UIContext.md#opencustomdialog12)接口来实现自定义弹出框。
4
5> **说明：**
6>
7> 弹出框（openCustomDialog）存在两种入参方式创建自定义弹出框：
8> - openCustomDialog（传参为ComponentContent形式）：通过ComponentContent封装内容可以与UI界面解耦，调用更加灵活，可以满足开发者的封装诉求。拥有更强的灵活性，弹出框样式是完全自定义的，且在弹出框打开之后可以使用updateCustomDialog方法动态更新弹出框的一些参数。
9> - openCustomDialog（传builder的形式）：相对于ComponentContent，builder必须要与上下文做绑定，与UI存在一定耦合。此方法有用默认的弹出框样式，适合于开发者想要实现与系统弹窗默认风格一致的效果。
10>
11> 本文介绍通过入参形式为ComponentContent创建自定义弹出框，传builder形式的弹出框使用方法可参考[openCustomDialog](../reference/apis-arkui/js-apis-arkui-UIContext.md#opencustomdialog12-1)。
12
13弹出框（openCustomDialog）可以通过配置[isModal](../reference/apis-arkui/js-apis-arkui-UIContext.md#opencustomdialog12)来实现模态和非模态弹窗。isModal为true时，弹出框为模态弹窗。isModal为false时，弹出框为非模态弹窗。
14
15## 生命周期
16
17弹出框提供了生命周期函数用于通知用户该弹出框的生命周期。生命周期的触发时序依次为：onWillAppear -> onDidAppear -> onWillDisappear -> onDidDisappear。
18
19| 名称            |类型| 说明                       |
20| ----------------- | ------ | ---------------------------- |
21| onDidAppear    | () => void  | 弹出框弹出时的事件回调。    |
22| onDidDisappear |() => void  | 弹出框消失时的事件回调。    |
23| onWillAppear    | () => void | 弹出框显示动效前的事件回调。 |
24| onWillDisappear | () => void | 弹出框退出动效前的事件回调。 |
25
26## 自定义弹出框的打开与关闭
27
28> **说明：**
29>
30> 详细变量定义请参考[完整示例](#完整示例)。
31
321. 创建ComponentContent。
33
34   ComponentContent用于定义自定义弹出框的内容。其中，wrapBuilder(buildText)封装自定义组件，new Params(this.message)是自定义组件的入参，可以缺省，也可以传入基础数据类型。
35
36   ```ts
37   private contentNode: ComponentContent<Object> = new ComponentContent(this.ctx, wrapBuilder(buildText), new Params(this.message));
38   ```
392. 打开自定义弹出框。
40
41   通过调用openCustomDialog接口打开的弹出框默认为customStyle为true的弹出框，即弹出框的内容样式完全按照contentNode自定义样式显示。
42
43   ```ts
44   PromptActionClass.ctx.getPromptAction().openCustomDialog(PromptActionClass.contentNode, PromptActionClass.options)
45     .then(() => {
46       console.info('OpenCustomDialog complete.')
47     })
48     .catch((error: BusinessError) => {
49       let message = (error as BusinessError).message;
50       let code = (error as BusinessError).code;
51       console.error(`OpenCustomDialog args error code is ${code}, message is ${message}`);
52     })
53   ```
543. 关闭自定义弹出框。
55
56   由于closeCustomDialog接口需要传入待关闭弹出框对应的ComponentContent。因此，如果需要在弹出框中设置关闭方法，则可参考完整示例封装静态方法来实现。
57
58   关闭弹出框之后若需要释放对应的ComponentContent，则需要调用ComponentContent的[dispose](../reference/apis-arkui/js-apis-arkui-ComponentContent.md#dispose)方法。
59
60   ```ts
61
62   PromptActionClass.ctx.getPromptAction().closeCustomDialog(PromptActionClass.contentNode)
63     .then(() => {
64       console.info('CloseCustomDialog complete.')
65       if (this.contentNode !== null) {
66            this.contentNode.dispose();   // 释放contentNode
67        }
68     })
69     .catch((error: BusinessError) => {
70       let message = (error as BusinessError).message;
71       let code = (error as BusinessError).code;
72       console.error(`CloseCustomDialog args error code is ${code}, message is ${message}`);
73     })
74   ```
75
76## 更新自定义弹出框的内容
77
78ComponentContent与[BuilderNode](../reference/apis-arkui/js-apis-arkui-builderNode.md)有相同的使用限制，不支持自定义组件使用[@Reusable](../../application-dev/quick-start/arkts-create-custom-components.md#自定义组件的基本结构)、[@Link](../../application-dev/quick-start/arkts-link.md)、[@Provide](../../application-dev/quick-start/arkts-provide-and-consume.md)、[@Consume](../../application-dev/quick-start/arkts-provide-and-consume.md)等装饰器，来同步弹出框弹出的页面与ComponentContent中自定义组件的状态。因此，若需要更新弹出框中自定义组件的内容可以通过ComponentContent提供的update方法来实现。
79
80```ts
81this.contentNode.update(new Params('update'))
82```
83
84## 更新自定义弹出框的属性
85
86通过updateCustomDialog可以动态更新弹出框的属性。目前支持的属性包括alignment、offset、autoCancel、maskColor。
87需要注意的是，更新属性时，未设置的属性会恢复为默认值。例如，初始设置{ alignment: DialogAlignment.Top, offset: { dx: 0, dy: 50 } }，更新时设置{ alignment: DialogAlignment.Bottom }，则初始设置的offset: { dx: 0, dy: 50 }不会保留，会恢复为默认值。
88
89```ts
90PromptActionClass.ctx.getPromptAction().updateCustomDialog(PromptActionClass.contentNode, options)
91  .then(() => {
92    console.info('UpdateCustomDialog complete.')
93  })
94  .catch((error: BusinessError) => {
95    let message = (error as BusinessError).message;
96    let code = (error as BusinessError).code;
97    console.error(`UpdateCustomDialog args error code is ${code}, message is ${message}`);
98  })
99```
100
101## 完整示例
102
103```ts
104// PromptActionClass.ets
105import { BusinessError } from '@kit.BasicServicesKit';
106import { ComponentContent, promptAction } from '@kit.ArkUI';
107import { UIContext } from '@ohos.arkui.UIContext';
108
109export class PromptActionClass {
110  static ctx: UIContext;
111  static contentNode: ComponentContent<Object>;
112  static options: promptAction.BaseDialogOptions;
113
114  static setContext(context: UIContext) {
115    PromptActionClass.ctx = context;
116  }
117
118  static setContentNode(node: ComponentContent<Object>) {
119    PromptActionClass.contentNode = node;
120  }
121
122  static setOptions(options: promptAction.BaseDialogOptions) {
123    PromptActionClass.options = options;
124  }
125
126  static openDialog() {
127    if (PromptActionClass.contentNode !== null) {
128      PromptActionClass.ctx.getPromptAction().openCustomDialog(PromptActionClass.contentNode, PromptActionClass.options)
129        .then(() => {
130          console.info('OpenCustomDialog complete.')
131        })
132        .catch((error: BusinessError) => {
133          let message = (error as BusinessError).message;
134          let code = (error as BusinessError).code;
135          console.error(`OpenCustomDialog args error code is ${code}, message is ${message}`);
136        })
137    }
138  }
139
140  static closeDialog() {
141    if (PromptActionClass.contentNode !== null) {
142      PromptActionClass.ctx.getPromptAction().closeCustomDialog(PromptActionClass.contentNode)
143        .then(() => {
144          console.info('CloseCustomDialog complete.')
145        })
146        .catch((error: BusinessError) => {
147          let message = (error as BusinessError).message;
148          let code = (error as BusinessError).code;
149          console.error(`CloseCustomDialog args error code is ${code}, message is ${message}`);
150        })
151    }
152  }
153
154  static updateDialog(options: promptAction.BaseDialogOptions) {
155    if (PromptActionClass.contentNode !== null) {
156      PromptActionClass.ctx.getPromptAction().updateCustomDialog(PromptActionClass.contentNode, options)
157        .then(() => {
158          console.info('UpdateCustomDialog complete.')
159        })
160        .catch((error: BusinessError) => {
161          let message = (error as BusinessError).message;
162          let code = (error as BusinessError).code;
163          console.error(`UpdateCustomDialog args error code is ${code}, message is ${message}`);
164        })
165    }
166  }
167}
168```
169
170```ts
171// Index.ets
172import { ComponentContent } from '@kit.ArkUI';
173import { PromptActionClass } from './PromptActionClass';
174
175class Params {
176  text: string = ""
177
178  constructor(text: string) {
179    this.text = text;
180  }
181}
182
183@Builder
184function buildText(params: Params) {
185  Column() {
186    Text(params.text)
187      .fontSize(50)
188      .fontWeight(FontWeight.Bold)
189      .margin({ bottom: 36 })
190    Button('Close')
191      .onClick(() => {
192        PromptActionClass.closeDialog()
193      })
194  }.backgroundColor('#FFF0F0F0')
195}
196
197@Entry
198@Component
199struct Index {
200  @State message: string = "hello"
201  private ctx: UIContext = this.getUIContext();
202  private contentNode: ComponentContent<Object> =
203    new ComponentContent(this.ctx, wrapBuilder(buildText), new Params(this.message));
204
205  aboutToAppear(): void {
206    PromptActionClass.setContext(this.ctx);
207    PromptActionClass.setContentNode(this.contentNode);
208    PromptActionClass.setOptions({ alignment: DialogAlignment.Top, offset: { dx: 0, dy: 50 } });
209  }
210
211  build() {
212    Row() {
213      Column() {
214        Button("open dialog and update options")
215          .margin({ top: 50 })
216          .onClick(() => {
217            PromptActionClass.openDialog()
218
219            setTimeout(() => {
220              PromptActionClass.updateDialog({
221                alignment: DialogAlignment.Bottom,
222                offset: { dx: 0, dy: -50 }
223              })
224            }, 1500)
225          })
226        Button("open dialog and update content")
227          .margin({ top: 50 })
228          .onClick(() => {
229            PromptActionClass.openDialog()
230
231            setTimeout(() => {
232              this.contentNode.update(new Params('update'))
233            }, 1500)
234          })
235      }
236      .width('100%')
237      .height('100%')
238    }
239    .height('100%')
240  }
241}
242```
243
244 ![UIContextPromptAction](figures/UIContextPromptAction.gif)
245
246
247