1# 自定义弹窗 (CustomDialog) 2 3 4CustomDialog是自定义弹窗，可用于广告、中奖、警告、软件更新等与用户交互响应操作。开发者可以通过CustomDialogController类显示自定义弹窗。具体用法请参考[自定义弹窗](../reference/apis-arkui/arkui-ts/ts-methods-custom-dialog-box.md)。 5 6 7## 创建自定义弹窗 8 91. 使用\@CustomDialog装饰器装饰自定义弹窗。 10 112. \@CustomDialog装饰器用于装饰自定义弹框，此装饰器内进行自定义内容（也就是弹框内容）。 12 13 ```ts 14 @CustomDialog 15 struct CustomDialogExample { 16 controller: CustomDialogController = new CustomDialogController({ 17 builder: CustomDialogExample({}), 18 }) 19 20 build() { 21 Column() { 22 Text('我是内容') 23 .fontSize(20) 24 .margin({ top: 10, bottom: 10 }) 25 } 26 } 27 } 28 ``` 29 303. 创建构造器，与装饰器呼应相连。 31 32 ```ts 33 @Entry 34 @Component 35 struct CustomDialogUser { 36 dialogController: CustomDialogController = new CustomDialogController({ 37 builder: CustomDialogExample(), 38 }) 39 } 40 ``` 41 424. 点击与onClick事件绑定的组件使弹窗弹出。 43 44 ```ts 45 @Entry 46 @Component 47 struct CustomDialogUser { 48 dialogController: CustomDialogController = new CustomDialogController({ 49 builder: CustomDialogExample(), 50 }) 51 52 build() { 53 Column() { 54 Button('click me') 55 .onClick(() => { 56 this.dialogController.open() 57 }) 58 }.width('100%').margin({ top: 5 }) 59 } 60 } 61 ``` 62 63  64 65 66## 弹窗的交互 67 68弹窗可用于数据交互，完成用户一系列响应操作。 69 70 711. 在\@CustomDialog装饰器内添加按钮，同时添加数据函数。 72 73 ```ts 74 @CustomDialog 75 struct CustomDialogExample { 76 cancel?: () => void 77 confirm?: () => void 78 controller: CustomDialogController 79 80 build() { 81 Column() { 82 Text('我是内容').fontSize(20).margin({ top: 10, bottom: 10 }) 83 Flex({ justifyContent: FlexAlign.SpaceAround }) { 84 Button('cancel') 85 .onClick(() => { 86 this.controller.close() 87 if (this.cancel) { 88 this.cancel() 89 } 90 }).backgroundColor(0xffffff).fontColor(Color.Black) 91 Button('confirm') 92 .onClick(() => { 93 this.controller.close() 94 if (this.confirm) { 95 this.confirm() 96 } 97 }).backgroundColor(0xffffff).fontColor(Color.Red) 98 }.margin({ bottom: 10 }) 99 } 100 } 101 } 102 ``` 103 1042. 页面内需要在构造器内进行接收，同时创建相应的函数操作。 105 106 ```ts 107 @Entry 108 @Component 109 struct CustomDialogUser { 110 dialogController: CustomDialogController = new CustomDialogController({ 111 builder: CustomDialogExample({ 112 cancel: ()=> { this.onCancel() }, 113 confirm: ()=> { this.onAccept() }, 114 }), 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 build() { 126 Column() { 127 Button('click me') 128 .onClick(() => { 129 this.dialogController.open() 130 }) 131 }.width('100%').margin({ top: 5 }) 132 } 133 } 134 ``` 135 136  137 138## 弹窗的动画 139 140弹窗通过定义openAnimation控制弹窗出现动画的持续时间，速度等参数。 141 142```ts 143@CustomDialog 144struct CustomDialogExample { 145 controller?: CustomDialogController 146 147 build() { 148 Column() { 149 Text('Whether to change a text?').fontSize(16).margin({ bottom: 10 }) 150 } 151 } 152} 153 154@Entry 155@Component 156struct CustomDialogUser { 157 @State textValue: string = '' 158 @State inputValue: string = 'click me' 159 dialogController: CustomDialogController | null = new CustomDialogController({ 160 builder: CustomDialogExample(), 161 openAnimation: { 162 duration: 1200, 163 curve: Curve.Friction, 164 delay: 500, 165 playMode: PlayMode.Alternate, 166 onFinish: () => { 167 console.info('play end') 168 } 169 }, 170 autoCancel: true, 171 alignment: DialogAlignment.Bottom, 172 offset: { dx: 0, dy: -20 }, 173 gridCount: 4, 174 customStyle: false, 175 backgroundColor: 0xd9ffffff, 176 cornerRadius: 10, 177 }) 178 179 // 在自定义组件即将析构销毁时将dialogControlle置空 180 aboutToDisappear() { 181 this.dialogController = null // 将dialogController置空 182 } 183 184 build() { 185 Column() { 186 Button(this.inputValue) 187 .onClick(() => { 188 if (this.dialogController != null) { 189 this.dialogController.open() 190 } 191 }).backgroundColor(0x317aff) 192 }.width('100%').margin({ top: 5 }) 193 } 194} 195``` 196 197 198 199## 完整示例 200 201```ts 202@CustomDialog 203struct CustomDialogExample { 204 cancel?: () => void 205 confirm?: () => void 206 controller: CustomDialogController 207 208 build() { 209 Column() { 210 Text('我是内容').fontSize(20).margin({ top: 10, bottom: 10 }) 211 Flex({ justifyContent: FlexAlign.SpaceAround }) { 212 Button('cancel') 213 .onClick(() => { 214 this.controller.close() 215 if (this.cancel) { 216 this.cancel() 217 } 218 }).backgroundColor(0xffffff).fontColor(Color.Black) 219 Button('confirm') 220 .onClick(() => { 221 this.controller.close() 222 if (this.confirm) { 223 this.confirm() 224 } 225 }).backgroundColor(0xffffff).fontColor(Color.Red) 226 }.margin({ bottom: 10 }) 227 } 228 } 229} 230 231@Entry 232@Component 233struct CustomDialogUser { 234 dialogController: CustomDialogController = new CustomDialogController({ 235 builder: CustomDialogExample({ 236 cancel: ()=> { this.onCancel() }, 237 confirm: ()=> { this.onAccept() }, 238 }), 239 }) 240 241 onCancel() { 242 console.info('Callback when the first button is clicked') 243 } 244 245 onAccept() { 246 console.info('Callback when the second button is clicked') 247 } 248 249 build() { 250 Column() { 251 Button('click me') 252 .onClick(() => { 253 this.dialogController.open() 254 }) 255 }.width('100%').margin({ top: 5 }) 256 } 257} 258``` 259 260## 相关实例 261 262针对自定义弹窗开发，有以下相关实例可供参考： 263 264- [自定义弹窗（ArkTS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/CustomDialog) 265 266- [构建多种样式弹窗（ArkTS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/MultipleDialog) 267 268- [目标管理（ArkTS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/TargetManagement)
