1# Dialog 2 3 4弹出框是一种模态窗口，通常用于在保持当前的上下文环境时，临时展示用户需关注的信息或待处理的操作，用户在模态弹出框内完成上述交互任务。模态弹出框需要用户进行交互才能够退出模态模式。 5 6 7>  **说明：** 8> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 9 10 11## 导入模块 12 13``` 14import { TipsDialog, SelectDialog, ConfirmDialog, AlertDialog, LoadingDialog } from '@ohos.arkui.advanced.Dialog' 15``` 16 17 18## 子组件 19 20无 21 22 23## TipsDialog 24 25 26TipsDialog({controller: CustomDialogController, imageRes: Resource, imageSize: SizeOptions, title: ResourceStr, content?: ResourceStr, checkTips?: ResourceStr, ischecked?: boolean, primaryButton?: ButtonOptions, secondaryButton?: ButtonOptions}) 27 28 29提示弹出框，即为带图形确认框，必要时可通过图形化方式展现确认框。 30 31 32**装饰器类型：**\@CustomDialog 33 34 35**系统能力：** SystemCapability.ArkUI.ArkUI.Full 36 37 38**参数：** 39 40 41| 参数名 | 参数类型 | 必填 | 装饰器类型 | 描述 | 42| -------- | -------- | -------- | -------- | -------- | 43| controller | [CustomDialogController](https://docs.openharmony.cn/pages/v3.2/en/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md/) | 是 | - | 提示弹出框控制器。 | 44| imageRes | [Resource](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resource) | 是 | - | 展示的图片。 | 45| imageSize | [SizeOptions](https://docs.openharmony.cn/pages/v4.0/en/application-dev/reference/arkui-ts/ts-types.md/#sizeoptions) | 是 | - | 自定义图片尺寸。 | 46| title | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 是 | - | 提示弹出框标题。 | 47| content | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 否 | - | 提示弹出框内容。 | 48| checkTips | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 否 | - | checkbox的提示内容。 | 49| isChecked | boolean | 否 | \@Prop | value为true时，表示checkbox已选中，value为false时，表示未选中。<br/>默认值：false。 | 50| primaryButton | [ButtonOptions](#buttonoptions) | 否 | - | 提示框左侧按钮。 | 51| secondaryButton | [ButtonOptions](#buttonoptions) | 否 | - | 提示框右侧按钮。 | 52 53 54## SelectDialog 55 56SelectDialog({controller: CustomDialogController, title: ResourceStr, content?: ResourceStr, selectedIndex?: number, confirm?: ButtonOptions, radioContent?: Array<SheetInfo>}) 57 58选择类弹出框，弹框中以列表或网格的形式提供可选的的内容。 59 60**装饰器类型：**\@CustomDialog 61 62**系统能力：** SystemCapability.ArkUI.ArkUI.Full 63 64**参数：** 65 66| 参数名 | 参数类型 | 必填 | 描述 | 67| -------- | -------- | -------- | -------- | 68| controller | CustomDialogController | 是 | 选择弹出框控制器。 | 69| title | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 是 | 选择弹出框标题。 | 70| content | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 否 | 选择弹出框内容。 | 71| selectedIndex | number | 否 | 选择弹出框的选中项。 | 72| confirm | boolean | 否 | 确认按钮。 | 73| radioContent | Array<[SheetInfo](https://docs.openharmony.cn/pages/v3.2/en/application-dev/reference/arkui-ts/ts-methods-action-sheet.md/)> | 否 | 选择弹出框的子项内容列表，每个选择项支持设置图片、文本和选中的回调事件。 | 74 75 76## ConfirmDialog 77 78ConfirmDialog({controller: CustomDialogController, title: ResourceStr, content?: ResourceStr, checkTips?: ResourceStr, ischecked?: boolean, primaryButton?: ButtonOptions, secondaryButton?: ButtonOptions}) 79 80信息确认类弹出框，操作未正确执行（如网络错误、电池电量过低），或未正确操作时（如指纹录入），反馈的错误或提示信息。 81 82**装饰器类型：**\@CustomDialog 83 84**系统能力：** SystemCapability.ArkUI.ArkUI.Full 85 86**参数：** 87 88| 参数名 | 参数类型 | 必选 | 装饰器类型 | 参数描述 | 89| -------- | -------- | -------- | -------- | -------- | 90| controller | CustomDialogController | 是 | - | 确认弹出框控制器。 | 91| title | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 是 | - | 确认弹出框标题。 | 92| content | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 否 | - | 确认弹出框内容。 | 93| checkTips | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 否 | - | checkbox的提示内容。 | 94| isChecked | boolean | 否 | \@Prop | value为true时，表示checkbox已选中，value为false时，表示未选中。<br/>默认值：false。 | 95| primaryButton | [ButtonOptions](#buttonoptions) | 否 | - | 确认框左侧按钮。 | 96| secondaryButton | [ButtonOptions](#buttonoptions) | 否 | - | 确认框右侧按钮。 | 97 98 99## AlertDialog 100 101AlertDialog({controller: CustomDialogController, content?: ResourceStr, primaryButton?: ButtonOptions, secondaryButton?: ButtonOptions}) 102 103操作确认类弹出框，触发一个将产生严重后果的不可逆操作时，如删除、重置、取消编辑、停止等。 104 105**装饰器类型：**\@CustomDialog 106 107**系统能力：** SystemCapability.ArkUI.ArkUI.Full 108 109**参数：** 110 111| 参数名 | 参数类型 | 必选 | 参数描述 | 112| -------- | -------- | -------- | -------- | 113| controller | CustomDialogController | 是 | 确认弹出框控制器。 | 114| content | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 是 | 确认弹出框内容。 | 115| primaryButton | [ButtonOptions](#buttonoptions) | 否 | 确认框左侧按钮。 | 116| secondaryButton | [ButtonOptions](#buttonoptions) | 否 | 确认框右侧按钮。 | 117 118 119## LoadingDialog 120 121LoadingDialog({controller: CustomDialogController, content?: ResourceStr}) 122 123**参数：** 124 125| 参数名 | 参数类型 | 必选 | 参数描述 | 126| -------- | -------- | -------- | -------- | 127| controller | CustomDialogController | 是 | 加载弹出框控制器。 | 128| content | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 是 | 加载弹出框内容。 | 129 130 131## ButtonOptions 132 133**系统能力：** SystemCapability.ArkUI.ArkUI.Full 134 135| 名称 | 类型 | 必填 | 描述 | 136| -------- | -------- | -------- | -------- | 137| value | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 是 | 按钮的内容。 | 138| action | () => void | 否 | 按钮的点击事件。 | 139| background | [ResourceColor](https://docs.openharmony.cn/pages/v3.2/en/application-dev/reference/arkui-ts/ts-types.md/#resourcecolor) | 否 | 按钮的背景。 | 140| fontColor | [ResourceColor](https://docs.openharmony.cn/pages/v3.2/en/application-dev/reference/arkui-ts/ts-types.md/#resourcecolor) | 否 | 按钮的字体颜色。 | 141 142 143## 示例 144 145 146### 示例1 147 148``` 149import { TipsDialog } from '@ohos.arkui.advanced.Dialog' 150@Entry 151@Component 152struct Index { 153 radioIndex = 0; 154 isChecked = false; 155 dialogControllerImage: CustomDialogController = new CustomDialogController({ 156 builder: TipsDialog({ 157 imageRes: $r('app.media.icon'), 158 title: '文本标题', 159 content: '文本文本文本文本文本文本文本文本文本', 160 isChecked: this.isChecked, 161 checkTips: '不再提示', 162 primaryButton: { 163 value: '取消', 164 action: () => { 165 console.info('Callback when the CheckBox is clicked') 166 }, 167 }, 168 secondaryButton: { 169 value: '确定', 170 action: () => { 171 console.info('Callback when the second button is clicked') 172 } 173 }, 174 }), 175 autoCancel: true, 176 customStyle: true, 177 alignment: DialogAlignment.Bottom 178 }) 179 180 build() { 181 Row() { 182 Stack() { 183 Column(){ 184 Button("上图下文弹出框") 185 .width(96) 186 .height(40) 187 .onClick(() => { 188 this.dialogControllerImage.open() 189 }) 190 }.margin({bottom: 300}) 191 }.align(Alignment.Bottom) 192 .width('100%').height('100%') 193 } 194 .backgroundImageSize({ width: '100%', height: '100%' }) 195 .height('100%') 196 } 197} 198``` 199 200 201 202 203### 示例2 204 205``` 206import { SelectDialog } from '@ohos.arkui.advanced.Dialog' 207@Entry 208@Component 209struct Index { 210 radioIndex = 0; 211 isChecked = false; 212dialogControllerList: CustomDialogController = new CustomDialogController({ 213 builder: SelectDialog({ 214 title: '文本标题', 215 selectedIndex: this.radioIndex, 216 confirm: { 217 value: '取消', 218 action: () => null, 219 }, 220 radioContent: [ 221 { 222 title: '文本文本文本文本文本', 223 action: () => { 224 this.radioIndex = 0 225 } 226 }, 227 { 228 title: '文本文本文本文本', 229 action: () => { 230 this.radioIndex = 1 231 } 232 }, 233 { 234 title: '文本文本文本文本', 235 action: () => { 236 this.radioIndex = 2 237 } 238 }, 239 ] 240 }), 241 customStyle: true, 242 alignment: DialogAlignment.Bottom, 243 autoCancel: false 244}) 245 246 build() { 247 Row() { 248 Stack() { 249 Column(){ 250 Button("纯列表弹出框") 251 .width(96) 252 .height(40) 253 .onClick(() => { 254 this.dialogControllerList.open() 255 }) 256 }.margin({bottom: 300}) 257 }.align(Alignment.Bottom) 258 .width('100%').height('100%') 259 } 260 .backgroundImageSize({ width: '100%', height: '100%' }) 261 .height('100%') 262 } 263} 264``` 265 266 267 268 269### 示例3 270 271``` 272import { ConfirmDialog } from '@ohos.arkui.advanced.Dialog' 273@Entry 274@Component 275struct Index { 276 radioIndex = 0; 277 isChecked = false; 278dialogControllerCheckBox: CustomDialogController = new CustomDialogController({ 279 builder: CheckBoxDialog({ 280 title: '文本标题', 281 content: '文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本', 282 isChecked: this.isChecked, 283 checkTips: '禁止后不再提示', 284 primaryButton: { 285 value: '禁止', 286 action: () => null, 287 }, 288 secondaryButton: { 289 value: '允许', 290 action: () => { 291 this.isChecked = false 292 console.info('Callback when the second button is clicked') 293 } 294 }, 295 }), 296 autoCancel: true, 297 customStyle: true, 298 alignment: DialogAlignment.Bottom 299}) 300 301 build() { 302 Row() { 303 Stack() { 304 Column(){ 305 Button("文本+勾选弹出框") 306 .width(96) 307 .height(40) 308 .onClick(() => { 309 this.dialogControllerCheckBox.open() 310 }) 311 }.margin({bottom: 300}) 312 }.align(Alignment.Bottom) 313 .width('100%').height('100%') 314 } 315 .backgroundImageSize({ width: '100%', height: '100%' }) 316 .height('100%') 317 } 318} 319``` 320 321 322 323 324### 示例4 325 326``` 327import { AlertDialog } from '@ohos.arkui.advanced.Dialog' 328@Entry 329@Component 330struct Index { 331 radioIndex = 0; 332 isChecked = false; 333dialogControllerConfirm: CustomDialogController = new CustomDialogController({ 334 builder: AlertDialog({ 335 content: '文本文本文本文本文本', 336 primaryButton: { 337 value: '取消', 338 action: () => null, 339 }, 340 secondaryButton: { 341 value: '确认', 342 fontColor: $r('sys.color.ohos_id_color_warning'), 343 action: () => { 344 console.info('Callback when the second button is clicked') 345 } 346 }, 347 }), 348 autoCancel: true, 349 customStyle: true, 350 alignment: DialogAlignment.Bottom 351}) 352 353 build() { 354 Row() { 355 Stack() { 356 Column(){ 357 Button("纯文本弹出框") 358 .width(96) 359 .height(40) 360 .onClick(() => { 361 this.dialogControllerConfirm.open() 362 }) 363 }.margin({bottom: 300}) 364 }.align(Alignment.Bottom) 365 .width('100%').height('100%') 366 } 367 .backgroundImageSize({ width: '100%', height: '100%' }) 368 .height('100%') 369 } 370} 371``` 372 373 374 375 376### 示例5 377 378``` 379import { LoadingDialog } from '@ohos.arkui.advanced.Dialog' 380@Entry 381@Component 382struct Index { 383 radioIndex = 0; 384 isChecked = false; 385dialogControllerProgress: CustomDialogController = new CustomDialogController({ 386 builder: ProgressDialog({ 387 content: '文本文本文本文本文本...', 388 }), 389 autoCancel: true, 390 customStyle: true, 391 alignment: DialogAlignment.Bottom 392}) 393 394 build() { 395 Row() { 396 Stack() { 397 Column(){ 398 Button("进度条弹出框") 399 .width(96) 400 .height(40) 401 .onClick(() => { 402 this.dialogControllerProgress.open() 403 }) 404 }.margin({bottom: 300}) 405 }.align(Alignment.Bottom) 406 .width('100%').height('100%') 407 } 408 .backgroundImageSize({ width: '100%', height: '100%' }) 409 .height('100%') 410 } 411} 412``` 413 414 415
