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, onCheckedChange?: Callback\<boolean>, primaryButton?: ButtonOptions, secondaryButton?: ButtonOptions, theme?: Theme | CustomTheme, themeColorMode?: ThemeColorMode}) 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/> **说明：** 标题超过两行会显示“...”。<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>, theme?: Theme | CustomTheme, themeColorMode?: ThemeColorMode}) 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/> **说明：** 标题超过两行会显示“...”。<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, theme?: Theme | CustomTheme, themeColorMode?: ThemeColorMode}) 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/> **说明：** 标题超过两行会显示“...”。 <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, theme?: Theme | CustomTheme, themeColorMode?: ThemeColorMode}) 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/> **说明：** 标题超过两行会显示“...”。 <br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 116| secondaryTitle<sup>12+</sup> | [ResourceStr](ts-types.md#resourcestr) | 否 | 确认框二级标题。<br/> **说明：** 标题超过两行会显示“...”。 <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, theme?: Theme | CustomTheme, themeColorMode?: ThemeColorMode}) 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[], theme?: Theme | CustomTheme, themeColorMode?: ThemeColorMode}) 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) | 否 | - | 弹出框标题。 <br/> **说明：** 标题超过两行会显示“...”。 | 159| secondaryTitle | [ResourceStr](ts-types.md#resourcestr) | 否 | - | 弹出框辅助文本。<br/> **说明：** 辅助文本超过两行会显示“...”。 | 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| defaultFocus<sup>18+</sup> | boolean | 否 | 按钮是否设置默认焦点。<br/>true：按钮是默认焦点。<br/>false：按钮不是默认焦点。<br/>默认值：false。<br/>**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 | 199 200> **说明：** 201> 202> buttonStyle和role优先级高于fontColor和background。如果buttonStyle和role设置的是默认值，那么fontColor和background可生效。 203> 若同时给多个按钮设置defaultFocus，则默认焦点为设置defaultFocus按钮中显示顺序的第一个按钮。 204 205## PopoverOptions<sup>14+</sup> 206 207跟手弹窗参数，用于设置弹窗内容、位置属性等。 208 209继承自[CustomPopupOptions](../arkui-ts/ts-universal-attributes-popup.md#custompopupoptions8类型说明)。 210 211> **说明：** 212> 213> radius默认值为32vp。 214 215**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 216 217**系统能力：** SystemCapability.ArkUI.ArkUI.Full 218 219## 事件 220 221不支持[通用事件](ts-component-general-events.md)。 222 223## 示例 224 225### 示例1（上图下文弹出框） 226上图下文弹出框，包含imageRes、content等内容。 227 228```ts 229import { TipsDialog } from '@kit.ArkUI'; 230 231@Entry 232@Component 233struct Index { 234 dialogControllerImage: CustomDialogController = new CustomDialogController({ 235 builder: TipsDialog({ 236 imageRes: $r('sys.media.ohos_ic_public_voice'), 237 content: '想要卸载这个APP嘛?', 238 primaryButton: { 239 value: '取消', 240 action: () => { 241 console.info('Callback when the first button is clicked') 242 }, 243 }, 244 secondaryButton: { 245 value: '删除', 246 role: ButtonRole.ERROR, 247 action: () => { 248 console.info('Callback when the second button is clicked') 249 } 250 }, 251 onCheckedChange: () => { 252 console.info('Callback when the checkbox is clicked') 253 } 254 }), 255 }) 256 257 build() { 258 Row() { 259 Stack() { 260 Column(){ 261 Button("上图下文弹出框") 262 .width(96) 263 .height(40) 264 .onClick(() => { 265 this.dialogControllerImage.open() 266 }) 267 }.margin({bottom: 300}) 268 }.align(Alignment.Bottom) 269 .width('100%').height('100%') 270 } 271 .backgroundImageSize({ width: '100%', height: '100%' }) 272 .height('100%') 273 } 274} 275``` 276 277 278 279### 示例2（纯列表弹出框） 280纯列表弹出框，包含selectedIndex、radioContent等内容。 281 282```ts 283import { SelectDialog } from '@kit.ArkUI'; 284 285@Entry 286@Component 287struct Index { 288 // 设置默认选中radio的index 289 radioIndex = 0; 290 dialogControllerList: CustomDialogController = new CustomDialogController({ 291 builder: SelectDialog({ 292 title: '文本标题', 293 selectedIndex: this.radioIndex, 294 confirm: { 295 value: '取消', 296 action: () => {}, 297 }, 298 radioContent: [ 299 { 300 title: '文本文本文本文本文本', 301 action: () => { 302 this.radioIndex = 0 303 } 304 }, 305 { 306 title: '文本文本文本文本', 307 action: () => { 308 this.radioIndex = 1 309 } 310 }, 311 { 312 title: '文本文本文本文本', 313 action: () => { 314 this.radioIndex = 2 315 } 316 }, 317 ] 318 }), 319 }) 320 321 build() { 322 Row() { 323 Stack() { 324 Column() { 325 Button("纯列表弹出框") 326 .width(96) 327 .height(40) 328 .onClick(() => { 329 this.dialogControllerList.open() 330 }) 331 }.margin({ bottom: 300 }) 332 } 333 .align(Alignment.Bottom) 334 .width('100%') 335 .height('100%') 336 } 337 .backgroundImageSize({ width: '100%', height: '100%' }) 338 .height('100%') 339 } 340} 341``` 342 343 344 345### 示例3（文本与勾选弹出框） 346文本与勾选弹出框，包含content、checkTips等内容。 347 348```ts 349import { ConfirmDialog } from '@kit.ArkUI'; 350 351@Entry 352@Component 353struct Index { 354 isChecked = false; 355 dialogControllerCheckBox: CustomDialogController = new CustomDialogController({ 356 builder: ConfirmDialog({ 357 title: '文本标题', 358 content: '文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本', 359 // 勾选框选中状态 360 isChecked: this.isChecked, 361 // 勾选框说明文本 362 checkTips: '禁止后不再提示', 363 primaryButton: { 364 value: '禁止', 365 action: () => {}, 366 }, 367 secondaryButton: { 368 value: '允许', 369 action: () => { 370 this.isChecked = false 371 console.info('Callback when the second button is clicked') 372 } 373 }, 374 onCheckedChange: () => { 375 console.info('Callback when the checkbox is clicked') 376 }, 377 }), 378 autoCancel: true, 379 alignment: DialogAlignment.Bottom 380 }) 381 382 build() { 383 Row() { 384 Stack() { 385 Column(){ 386 Button("文本+勾选弹出框") 387 .width(96) 388 .height(40) 389 .onClick(() => { 390 this.dialogControllerCheckBox.open() 391 }) 392 } 393 .margin({bottom: 300}) 394 } 395 .align(Alignment.Bottom) 396 .width('100%') 397 .height('100%') 398 } 399 .backgroundImageSize({ width: '100%', height: '100%' }) 400 .height('100%') 401 } 402} 403``` 404 405 406 407### 示例4（纯文本弹出框） 408纯文本弹出框，包含primaryTitle、secondaryTitle、content等内容。 409 410```ts 411import { AlertDialog } from '@kit.ArkUI'; 412 413@Entry 414@Component 415struct Index { 416 dialogControllerConfirm: CustomDialogController = new CustomDialogController({ 417 builder: AlertDialog({ 418 primaryTitle: '弹框一级标题', 419 secondaryTitle: '弹框二级标题', 420 content: '文本文本文本文本文本', 421 primaryButton: { 422 value: '取消', 423 action: () => { 424 }, 425 }, 426 secondaryButton: { 427 value: '确认', 428 role: ButtonRole.ERROR, 429 action: () => { 430 console.info('Callback when the second button is clicked') 431 } 432 }, 433 }), 434 }) 435 436 build() { 437 Row() { 438 Stack() { 439 Column() { 440 Button("纯文本弹出框") 441 .width(96) 442 .height(40) 443 .onClick(() => { 444 this.dialogControllerConfirm.open() 445 }) 446 } 447 .margin({ bottom: 300 }) 448 } 449 .align(Alignment.Bottom) 450 .width('100%') 451 .height('100%') 452 } 453 .backgroundImageSize({ width: '100%', height: '100%' }) 454 .height('100%') 455 } 456} 457``` 458 459 460 461### 示例5（进度条弹出框） 462进度条弹出框，包含content等内容。 463 464```ts 465import { LoadingDialog } from '@kit.ArkUI'; 466 467@Entry 468@Component 469struct Index { 470 dialogControllerProgress: CustomDialogController = new CustomDialogController({ 471 builder: LoadingDialog({ 472 content: '文本文本文本文本文本...', 473 }), 474 }) 475 476 build() { 477 Row() { 478 Stack() { 479 Column() { 480 Button("进度条弹出框") 481 .width(96) 482 .height(40) 483 .onClick(() => { 484 this.dialogControllerProgress.open() 485 }) 486 } 487 .margin({ bottom: 300 }) 488 } 489 .align(Alignment.Bottom) 490 .width('100%') 491 .height('100%') 492 } 493 .backgroundImageSize({ width: '100%', height: '100%' }) 494 .height('100%') 495 } 496} 497``` 498 499 500 501### 示例6（自定义主题风格弹出框） 502自定义主题风格弹出框，包含content、theme等内容。 503 504```ts 505import { CustomColors, CustomTheme, LoadingDialog } from '@kit.ArkUI'; 506 507class CustomThemeImpl implements CustomTheme { 508 colors?: CustomColors; 509 510 constructor(colors: CustomColors) { 511 this.colors = colors; 512 } 513} 514 515// 自定义内容文字及loading组件主题颜色 516class CustomThemeColors implements CustomColors { 517 fontPrimary = '#ffd0a300'; 518 iconSecondary = '#ffd000cd'; 519} 520 521@Entry 522@Component 523struct Index { 524 @State customTheme: CustomTheme = new CustomThemeImpl(new CustomThemeColors()); 525 dialogController: CustomDialogController = new CustomDialogController({ 526 builder: LoadingDialog({ 527 content: 'text', 528 theme: this.customTheme, 529 }) 530 }); 531 532 build() { 533 Row() { 534 Stack() { 535 Column() { 536 Button('dialog') 537 .width(96) 538 .height(40) 539 .onClick(() => { 540 this.dialogController.open(); 541 }) 542 } 543 .margin({ bottom: 300 }) 544 } 545 .align(Alignment.Bottom) 546 .width('100%') 547 .height('100%') 548 } 549 .backgroundImageSize({ width: '100%', height: '100%' }) 550 .height('100%') 551 } 552} 553``` 554 555 556 557### 示例7（自定义深浅色模式弹出框） 558自定义深浅色模式弹出框，包含content、themeColorMode等内容。 559 560```ts 561import { LoadingDialog } from '@kit.ArkUI'; 562 563@Entry 564@Component 565struct Index { 566 dialogController: CustomDialogController = new CustomDialogController({ 567 builder: LoadingDialog({ 568 content: 'Text', 569 themeColorMode: ThemeColorMode.DARK, //设置弹窗深浅色模式为深色模式 570 }) 571 }); 572 573 build() { 574 Row() { 575 Stack() { 576 Column() { 577 Button('Dialog') 578 .width(96) 579 .height(40) 580 .onClick(() => { 581 this.dialogController.open(); 582 }) 583 } 584 .margin({ bottom: 300 }) 585 } 586 .align(Alignment.Bottom) 587 .width('100%') 588 .height('100%') 589 } 590 .backgroundImageSize({ width: '100%', height: '100%' }) 591 .height('100%') 592 } 593} 594``` 595 596 597 598### 示例8（自定义内容弹出框） 599支持自定义内容弹出框，包含contentBuilder、buttons等内容。 600 601```ts 602import { CustomContentDialog } from '@kit.ArkUI'; 603 604@Entry 605@Component 606struct Index { 607 dialogController: CustomDialogController = new CustomDialogController({ 608 builder: CustomContentDialog({ 609 primaryTitle: '标题', 610 secondaryTitle: '辅助文本', 611 contentBuilder: () => { 612 this.buildContent(); 613 }, 614 buttons: [ 615 { 616 value: '按钮1', 617 buttonStyle: ButtonStyleMode.TEXTUAL, 618 action: () => { 619 console.info('Callback when the button is clicked') 620 } 621 }, 622 { 623 value: '按钮2', 624 buttonStyle: ButtonStyleMode.TEXTUAL, 625 role: ButtonRole.ERROR 626 } 627 ], 628 }), 629 }); 630 631 build() { 632 Column() { 633 Button("支持自定义内容弹出框") 634 .onClick(() => { 635 this.dialogController.open() 636 }) 637 } 638 .width('100%') 639 .height('100%') 640 .justifyContent(FlexAlign.Center) 641 } 642 643 // 自定义弹出框的内容区 644 @Builder 645 buildContent(): void { 646 Column() { 647 Text('内容区') 648 } 649 .width('100%') 650 } 651} 652``` 653 654 655 656### 示例9（跟手弹窗） 657跟手弹窗（警告弹窗为例），包含visible、popover、targetBuilder等内容。 658 659```ts 660import { AlertDialog, PopoverDialog, PopoverOptions } from '@kit.ArkUI'; 661 662@Entry 663@Component 664struct Index { 665 @State isShow: boolean = false; 666 @State popoverOptions: PopoverOptions = { 667 builder: () => { 668 this.dialogBuilder(); 669 }, 670 width: 320, 671 } 672 673 // 跟手弹窗内容 674 @Builder dialogBuilder() { 675 AlertDialog({ 676 content: '跟手弹出框', 677 primaryButton: { 678 value: '取消', 679 action: () => { 680 this.isShow = false; 681 }, 682 }, 683 secondaryButton: { 684 value: '确认', 685 action: () => { 686 this.isShow = false; 687 }, 688 }, 689 }); 690 } 691 692 // 跟手弹窗绑定的builder 693 @Builder buttonBuilder() { 694 Button('跟手弹窗目标组件') 695 .onClick(() => { 696 this.isShow = true; 697 }); 698 } 699 700 build() { 701 Column() { 702 PopoverDialog({ 703 visible: this.isShow, 704 popover: this.popoverOptions, 705 targetBuilder: () => { 706 this.buttonBuilder(); 707 }, 708 }) 709 } 710 } 711} 712``` 713 714 715 716### 示例10（弹出框按钮设置默认获焦） 717设置默认获焦按钮弹出框（以AlertDialog为例），包含defaultFocus等内容。 718 719```ts 720import { AlertDialog } from '@kit.ArkUI'; 721 722@Entry 723@Component 724struct Index { 725 dialogController: CustomDialogController = new CustomDialogController({ 726 builder: AlertDialog({ 727 primaryTitle: 'AlertDialog', 728 secondaryTitle: '副标题', 729 content: '第二个按钮设置为默认', 730 primaryButton: { 731 value: 'DEFAULT', 732 action: () => {} 733 }, 734 secondaryButton: { 735 value: 'TRUE', 736 defaultFocus: true, //设置该按钮为默认获焦按钮。 737 action: () => {} 738 }, 739 }) 740 }); 741 742 build() { 743 Row() { 744 Stack() { 745 Column() { 746 Button("AlertDialog") 747 .width(96) 748 .height(40) 749 .onClick(() => { 750 this.dialogController.open() 751 }) 752 } 753 .margin({ bottom: 300 }) 754 } 755 .align(Alignment.Bottom) 756 .width('100%') 757 .height('100%') 758 } 759 .backgroundImageSize({ width: '100%', height: '100%' }) 760 .height('100%') 761 } 762} 763``` 764
