1# 自定义弹窗 2 3> **说明：** 4> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 5 6 7通过CustomDialogController类显示自定义弹窗。使用弹窗组件时，可优先考虑自定义弹窗，便于自定义弹窗的样式与内容。 8 9 10## 接口 11 12CustomDialogController(value:{builder: CustomDialog, cancel?: () => void, autoCancel?: boolean, alignment?: DialogAlignment, offset?: Offset, customStyle?: boolean}) 13 14 15- 参数 16 | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 17 | -------- | -------- | -------- | -------- | -------- | 18 | builder | any | 是 | - | 自定义弹窗内容构造器。 | 19 | cancel | () => void | 否 | - | 点击遮障层退出时的回调。 | 20 | autoCancel | boolean | 否 | true | 是否允许点击遮障层退出。 | 21 | alignment | DialogAlignment | 否 | DialogAlignment.Default | 弹窗在竖直方向上的对齐方式。 | 22 | offset | {<br/>dx: Length \| [Resource](ts-types.md#resource),<br/>dy: Length \| [Resource](ts-types.md#resource)<br/>} | 否 | - | 弹窗相对alignment所在位置的偏移量。 | 23 | customStyle | boolean | 否 | false | 弹窗容器样式是否自定义。 | 24 | gridCount<sup>8+</sup> | number | 否 | - | 弹窗宽度占栅格宽度的个数。 | 25 26## DialogAlignment枚举说明 27| 名称 | 描述 | 28| -------- | -------- | 29| Top | 垂直顶部对齐。 | 30| Center | 垂直居中对齐。 | 31| Bottom | 垂直底部对齐。 | 32| Default | 默认对齐。<br/>**说明：**<br/>与枚举值Center效果相同。 | 33| TopStart<sup>8+</sup> | 左上对齐。 | 34| TopEnd<sup>8+</sup> | 右上对齐。 | 35| CenterStart<sup>8+</sup> | 左中对齐。 | 36| CenterEnd<sup>8+</sup> | 右中对齐。 | 37| BottomStart<sup>8+</sup> | 左下对齐。 | 38| BottomEnd<sup>8+</sup> | 右下对齐。 | 39 40 41## CustomDialogController 42 43### 导入对象 44 45``` 46dialogController : CustomDialogController = new CustomDialogController(value:{builder: CustomDialog, cancel?: () => void, autoCancel?: boolean}) 47``` 48 49### open() 50open(): void 51 52 53显示自定义弹窗内容，若已显示，则不生效。 54 55 56### close 57close(): void 58 59 60关闭显示的自定义弹窗，若已关闭，则不生效。 61 62 63## 示例 64 65``` 66// xxx.ets 67@CustomDialog 68struct CustomDialogExample { 69 @Link textValue: string 70 @Link inputValue: string 71 controller: CustomDialogController 72 cancel: () => void 73 confirm: () => void 74 75 build() { 76 Column() { 77 Text('Change text').fontSize(20).margin({ top: 10, bottom: 10 }) 78 TextInput({ placeholder: '', text: this.textValue }).height(60).width('90%') 79 .onChange((value: string) => { 80 this.textValue = value 81 }) 82 Text('Whether to change a text?').fontSize(16).margin({ bottom: 10 }) 83 Flex({ justifyContent: FlexAlign.SpaceAround }) { 84 Button('cancel') 85 .onClick(() => { 86 this.controller.close() 87 this.cancel() 88 }).backgroundColor(0xffffff).fontColor(Color.Black) 89 Button('confirm') 90 .onClick(() => { 91 this.inputValue = this.textValue 92 this.controller.close() 93 this.confirm() 94 }).backgroundColor(0xffffff).fontColor(Color.Red) 95 }.margin({ bottom: 10 }) 96 } 97 } 98} 99 100@Entry 101@Component 102struct CustomDialogUser { 103 @State textValue: string = '' 104 @State inputValue: string = 'click me' 105 dialogController: CustomDialogController = new CustomDialogController({ 106 builder: CustomDialogExample({ cancel: this.onCancel, confirm: this.onAccept, textValue: $textValue, inputValue: $inputValue }), 107 cancel: this.existApp, 108 autoCancel: true 109 }) 110 111 onCancel() { 112 console.info('Callback when the first button is clicked') 113 } 114 onAccept() { 115 console.info('Callback when the second button is clicked') 116 } 117 existApp() { 118 console.info('Click the callback in the blank area') 119 } 120 121 build() { 122 Column() { 123 Button(this.inputValue) 124 .onClick(() => { 125 this.dialogController.open() 126 }).backgroundColor(0x317aff) 127 }.width('100%').margin({ top: 5 }) 128 } 129} 130``` 131 132 133
