# 警告弹窗 显示警告弹窗组件，可设置文本内容与响应回调。 > **说明：** > > 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > > 本模块功能依赖UI的执行上下文，不可在UI上下文不明确的地方使用，参见[UIContext](../apis/js-apis-arkui-UIContext.md#uicontext)说明。 > > 从API version 10开始，可以通过使用[UIContext](../apis/js-apis-arkui-UIContext.md#uicontext)中的[showAlertDialog](../apis/js-apis-arkui-UIContext.md#showalertdialog)来明确UI的执行上下文。 ## 属性 | 名称 | 参数类型 | 参数描述 | | ---- | --------------- | -------- | | show | [AlertDialogParamWithConfirm](#alertdialogparamwithconfirm对象说明) \| [AlertDialogParamWithButtons](#alertdialogparamwithbuttons对象说明) | 定义并显示AlertDialog组件。 | ## AlertDialogParamWithConfirm对象说明 | 参数名 | 参数类型 | 必填 | 参数描述 | | ---------- | ---------------- | ---------- | ------------------------------- | | title | [ResourceStr](ts-types.md#resourcestr) | 否 | 弹窗标题。 | | subtitle10+ | [ResourceStr](ts-types.md#resourcestr) | 否 | 弹窗副标题。 | | message | [ResourceStr](ts-types.md#resourcestr) | 是 | 弹窗内容。 | | autoCancel | boolean | 否 | 点击遮障层时，是否关闭弹窗。
默认值：true | | confirm | {
enabled10+?: boolean,
defaultFocus10+?: boolean,
style10+?: [DialogButtonStyle](#dialogbuttonstyle10枚举说明),
value: [ResourceStr](ts-types.md#resourcestr),
fontColor?: [ResourceColor](ts-types.md#resourcecolor),
backgroundColor?:  [ResourceColor](ts-types.md#resourcecolor),
action: () => void
} | 否 | 确认按钮的使能状态、默认焦点、按钮风格、文本内容、文本色、按钮背景色和点击回调。
enabled：点击button是否响应。
默认值：true。
defaultFocus：设置button是否是默认焦点。
默认值：false。
style：设置button的风格样式。
默认值：DialogButtonStyle.DEFAULT。
value：按钮文本内容。
fontColor：按钮文本颜色。
backgroundColor：按钮背景颜色。
action： 按钮选中时的回调。 | | cancel | () => void | 否 | 点击遮障层关闭dialog时的回调。 | | alignment | [DialogAlignment](#dialogalignment枚举说明) | 否 | 弹窗在竖直方向上的对齐方式。
默认值：DialogAlignment.Default | | offset | [Offset](ts-types.md#offset) | 否 | 弹窗相对alignment所在位置的偏移量。
默认值：{ dx: 0 , dy: 0 } | | gridCount | number | 否 | 弹窗容器宽度所占用栅格数。
默认值：4 | | maskRect10+| [Rectangle](#rectangle10类型说明) | 否 | 弹窗遮蔽层区域，在遮蔽层区域内的事件不透传，在遮蔽层区域外的事件透传。
默认值：{ x: 0, y: 0, width: '100%', height: '100%' } | confirm参数优先级：fontColor、backgroundColor > style > defaultFocus | backgroundColor | fontColor | style | defaultFocus | 效果 | | --------------- | --------- | --------------------------- | ------------ | -------- | | 绿底 | 红字 | - | - | 绿底红字 | | 绿底 | - | DialogButtonStyle.HIGHLIGHT | - | 绿底白字 | | 绿底 | - | DialogButtonStyle.DEFAULT | - | 绿底蓝字 | | 绿底 | - | - | TRUE | 绿底白字 | | 绿底 | - | - | FALSE/- | 绿底蓝字 | | - | 红字 | DialogButtonStyle.HIGHLIGHT | - | 蓝底红字 | | - | 红字 | DialogButtonStyle.DEFAULT | - | 白底红字 | | - | 红字 | - | TRUE | 蓝底红字 | | - | 红字 | - | FALSE/- | 白底红字 | | - | - | DialogButtonStyle.HIGHLIGHT | - | 蓝底白字 | | - | - | DialogButtonStyle.DEFAULT | - | 白底蓝字 | | - | - | - | TRUE | 蓝底白字 | | - | - | - | FALSE/- | 白底蓝字 | ## AlertDialogParamWithButtons对象说明 | 参数名 | 参数类型 | 必填 | 参数描述 | | --------------- | ---------------------- | ------------ | --------------------- | | title | [ResourceStr](ts-types.md#resourcestr) | 否 | 弹窗标题。 | | subtitle10+ | [ResourceStr](ts-types.md#resourcestr) | 否 | 弹窗副标题。 | | message | [ResourceStr](ts-types.md#resourcestr) | 是 | 弹窗内容。 | | autoCancel | boolean | 否 | 点击遮障层时，是否关闭弹窗。
默认值：true | | primaryButton | {
enabled10+?: boolean,
defaultFocus10+?: boolean,
style10+?: [DialogButtonStyle](#dialogbuttonstyle10枚举说明),
value: [ResourceStr](ts-types.md#resourcestr),
fontColor?: [ResourceColor](ts-types.md#resourcecolor),
backgroundColor?: [ResourceColor](ts-types.md#resourcecolor),
action: () => void;
} | 否 | 确认按钮的使能状态、默认焦点、按钮风格、文本内容、文本色、按钮背景色和点击回调。
enabled：点击button是否响应。
默认值：true。
defaultFocus：设置button是否是默认焦点。
默认值：false。
style：设置button的风格样式。
默认值：DialogButtonStyle.DEFAULT。
value：按钮文本内容。
fontColor：按钮文本颜色。
backgroundColor：按钮背景颜色。
action： 按钮选中时的回调。 | | secondaryButton | {
enabled10+?: boolean,
defaultFocus10+?: boolean,
style10+?: [DialogButtonStyle](#dialogbuttonstyle10枚举说明),
value: [ResourceStr](ts-types.md#resourcestr),
fontColor?: [ResourceColor](ts-types.md#resourcecolor),
backgroundColor?: [ResourceColor](ts-types.md#resourcecolor),
action: () => void;
} | 否 | 确认按钮的使能状态、默认焦点、按钮风格、文本内容、文本色、按钮背景色和点击回调。
enabled：点击button是否响应。
默认值：true。
defaultFocus：设置button是否是默认焦点。
默认值：false。
style：设置button的风格样式。
默认值：DialogButtonStyle.DEFAULT。
value：按钮文本内容。
fontColor：按钮文本颜色。
backgroundColor：按钮背景颜色。
action： 按钮选中时的回调。 | | cancel | () => void | 否 | 点击遮障层关闭dialog时的回调。 | | alignment | [DialogAlignment](#dialogalignment枚举说明) | 否 | 弹窗在竖直方向上的对齐方式。
默认值：DialogAlignment.Default | | offset | [Offset](ts-types.md#offset) | 否 | 弹窗相对alignment所在位置的偏移量。 | | gridCount | number | 否 | 弹窗容器宽度所占用栅格数。 | | maskRect10+ | [Rectangle](#rectangle10类型说明) | 否 | 弹窗遮蔽层区域，在遮蔽层区域内的事件不透传，在遮蔽层区域外的事件透传。
默认值：{ x: 0, y: 0, width: '100%', height: '100%' } | confirm参数优先级：fontColor、backgroundColor > style > defaultFocus | backgroundColor | fontColor | style | defaultFocus | 效果 | | --------------- | --------- | --------------------------- | ------------ | -------- | | 绿底 | 红字 | - | - | 绿底红字 | | 绿底 | - | DialogButtonStyle.HIGHLIGHT | - | 绿底白字 | | 绿底 | - | DialogButtonStyle.DEFAULT | - | 绿底蓝字 | | 绿底 | - | - | TRUE | 绿底白字 | | 绿底 | - | - | FALSE/- | 绿底蓝字 | | - | 红字 | DialogButtonStyle.HIGHLIGHT | - | 蓝底红字 | | - | 红字 | DialogButtonStyle.DEFAULT | - | 白底红字 | | - | 红字 | - | TRUE | 蓝底红字 | | - | 红字 | - | FALSE/- | 白底红字 | | - | - | DialogButtonStyle.HIGHLIGHT | - | 蓝底白字 | | - | - | DialogButtonStyle.DEFAULT | - | 白底蓝字 | | - | - | - | TRUE | 蓝底白字 | | - | - | - | FALSE/- | 白底蓝字 | ## DialogAlignment枚举说明 | 名称 | 描述 | | ------------------------ | ------- | | Top | 垂直顶部对齐。 | | Center | 垂直居中对齐。 | | Bottom | 垂直底部对齐。 | | Default | 默认对齐。 | | TopStart8+ | 左上对齐。 | | TopEnd8+ | 右上对齐。 | | CenterStart8+ | 左中对齐。 | | CenterEnd8+ | 右中对齐。 | | BottomStart8+ | 左下对齐。 | | BottomEnd8+ | 右下对齐。 | ## Rectangle10+类型说明 Rectangle是各种Dialog中maskRect参数的类型。 | 名称 | 类型 | 必填 | 描述 | |--------|------------------------------|----|-----------------------------------| | x | [Length](ts-types.md#length) | 否 | 弹窗遮蔽层区域相对于窗口左上角的x轴坐标。
默认值：0vp | | y | [Length](ts-types.md#length) | 否 | 弹窗遮蔽层区域相对于窗口左上角的y轴坐标。
默认值：0vp | | width | [Length](ts-types.md#length) | 否 | 弹窗遮蔽层区域的宽度。
默认值：'100%' | | height | [Length](ts-types.md#length) | 否 | 弹窗遮蔽层区域的高度。
默认值：'100%' | > **说明：** > > x和y可以设置正负值百分比。当x设置为'100%'时表示遮蔽层区域往右偏移窗口本身宽度大小，当x设置为'-100%'时表示遮蔽层区域往左偏移窗口本身宽度大小。当y设置为'100%'时表示遮蔽层区域往下偏移窗口本身高度大小，当y设置为'-100%'时表示遮蔽层区域往上偏移窗口本身高度大小。 > > width和height只能设置正值，支持百分比，如果设置为负值，那么该值将被重置为默认值。 > > 百分比相对于窗口自身宽高进行计算。 ## DialogButtonStyle10+枚举说明 | 名称 | 描述 | | --------- | --------------------------------- | | DEFAULT | 白底蓝字（深色主题：白底=黑底）。 | | HIGHLIGHT | 蓝底白字。 | ## 示例 ```ts // xxx.ets @Entry @Component struct AlertDialogExample { build() { Column({ space: 5 }) { Button('one button dialog') .onClick(() => { AlertDialog.show( { title: 'title', message: 'text', autoCancel: true, alignment: DialogAlignment.Bottom, offset: { dx: 0, dy: -20 }, gridCount: 3, confirm: { value: 'button', action: () => { console.info('Button-clicking callback') } }, cancel: () => { console.info('Closed callbacks') } } ) }) .backgroundColor(0x317aff) Button('two button dialog') .onClick(() => { AlertDialog.show( { title: 'title', subtitle: 'subtitle', message: 'text', autoCancel: true, alignment: DialogAlignment.Bottom, gridCount: 4, offset: { dx: 0, dy: -20 }, primaryButton: { value: 'cancel', action: () => { console.info('Callback when the first button is clicked') } }, secondaryButton: { enabled: true, defaultFocus: true, style: DialogButtonStyle.HIGHLIGHT, value: 'ok', action: () => { console.info('Callback when the second button is clicked') } }, cancel: () => { console.info('Closed callbacks') } } ) }).backgroundColor(0x317aff) }.width('100%').margin({ top: 5 }) } } ``` ![zh-cn_image_alert](figures/zh-cn_image_alert.gif)