1# 自定义弹窗 2 3通过CustomDialogController类显示自定义弹窗。使用弹窗组件时，可优先考虑自定义弹窗，便于自定义弹窗的样式与内容。 4 5> **说明：** 6> 7> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10 11 12## 接口 13 14CustomDialogController(value:{builder: CustomDialog, cancel?: () => void, autoCancel?: boolean, alignment?: DialogAlignment, offset?: Offset, customStyle?: boolean, gridCount?: number}) 15 16 17**参数:** 18 19| 参数名 | 参数类型 | 必填 | 参数描述 | 20| ---------------------- | ---------------------------------------- | ---- | ---------------------------------------- | 21| builder | CustomDialog | 是 | 自定义弹窗内容构造器。 | 22| cancel | () => void | 否 | 点击遮障层退出时的回调。 | 23| autoCancel | boolean | 否 | 是否允许点击遮障层退出。<br>默认值：true | 24| alignment | [DialogAlignment](ts-methods-alert-dialog-box.md#dialogalignment枚举说明) | 否 | 弹窗在竖直方向上的对齐方式。<br>默认值：DialogAlignment.Default | 25| offset | [Offset](ts-types.md#offset) | 否 | 弹窗相对alignment所在位置的偏移量。 | 26| customStyle | boolean | 否 | 弹窗容器样式是否自定义。<br>默认值：false，弹窗容器的宽度根据栅格系统自适应，不跟随子节点；高度自适应子节点，最大为窗口高度的90%；圆角为24vp。 | 27| gridCount<sup>8+</sup> | number | 否 | 弹窗宽度占[栅格宽度](../../ui/arkts-layout-development-grid-layout.md)的个数。<br>默认为按照窗口大小自适应，异常值按默认值处理，最大栅格数为系统最大栅格数。 | 28 29## CustomDialogController 30 31### 导入对象 32 33```ts 34dialogController : CustomDialogController = new CustomDialogController(value:{builder: CustomDialog, cancel?: () => void, autoCancel?: boolean}) 35``` 36**说明**：CustomDialogController仅在作为@CustomDialog和@Component struct的成员变量，且在@Component struct内部定义时赋值才有效，具体用法可看下方示例。 37 38### open() 39open(): void 40 41 42显示自定义弹窗内容，允许多次使用，但如果弹框为SubWindow模式，则该弹框不允许再弹出SubWindow弹框。 43 44 45### close 46close(): void 47 48 49关闭显示的自定义弹窗，若已关闭，则不生效。 50 51 52## 示例 53 54```ts 55// xxx.ets 56@CustomDialog 57struct CustomDialogExample { 58 @Link textValue: string 59 @Link inputValue: string 60 controller: CustomDialogController 61 // 若尝试在CustomDialog中传入多个其他的Controller，以实现在CustomDialog中打开另一个或另一些CustomDialog，那么此处需要将指向自己的controller放在最后 62 cancel: () => void 63 confirm: () => void 64 65 build() { 66 Column() { 67 Text('Change text').fontSize(20).margin({ top: 10, bottom: 10 }) 68 TextInput({ placeholder: '', text: this.textValue }).height(60).width('90%') 69 .onChange((value: string) => { 70 this.textValue = value 71 }) 72 Text('Whether to change a text?').fontSize(16).margin({ bottom: 10 }) 73 Flex({ justifyContent: FlexAlign.SpaceAround }) { 74 Button('cancel') 75 .onClick(() => { 76 this.controller.close() 77 this.cancel() 78 }).backgroundColor(0xffffff).fontColor(Color.Black) 79 Button('confirm') 80 .onClick(() => { 81 this.inputValue = this.textValue 82 this.controller.close() 83 this.confirm() 84 }).backgroundColor(0xffffff).fontColor(Color.Red) 85 }.margin({ bottom: 10 }) 86 } 87 // dialog默认的borderRadius为24vp，如果需要使用border属性，请和borderRadius属性一起使用。 88 } 89} 90 91@Entry 92@Component 93struct CustomDialogUser { 94 @State textValue: string = '' 95 @State inputValue: string = 'click me' 96 dialogController: CustomDialogController = new CustomDialogController({ 97 builder: CustomDialogExample({ 98 cancel: this.onCancel, 99 confirm: this.onAccept, 100 textValue: $textValue, 101 inputValue: $inputValue 102 }), 103 cancel: this.existApp, 104 autoCancel: true, 105 alignment: DialogAlignment.Bottom, 106 offset: { dx: 0, dy: -20 }, 107 gridCount: 4, 108 customStyle: false 109 }) 110 111 // 在自定义组件即将析构销毁时将dialogControlle删除和置空 112 aboutToDisappear() { 113 delete this.dialogController, // 删除dialogController 114 this.dialogController = undefined // 将dialogController置空 115 } 116 117 onCancel() { 118 console.info('Callback when the first button is clicked') 119 } 120 121 onAccept() { 122 console.info('Callback when the second button is clicked') 123 } 124 125 existApp() { 126 console.info('Click the callback in the blank area') 127 } 128 129 build() { 130 Column() { 131 Button(this.inputValue) 132 .onClick(() => { 133 if (this.dialogController != undefined) { 134 this.dialogController.open() 135 } 136 }).backgroundColor(0x317aff) 137 }.width('100%').margin({ top: 5 }) 138 } 139} 140``` 141 142 143
