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, maskColor?: ResourceColor, openAnimation?: AnimateParam, closeAniamtion?: AnimateParam}) 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>默认值为4，异常值按默认值处理，最大栅格数为系统最大栅格数。 | 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显示自定义弹窗内容，若已显示，则不生效。 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 cancel: () => void 62 confirm: () => void 63 64 build() { 65 Column() { 66 Text('Change text').fontSize(20).margin({ top: 10, bottom: 10 }) 67 TextInput({ placeholder: '', text: this.textValue }).height(60).width('90%') 68 .onChange((value: string) => { 69 this.textValue = value 70 }) 71 Text('Whether to change a text?').fontSize(16).margin({ bottom: 10 }) 72 Flex({ justifyContent: FlexAlign.SpaceAround }) { 73 Button('cancel') 74 .onClick(() => { 75 this.controller.close() 76 this.cancel() 77 }).backgroundColor(0xffffff).fontColor(Color.Black) 78 Button('confirm') 79 .onClick(() => { 80 this.inputValue = this.textValue 81 this.controller.close() 82 this.confirm() 83 }).backgroundColor(0xffffff).fontColor(Color.Red) 84 }.margin({ bottom: 10 }) 85 } 86 } 87} 88 89@Entry 90@Component 91struct CustomDialogUser { 92 @State textValue: string = '' 93 @State inputValue: string = 'click me' 94 dialogController: CustomDialogController = new CustomDialogController({ 95 builder: CustomDialogExample({ 96 cancel: this.onCancel, 97 confirm: this.onAccept, 98 textValue: $textValue, 99 inputValue: $inputValue 100 }), 101 cancel: this.existApp, 102 autoCancel: true, 103 alignment: DialogAlignment.Default, 104 offset: { dx: 0, dy: -20 }, 105 gridCount: 4, 106 customStyle: false 107 }) 108 109 aboutToDisappear() { 110 delete this.dialogController, 111 this.dialogController = undefined 112 } 113 114 onCancel() { 115 console.info('Callback when the first button is clicked') 116 } 117 118 onAccept() { 119 console.info('Callback when the second button is clicked') 120 } 121 122 existApp() { 123 console.info('Click the callback in the blank area') 124 } 125 126 build() { 127 Column() { 128 Button(this.inputValue) 129 .onClick(() => { 130 if (this.dialogController != undefined) { 131 this.dialogController.open() 132 } 133 }).backgroundColor(0x317aff) 134 }.width('100%').margin({ top: 5 }) 135 } 136} 137``` 138 139 140
