1# 弹出框 (Dialog) 2 3 4弹出框是一种模态窗口，通常用于在保持当前的上下文环境时，临时展示用户需关注的信息或待处理的操作，用户在模态弹出框内完成上述交互任务。模态弹出框需要用户进行交互才能够退出模态模式。 5 6 7> **说明：** 8> 9> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 10 11 12## 导入模块 13 14``` 15import { TipsDialog, SelectDialog, ConfirmDialog, AlertDialog, LoadingDialog, CustomContentDialog } from '@kit.ArkUI' 16``` 17 18 19## 子组件 20 21无 22 23## 属性 24 25不支持[通用属性](ts-component-general-attributes.md)。 26 27## TipsDialog 28 29 30TipsDialog({controller: CustomDialogController, imageRes: Resource, imageSize?: SizeOptions, title?: ResourceStr, content?: ResourceStr, checkTips?: ResourceStr, ischecked?: boolean, checkAction?: (isChecked: boolean) => void, primaryButton?: ButtonOptions, secondaryButton?: ButtonOptions}) 31 32 33提示弹出框，即为带图形确认框，必要时可通过图形化方式展现确认框。 34 35 36**装饰器类型：**\@CustomDialog 37 38 39**系统能力：** SystemCapability.ArkUI.ArkUI.Full 40 41| 名称 | 类型 | 必填 | 装饰器类型 | 说明 | 42| ----------------------------- | ------------------------------------------------------------ | ---- | ---------- | ------------------------------------------------------------ | 43| controller | [CustomDialogController](ts-methods-custom-dialog-box.md#customdialogcontroller) | 是 | - | 提示弹出框控制器。<br/>**说明：** 未使用@Require装饰，构造时不强制校验参数。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 44| imageRes | [ResourceStr<sup>12+</sup>](ts-types.md#resourcestr) \| [PixelMap<sup>12+</sup>](../../apis-image-kit/js-apis-image.md#pixelmap7) | 是 | - | 展示的图片。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 45| imageSize | [SizeOptions](ts-types.md#sizeoptions) | 否 | - | 自定义图片尺寸。<br/>默认值：64*64vp<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 46| title | [ResourceStr](ts-types.md#resourcestr) | 否 | - | 提示弹出框标题。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 47| content | [ResourceStr](ts-types.md#resourcestr) | 否 | - | 提示弹出框内容。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 48| checkTips | [ResourceStr](ts-types.md#resourcestr) | 否 | - | checkbox的提示内容。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 49| isChecked | boolean | 否 | \@Prop | value为true时，表示checkbox已选中，value为false时，表示未选中。<br/>默认值：false<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 50| checkAction<sup>12+</sup> | (isChecked: boolean) => void | 否 | - | 现推荐使用 onCheckedChange<sup>12+</sup>。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 51| onCheckedChange<sup>12+</sup> | Callback\<boolean> | 否 | - | checkbox的选中状态改变事件。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 52| primaryButton | [ButtonOptions](#buttonoptions) | 否 | - | 提示框左侧按钮。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 53| secondaryButton | [ButtonOptions](#buttonoptions) | 否 | - | 提示框右侧按钮。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 54| theme<sup>12+</sup> | [Theme](../js-apis-arkui-theme.md#theme) \| [CustomTheme](../js-apis-arkui-theme.md#customtheme) | 否 | - | 主题信息，可以是CustomTheme或从onWillApplyTheme中获取的Theme实例。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 55| themeColorMode<sup>12+</sup> | [ThemeColorMode](ts-container-with-theme.md#themecolormode10枚举说明) | 否 | - | 自定义弹窗深浅色模式。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 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| controller | [CustomDialogController](ts-methods-custom-dialog-box.md#customdialogcontroller) | 是 | 选择弹出框控制器。<br/>**说明：** 未使用@Require装饰，构造时不强制校验参数。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 70| title | [ResourceStr](ts-types.md#resourcestr) | 是 | 选择弹出框标题。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 71| content | [ResourceStr](ts-types.md#resourcestr) | 否 | 选择弹出框内容。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 72| selectedIndex | number | 否 | 选择弹出框的选中项。<br/>取值范围：大于等于-1的整数。<br/>默认值：-1，没有选中项。若设置数值小于-1，按没有选中项处理。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 73| confirm | [ButtonOptions](#buttonoptions) | 否 | 选择弹出框底部按钮。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 74| radioContent | Array<[SheetInfo](ts-methods-action-sheet.md#sheetinfo对象说明)> | 是 | 选择弹出框的子项内容列表，每个选择项支持设置文本和选中的回调事件。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 75| theme<sup>12+</sup> | [Theme](../js-apis-arkui-theme.md#theme) \| [CustomTheme](../js-apis-arkui-theme.md#customtheme) | 否 | 主题信息，可以是CustomTheme或从onWillApplyTheme中获取的Theme实例。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 76| themeColorMode<sup>12+</sup> | [ThemeColorMode](ts-container-with-theme.md#themecolormode10枚举说明) | 否 | 自定义弹窗深浅色模式。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 77 78## ConfirmDialog 79 80ConfirmDialog({controller: CustomDialogController, title: ResourceStr, content?: ResourceStr, checkTips?: ResourceStr, ischecked?: boolean, primaryButton?: ButtonOptions, secondaryButton?: ButtonOptions}) 81 82信息确认类弹出框，操作未正确执行（如网络错误、电池电量过低），或未正确操作时（如指纹录入），反馈的错误或提示信息。 83 84**装饰器类型：**\@CustomDialog 85 86**系统能力：** SystemCapability.ArkUI.ArkUI.Full 87 88| 名称 | 类型 | 必填 | 装饰器类型 | 说明 | 89| ----------------------------- | ------------------------------------------------------------ | ---- | ---------- | ------------------------------------------------------------ | 90| controller | [CustomDialogController](ts-methods-custom-dialog-box.md#customdialogcontroller) | 是 | - | 确认弹出框控制器。<br/>**说明：** 未使用@Require装饰，构造时不强制校验参数。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 91| title | [ResourceStr](ts-types.md#resourcestr) | 是 | - | 确认弹出框标题。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 92| content | [ResourceStr](ts-types.md#resourcestr) | 否 | - | 确认弹出框内容。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 93| checkTips | [ResourceStr](ts-types.md#resourcestr) | 否 | - | checkbox的提示内容。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 94| isChecked | boolean | 否 | \@Prop | value为true时，表示checkbox已选中，value为false时，表示未选中。<br/>默认值：false<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 95| onCheckedChange<sup>12+</sup> | Callback\<boolean> | 否 | - | checkbox的选中状态改变事件。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 96| primaryButton | [ButtonOptions](#buttonoptions) | 否 | - | 确认框左侧按钮。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 97| secondaryButton | [ButtonOptions](#buttonoptions) | 否 | - | 确认框右侧按钮。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 98| theme<sup>12+</sup> | [Theme](../js-apis-arkui-theme.md#theme)\| [CustomTheme](../js-apis-arkui-theme.md#customtheme) | 否 | - | 主题信息，可以是CustomTheme或从onWillApplyTheme中获取的Theme实例。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 99| themeColorMode<sup>12+</sup> | [ThemeColorMode](ts-container-with-theme.md#themecolormode10枚举说明) | 否 | - | 自定义弹窗深浅色模式。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 100 101 102## AlertDialog 103 104AlertDialog({controller: CustomDialogController, primaryTitle?: ResourceStr, secondaryTitle?: ResourceStr, content: ResourceStr, primaryButton?: ButtonOptions, secondaryButton?: ButtonOptions}) 105 106操作确认类弹出框，触发一个将产生严重后果的不可逆操作时，如删除、重置、取消编辑、停止等。 107 108**装饰器类型：**\@CustomDialog 109 110**系统能力：** SystemCapability.ArkUI.ArkUI.Full 111 112| 名称 | 类型 | 必填 | 说明 | 113| ---------------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 114| controller | [CustomDialogController](ts-methods-custom-dialog-box.md#customdialogcontroller) | 是 | 确认弹出框控制器。<br/>**说明：** 未使用@Require装饰，构造时不强制校验参数。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 115| primaryTitle<sup>12+</sup> | [ResourceStr](ts-types.md#resourcestr) | 否 | 确认框一级标题。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 116| secondaryTitle<sup>12+</sup> | [ResourceStr](ts-types.md#resourcestr) | 否 | 确认框二级标题。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 117| content | [ResourceStr](ts-types.md#resourcestr) | 是 | 确认弹出框内容。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 118| primaryButton | [ButtonOptions](#buttonoptions) | 否 | 确认框左侧按钮。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 119| secondaryButton | [ButtonOptions](#buttonoptions) | 否 | 确认框右侧按钮。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 120| theme<sup>12+</sup> | [Theme](../js-apis-arkui-theme.md#theme) \| [CustomTheme](../js-apis-arkui-theme.md#customtheme) | 否 | 主题信息，可以是CustomTheme或从onWillApplyTheme中获取的Theme实例。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 121| themeColorMode<sup>12+</sup> | [ThemeColorMode](ts-container-with-theme.md#themecolormode10枚举说明) | 否 | 自定义弹窗深浅色模式。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 122 123 124## LoadingDialog 125 126LoadingDialog({controller: CustomDialogController, content?: ResourceStr}) 127 128进度加载类弹出框，操作正在执行时的提示信息。 129 130**装饰器类型：**\@CustomDialog 131 132**系统能力：** SystemCapability.ArkUI.ArkUI.Full 133 134| 名称 | 类型 | 必填 | 说明 | 135| ------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 136| Controller | [CustomDialogController](ts-methods-custom-dialog-box.md#customdialogcontroller) | 是 | 加载弹出框控制器。<br/>**说明：** 未使用@Require装饰，构造时不强制校验参数。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 137| content | [ResourceStr](ts-types.md#resourcestr) | 否 | 加载弹出框内容。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 138| theme<sup>12+</sup> | [Theme](../js-apis-arkui-theme.md#theme)\| [CustomTheme](../js-apis-arkui-theme.md#customtheme) | 否 | 主题信息，可以是CustomTheme或从onWillApplyTheme中获取的Theme实例。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 139| themeColorMode<sup>12+</sup> | [ThemeColorMode](ts-container-with-theme.md#themecolormode10枚举说明) | 否 | 自定义弹窗深浅色模式。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 140 141 142## CustomContentDialog<sup>12+</sup> 143 144CustomContentDialog({controller: CustomDialogController, contentBuilder: () => void, primaryTitle?: ResourceStr, secondaryTitle?: ResourceStr, contentAreaPadding?: Padding, buttons?: ButtonOptions[]}) 145 146自定义内容区弹出框，同时支持定义操作区按钮样式。 147 148**装饰器类型：**\@CustomDialog 149 150**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 151 152**系统能力：** SystemCapability.ArkUI.ArkUI.Full 153 154| 名称 | 类型 | 必填 | 装饰器类型 | 说明 | 155| ------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | ------------------------------------------------------------ | 156| controller | [CustomDialogController](ts-methods-custom-dialog-box.md#customdialogcontroller) | 是 | - | 弹出框控制器。<br/>**说明：** 未使用@Require装饰，构造时不强制校验参数。 | 157| contentBuilder | () => void | 是 | @BuilderParam | 弹出框内容。 | 158| primaryTitle | [ResourceStr](ts-types.md#resourcestr) | 否 | - | 弹出框标题。 | 159| secondaryTitle | [ResourceStr](ts-types.md#resourcestr) | 否 | - | 弹出框辅助文本。 | 160| localizedContentAreaPadding | [LocalizedPadding](ts-types.md#LocalizedPadding) | 否 | - | 弹出框内容区内边距。 | 161| contentAreaPadding | [Padding](ts-types.md#padding) | 否 | - | 弹出框内容区内边距。设置了localizedContentAreaPadding属性时该属性不生效。| 162| buttons | [ButtonOptions](#buttonoptions)[] | 否 | - | 弹出框操作区按钮，最多支持4个按钮。 | 163| theme | [Theme](../js-apis-arkui-theme.md#theme) \| [CustomTheme](../js-apis-arkui-theme.md#customtheme) | 否 | - | 主题信息，可以是CustomTheme或从onWillApplyTheme中获取的Theme实例。 | 164| themeColorMode | [ThemeColorMode](ts-container-with-theme.md#themecolormode10枚举说明) | 否 | - | 自定义弹窗深浅色模式。 | 165 166 167## PopoverDialog<sup>14+</sup> 168 169PopoverDialog({visible: boolean, popover: PopoverOptions, targetBuilder: Callback\<void>}) 170 171跟手弹窗，基于目标组件位置弹出，上文中的TipsDialog、SelectDialog、ConfirmDialog、AlertDialog、LoadingDialog、CustomContentDialog都可作为弹窗内容。 172 173**装饰器类型：**\@Component 174 175**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 176 177**系统能力：** SystemCapability.ArkUI.ArkUI.Full 178 179| 名称 | 类型 | 必填 | 装饰器类型 | 说明 | 180| -------- | -------- | -------- | -------- | -------- | 181| visible | boolean | 是 | \@Link | 跟手弹出框显示状态。<br/>默认值为false，隐藏弹窗。 | 182| popover | [PopoverOptions](#popoveroptions14) | 是 | \@Prop<br/>\@Require | 配置跟手弹窗的参数。 | 183| targetBuilder | Callback\<void> | 是 | \@Require<br/>\@BuilderParam | 跟手弹出框基于的目标组件。 | 184 185 186## ButtonOptions 187 188**系统能力：** SystemCapability.ArkUI.ArkUI.Full 189 190| 名称 | 类型 | 必填 | 说明 | 191| ------------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 192| value | [ResourceStr](ts-types.md#resourcestr) | 是 | 按钮的内容。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 193| action | () => void | 否 | 按钮的点击事件。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 194| background | [ResourceColor](ts-types.md#resourcecolor) | 否 | 按钮的背景。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 195| fontColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 按钮的字体颜色。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 196| buttonStyle<sup>12+</sup> | [ButtonStyleMode](ts-basic-components-button.md#buttonstylemode11枚举说明) | 否 | 按钮的样式。<br/>默认值：2in1设备为ButtonStyleMode.NORMAL，其他设备为ButtonStyleMode.TEXTUAL。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 197| role<sup>12+</sup> | [ButtonRole](ts-basic-components-button.md#buttonrole12枚举说明) | 否 | 按钮的角色。<br/>默认值：ButtonRole.NORMAL。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 198 199> **说明：** 200> 201> buttonStyle和role优先级高于fontColor和background。如果buttonStyle和role设置的是默认值，那么fontColor和background可生效。 202 203## PopoverOptions<sup>14+</sup> 204 205跟手弹窗参数，用于设置弹窗内容、位置属性等。 206 207继承自[CustomPopupOptions](../arkui-ts/ts-universal-attributes-popup.md#custompopupoptions8类型说明)。 208 209> **说明：** 210> 211> radius默认值为32vp。 212 213**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 214 215**系统能力：** SystemCapability.ArkUI.ArkUI.Full 216 217## 事件 218 219不支持[通用事件](ts-component-general-events.md)。 220 221## 示例 222 223### 示例1（上图下文弹出框） 224上图下文弹出框，包含imageRes、content等内容。 225 226```ts 227import { TipsDialog } from '@kit.ArkUI'; 228 229@Entry 230@Component 231struct Index { 232 dialogControllerImage: CustomDialogController = new CustomDialogController({ 233 builder: TipsDialog({ 234 imageRes: $r('sys.media.ohos_ic_public_voice'), 235 content: '想要卸载这个APP嘛?', 236 primaryButton: { 237 value: '取消', 238 action: () => { 239 console.info('Callback when the first button is clicked') 240 }, 241 }, 242 secondaryButton: { 243 value: '删除', 244 role: ButtonRole.ERROR, 245 action: () => { 246 console.info('Callback when the second button is clicked') 247 } 248 }, 249 onCheckedChange: () => { 250 console.info('Callback when the checkbox is clicked') 251 } 252 }), 253 }) 254 255 build() { 256 Row() { 257 Stack() { 258 Column(){ 259 Button("上图下文弹出框") 260 .width(96) 261 .height(40) 262 .onClick(() => { 263 this.dialogControllerImage.open() 264 }) 265 }.margin({bottom: 300}) 266 }.align(Alignment.Bottom) 267 .width('100%').height('100%') 268 } 269 .backgroundImageSize({ width: '100%', height: '100%' }) 270 .height('100%') 271 } 272} 273``` 274 275 276 277### 示例2（纯列表弹出框） 278纯列表弹出框，包含selectedIndex、radioContent等内容。 279 280```ts 281import { SelectDialog } from '@kit.ArkUI' 282 283@Entry 284@Component 285struct Index { 286 // 设置默认选中radio的index 287 radioIndex = 0; 288 dialogControllerList: CustomDialogController = new CustomDialogController({ 289 builder: SelectDialog({ 290 title: '文本标题', 291 selectedIndex: this.radioIndex, 292 confirm: { 293 value: '取消', 294 action: () => {}, 295 }, 296 radioContent: [ 297 { 298 title: '文本文本文本文本文本', 299 action: () => { 300 this.radioIndex = 0 301 } 302 }, 303 { 304 title: '文本文本文本文本', 305 action: () => { 306 this.radioIndex = 1 307 } 308 }, 309 { 310 title: '文本文本文本文本', 311 action: () => { 312 this.radioIndex = 2 313 } 314 }, 315 ] 316 }), 317 }) 318 319 build() { 320 Row() { 321 Stack() { 322 Column() { 323 Button("纯列表弹出框") 324 .width(96) 325 .height(40) 326 .onClick(() => { 327 this.dialogControllerList.open() 328 }) 329 }.margin({ bottom: 300 }) 330 } 331 .align(Alignment.Bottom) 332 .width('100%') 333 .height('100%') 334 } 335 .backgroundImageSize({ width: '100%', height: '100%' }) 336 .height('100%') 337 } 338} 339``` 340 341 342 343### 示例3（文本与勾选弹出框） 344文本与勾选弹出框，包含content、checkTips等内容。 345 346```ts 347import { ConfirmDialog } from '@kit.ArkUI' 348 349@Entry 350@Component 351struct Index { 352 isChecked = false; 353 dialogControllerCheckBox: CustomDialogController = new CustomDialogController({ 354 builder: ConfirmDialog({ 355 title: '文本标题', 356 content: '文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本', 357 // 勾选框选中状态 358 isChecked: this.isChecked, 359 // 勾选框说明文本 360 checkTips: '禁止后不再提示', 361 primaryButton: { 362 value: '禁止', 363 action: () => {}, 364 }, 365 secondaryButton: { 366 value: '允许', 367 action: () => { 368 this.isChecked = false 369 console.info('Callback when the second button is clicked') 370 } 371 }, 372 onCheckedChange: () => { 373 console.info('Callback when the checkbox is clicked') 374 }, 375 }), 376 autoCancel: true, 377 alignment: DialogAlignment.Bottom 378 }) 379 380 build() { 381 Row() { 382 Stack() { 383 Column(){ 384 Button("文本+勾选弹出框") 385 .width(96) 386 .height(40) 387 .onClick(() => { 388 this.dialogControllerCheckBox.open() 389 }) 390 } 391 .margin({bottom: 300}) 392 } 393 .align(Alignment.Bottom) 394 .width('100%') 395 .height('100%') 396 } 397 .backgroundImageSize({ width: '100%', height: '100%' }) 398 .height('100%') 399 } 400} 401``` 402 403 404 405### 示例4（纯文本弹出框） 406纯文本弹出框，包含primaryTitle、secondaryTitle、content等内容。 407 408```ts 409import { AlertDialog } from '@kit.ArkUI' 410 411@Entry 412@Component 413struct Index { 414 dialogControllerConfirm: CustomDialogController = new CustomDialogController({ 415 builder: AlertDialog({ 416 primaryTitle: '弹框一级标题', 417 secondaryTitle: '弹框二级标题', 418 content: '文本文本文本文本文本', 419 primaryButton: { 420 value: '取消', 421 action: () => { 422 }, 423 }, 424 secondaryButton: { 425 value: '确认', 426 role: ButtonRole.ERROR, 427 action: () => { 428 console.info('Callback when the second button is clicked') 429 } 430 }, 431 }), 432 }) 433 434 build() { 435 Row() { 436 Stack() { 437 Column() { 438 Button("纯文本弹出框") 439 .width(96) 440 .height(40) 441 .onClick(() => { 442 this.dialogControllerConfirm.open() 443 }) 444 } 445 .margin({ bottom: 300 }) 446 } 447 .align(Alignment.Bottom) 448 .width('100%') 449 .height('100%') 450 } 451 .backgroundImageSize({ width: '100%', height: '100%' }) 452 .height('100%') 453 } 454} 455``` 456 457 458 459### 示例5（进度条弹出框） 460进度条弹出框，包含content等内容。 461 462```ts 463import { LoadingDialog } from '@kit.ArkUI' 464 465@Entry 466@Component 467struct Index { 468 dialogControllerProgress: CustomDialogController = new CustomDialogController({ 469 builder: LoadingDialog({ 470 content: '文本文本文本文本文本...', 471 }), 472 }) 473 474 build() { 475 Row() { 476 Stack() { 477 Column() { 478 Button("进度条弹出框") 479 .width(96) 480 .height(40) 481 .onClick(() => { 482 this.dialogControllerProgress.open() 483 }) 484 } 485 .margin({ bottom: 300 }) 486 } 487 .align(Alignment.Bottom) 488 .width('100%') 489 .height('100%') 490 } 491 .backgroundImageSize({ width: '100%', height: '100%' }) 492 .height('100%') 493 } 494} 495``` 496 497 498 499### 示例6（自定义主题风格弹出框） 500自定义主题风格弹出框，包含content、theme等内容。 501 502```ts 503import { CustomColors, CustomTheme, LoadingDialog } from '@kit.ArkUI' 504 505class CustomThemeImpl implements CustomTheme { 506 colors?: CustomColors; 507 508 constructor(colors: CustomColors) { 509 this.colors = colors; 510 } 511} 512 513// 自定义内容文字及loading组件主题颜色 514class CustomThemeColors implements CustomColors { 515 fontPrimary = '#ffd0a300'; 516 iconSecondary = '#ffd000cd'; 517} 518 519@Entry 520@Component 521struct Index { 522 @State customTheme: CustomTheme = new CustomThemeImpl(new CustomThemeColors()); 523 dialogController: CustomDialogController = new CustomDialogController({ 524 builder: LoadingDialog({ 525 content: 'text', 526 theme: this.customTheme, 527 }) 528 }); 529 530 build() { 531 Row() { 532 Stack() { 533 Column() { 534 Button('dialog') 535 .width(96) 536 .height(40) 537 .onClick(() => { 538 this.dialogController.open(); 539 }) 540 } 541 .margin({ bottom: 300 }) 542 } 543 .align(Alignment.Bottom) 544 .width('100%') 545 .height('100%') 546 } 547 .backgroundImageSize({ width: '100%', height: '100%' }) 548 .height('100%') 549 } 550} 551``` 552 553 554 555### 示例7（自定义深浅色模式弹出框） 556自定义深浅色模式弹出框，包含content、themeColorMode等内容。 557 558```ts 559import { LoadingDialog } from '@kit.ArkUI' 560 561@Entry 562@Component 563struct Index { 564 dialogController: CustomDialogController = new CustomDialogController({ 565 builder: LoadingDialog({ 566 content: 'Text', 567 themeColorMode: ThemeColorMode.DARK, //设置弹窗深浅色模式为深色模式 568 }) 569 }); 570 571 build() { 572 Row() { 573 Stack() { 574 Column() { 575 Button('Dialog') 576 .width(96) 577 .height(40) 578 .onClick(() => { 579 this.dialogController.open(); 580 }) 581 } 582 .margin({ bottom: 300 }) 583 } 584 .align(Alignment.Bottom) 585 .width('100%') 586 .height('100%') 587 } 588 .backgroundImageSize({ width: '100%', height: '100%' }) 589 .height('100%') 590 } 591} 592``` 593 594 595 596### 示例8（自定义内容弹出框） 597支持自定义内容弹出框，包含contentBuilder、buttons等内容。 598 599```ts 600import { CustomContentDialog } from '@kit.ArkUI' 601 602@Entry 603@Component 604struct Index { 605 dialogController: CustomDialogController = new CustomDialogController({ 606 builder: CustomContentDialog({ 607 primaryTitle: '标题', 608 secondaryTitle: '辅助文本', 609 contentBuilder: () => { 610 this.buildContent(); 611 }, 612 buttons: [ 613 { 614 value: '按钮1', 615 buttonStyle: ButtonStyleMode.TEXTUAL, 616 action: () => { 617 console.info('Callback when the button is clicked') 618 } 619 }, 620 { 621 value: '按钮2', 622 buttonStyle: ButtonStyleMode.TEXTUAL, 623 role: ButtonRole.ERROR 624 } 625 ], 626 }), 627 }); 628 629 build() { 630 Column() { 631 Button("支持自定义内容弹出框") 632 .onClick(() => { 633 this.dialogController.open() 634 }) 635 } 636 .width('100%') 637 .height('100%') 638 .justifyContent(FlexAlign.Center) 639 } 640 641 // 自定义弹出框的内容区 642 @Builder 643 buildContent(): void { 644 Column() { 645 Text('内容区') 646 } 647 .width('100%') 648 } 649} 650``` 651 652 653 654### 示例9（跟手弹窗） 655跟手弹窗（警告弹窗为例），包含visible、popover、targetBuilder等内容。 656 657```ts 658import { AlertDialog, PopoverDialog, PopoverOptions } from '@kit.ArkUI'; 659 660@Entry 661@Component 662struct Index { 663 @State isShow: boolean = false; 664 @State popoverOptions: PopoverOptions = { 665 builder: () => { 666 this.dialogBuilder(); 667 }, 668 width: 320, 669 } 670 671 // 跟手弹窗内容 672 @Builder dialogBuilder() { 673 AlertDialog({ 674 content: '跟手弹出框', 675 primaryButton: { 676 value: '取消', 677 action: () => { 678 this.isShow = false; 679 }, 680 }, 681 secondaryButton: { 682 value: '确认', 683 action: () => { 684 this.isShow = false; 685 }, 686 }, 687 }); 688 } 689 690 // 跟手弹窗绑定的builder 691 @Builder buttonBuilder() { 692 Button('跟手弹窗目标组件') 693 .onClick(() => { 694 this.isShow = true; 695 }); 696 } 697 698 build() { 699 Column() { 700 PopoverDialog({ 701 visible: this.isShow, 702 popover: this.popoverOptions, 703 targetBuilder: () => { 704 this.buttonBuilder(); 705 }, 706 }) 707 } 708 } 709} 710``` 711 712
