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/ui/state-management/arkts-create-custom-components.md#自定义组件的基本结构)、[@Link](../../application-dev/ui/state-management/arkts-link.md)、[@Provide](../../application-dev/ui/state-management/arkts-provide-and-consume.md)、[@Consume](../../application-dev/ui/state-management/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, UIContext } from '@kit.ArkUI'; 107 108export class PromptActionClass { 109 static ctx: UIContext; 110 static contentNode: ComponentContent<Object>; 111 static options: promptAction.BaseDialogOptions; 112 113 static setContext(context: UIContext) { 114 PromptActionClass.ctx = context; 115 } 116 117 static setContentNode(node: ComponentContent<Object>) { 118 PromptActionClass.contentNode = node; 119 } 120 121 static setOptions(options: promptAction.BaseDialogOptions) { 122 PromptActionClass.options = options; 123 } 124 125 static openDialog() { 126 if (PromptActionClass.contentNode !== null) { 127 PromptActionClass.ctx.getPromptAction().openCustomDialog(PromptActionClass.contentNode, PromptActionClass.options) 128 .then(() => { 129 console.info('OpenCustomDialog complete.') 130 }) 131 .catch((error: BusinessError) => { 132 let message = (error as BusinessError).message; 133 let code = (error as BusinessError).code; 134 console.error(`OpenCustomDialog args error code is ${code}, message is ${message}`); 135 }) 136 } 137 } 138 139 static closeDialog() { 140 if (PromptActionClass.contentNode !== null) { 141 PromptActionClass.ctx.getPromptAction().closeCustomDialog(PromptActionClass.contentNode) 142 .then(() => { 143 console.info('CloseCustomDialog complete.') 144 }) 145 .catch((error: BusinessError) => { 146 let message = (error as BusinessError).message; 147 let code = (error as BusinessError).code; 148 console.error(`CloseCustomDialog args error code is ${code}, message is ${message}`); 149 }) 150 } 151 } 152 153 static updateDialog(options: promptAction.BaseDialogOptions) { 154 if (PromptActionClass.contentNode !== null) { 155 PromptActionClass.ctx.getPromptAction().updateCustomDialog(PromptActionClass.contentNode, options) 156 .then(() => { 157 console.info('UpdateCustomDialog complete.') 158 }) 159 .catch((error: BusinessError) => { 160 let message = (error as BusinessError).message; 161 let code = (error as BusinessError).code; 162 console.error(`UpdateCustomDialog args error code is ${code}, message is ${message}`); 163 }) 164 } 165 } 166} 167``` 168 169```ts 170// Index.ets 171import { ComponentContent } from '@kit.ArkUI'; 172import { PromptActionClass } from './PromptActionClass'; 173 174class Params { 175 text: string = "" 176 177 constructor(text: string) { 178 this.text = text; 179 } 180} 181 182@Builder 183function buildText(params: Params) { 184 Column() { 185 Text(params.text) 186 .fontSize(50) 187 .fontWeight(FontWeight.Bold) 188 .margin({ bottom: 36 }) 189 Button('Close') 190 .onClick(() => { 191 PromptActionClass.closeDialog() 192 }) 193 }.backgroundColor('#FFF0F0F0') 194} 195 196@Entry 197@Component 198struct Index { 199 @State message: string = "hello" 200 private ctx: UIContext = this.getUIContext(); 201 private contentNode: ComponentContent<Object> = 202 new ComponentContent(this.ctx, wrapBuilder(buildText), new Params(this.message)); 203 204 aboutToAppear(): void { 205 PromptActionClass.setContext(this.ctx); 206 PromptActionClass.setContentNode(this.contentNode); 207 PromptActionClass.setOptions({ alignment: DialogAlignment.Top, offset: { dx: 0, dy: 50 } }); 208 } 209 210 build() { 211 Row() { 212 Column() { 213 Button("open dialog and update options") 214 .margin({ top: 50 }) 215 .onClick(() => { 216 PromptActionClass.openDialog() 217 218 setTimeout(() => { 219 PromptActionClass.updateDialog({ 220 alignment: DialogAlignment.Bottom, 221 offset: { dx: 0, dy: -50 } 222 }) 223 }, 1500) 224 }) 225 Button("open dialog and update content") 226 .margin({ top: 50 }) 227 .onClick(() => { 228 PromptActionClass.openDialog() 229 230 setTimeout(() => { 231 this.contentNode.update(new Params('update')) 232 }, 1500) 233 }) 234 } 235 .width('100%') 236 .height('100%') 237 } 238 .height('100%') 239 } 240} 241``` 242 243  244 245 246
