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