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