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