1# 警告弹窗 2 3显示警告弹窗组件，可设置文本内容与响应回调。 4 5> **说明：** 6> 7> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8> 9> 本模块功能依赖UI的执行上下文，不可在UI上下文不明确的地方使用，参见[UIContext](../apis/js-apis-arkui-UIContext.md#uicontext)说明。 10> 11> 从API version 10开始，可以通过使用[UIContext](../apis/js-apis-arkui-UIContext.md#uicontext)中的[showAlertDialog](../apis/js-apis-arkui-UIContext.md#showalertdialog)来明确UI的执行上下文。 12 13## 属性 14 15| 名称 | 参数类型 | 参数描述 | 16| ---- | --------------- | -------- | 17| show | [AlertDialogParamWithConfirm](#alertdialogparamwithconfirm对象说明) \| [AlertDialogParamWithButtons](#alertdialogparamwithbuttons对象说明) \| [AlertDialogParamWithOptions](#alertdialogparamwithoptions10对象说明) | 定义并显示AlertDialog组件。 | 18 19## AlertDialogParamWithConfirm对象说明 20| 参数名 | 参数类型 | 必填 | 参数描述 | 21| ---------- | ---------------- | ---------- | ------------------------------- | 22| title | [ResourceStr](ts-types.md#resourcestr) | 否 | 弹窗标题。 | 23| subtitle<sup>10+</sup> | [ResourceStr](ts-types.md#resourcestr) | 否 | 弹窗副标题。 | 24| message | [ResourceStr](ts-types.md#resourcestr) | 是 | 弹窗内容。 | 25| autoCancel | boolean | 否 | 点击遮障层时，是否关闭弹窗。<br>默认值：true | 26| confirm | {<br/>enabled<sup>10+</sup>?: boolean,<br/>defaultFocus<sup>10+</sup>?: boolean,<br />style<sup>10+</sup>?: [DialogButtonStyle](#dialogbuttonstyle10枚举说明),<br />value: [ResourceStr](ts-types.md#resourcestr),<br/>fontColor?: [ResourceColor](ts-types.md#resourcecolor),<br/>backgroundColor?: [ResourceColor](ts-types.md#resourcecolor),<br/>action: () => void<br/>} | 否 | 确认按钮的使能状态、默认焦点、按钮风格、文本内容、文本色、按钮背景色和点击回调。<br />enabled：点击button是否响应。<br />默认值：true。<br />defaultFocus：设置button是否是默认焦点。<br />默认值：false。<br />style：设置button的风格样式。<br />默认值：DialogButtonStyle.DEFAULT。<br />value：按钮文本内容。<br />fontColor：按钮文本颜色。<br />backgroundColor：按钮背景颜色。<br />action： 按钮选中时的回调。 | 27| cancel | () => void | 否 | 点击遮障层关闭dialog时的回调。 | 28| alignment | [DialogAlignment](#dialogalignment枚举说明) | 否 | 弹窗在竖直方向上的对齐方式。<br>默认值：DialogAlignment.Default | 29| offset | [Offset](ts-types.md#offset) | 否 | 弹窗相对alignment所在位置的偏移量。<br/>默认值：{ dx: 0 , dy: 0 } | 30| gridCount | number | 否 | 弹窗容器宽度所占用栅格数。<br/>默认值：4 | 31| maskRect<sup>10+</sup>| [Rectangle](#rectangle10类型说明) | 否 | 弹窗遮蔽层区域，在遮蔽层区域内的事件不透传，在遮蔽层区域外的事件透传。<br/>默认值：{ x: 0, y: 0, width: '100%', height: '100%' } | 32 33confirm参数优先级：fontColor、backgroundColor > style > defaultFocus 34 35| backgroundColor | fontColor | style | defaultFocus | 效果 | 36| --------------- | --------- | --------------------------- | ------------ | -------- | 37| 绿底 | 红字 | - | - | 绿底红字 | 38| 绿底 | - | DialogButtonStyle.HIGHLIGHT | - | 绿底白字 | 39| 绿底 | - | DialogButtonStyle.DEFAULT | - | 绿底蓝字 | 40| 绿底 | - | - | TRUE | 绿底白字 | 41| 绿底 | - | - | FALSE/- | 绿底蓝字 | 42| - | 红字 | DialogButtonStyle.HIGHLIGHT | - | 蓝底红字 | 43| - | 红字 | DialogButtonStyle.DEFAULT | - | 白底红字 | 44| - | 红字 | - | TRUE | 蓝底红字 | 45| - | 红字 | - | FALSE/- | 白底红字 | 46| - | - | DialogButtonStyle.HIGHLIGHT | - | 蓝底白字 | 47| - | - | DialogButtonStyle.DEFAULT | - | 白底蓝字 | 48| - | - | - | TRUE | 蓝底白字 | 49| - | - | - | FALSE/- | 白底蓝字 | 50 51## AlertDialogParamWithButtons对象说明 52| 参数名 | 参数类型 | 必填 | 参数描述 | 53| --------------- | ---------------------- | ------------ | --------------------- | 54| title | [ResourceStr](ts-types.md#resourcestr) | 否 | 弹窗标题。 | 55| subtitle<sup>10+</sup> | [ResourceStr](ts-types.md#resourcestr) | 否 | 弹窗副标题。 | 56| message | [ResourceStr](ts-types.md#resourcestr) | 是 | 弹窗内容。 | 57| autoCancel | boolean | 否 | 点击遮障层时，是否关闭弹窗。<br>默认值：true | 58| primaryButton | {<br/>enabled<sup>10+</sup>?: boolean,<br/>defaultFocus<sup>10+</sup>?: boolean,<br />style<sup>10+</sup>?: [DialogButtonStyle](#dialogbuttonstyle10枚举说明),<br />value: [ResourceStr](ts-types.md#resourcestr),<br/>fontColor?: [ResourceColor](ts-types.md#resourcecolor),<br/>backgroundColor?: [ResourceColor](ts-types.md#resourcecolor),<br/>action: () => void;<br/>} | 否 | 确认按钮的使能状态、默认焦点、按钮风格、文本内容、文本色、按钮背景色和点击回调。<br />enabled：点击button是否响应。<br />默认值：true。<br />defaultFocus：设置button是否是默认焦点。<br />默认值：false。<br />style：设置button的风格样式。<br />默认值：DialogButtonStyle.DEFAULT。<br />value：按钮文本内容。<br />fontColor：按钮文本颜色。<br />backgroundColor：按钮背景颜色。<br />action： 按钮选中时的回调。 | 59| secondaryButton | {<br/>enabled<sup>10+</sup>?: boolean,<br/>defaultFocus<sup>10+</sup>?: boolean,<br />style<sup>10+</sup>?: [DialogButtonStyle](#dialogbuttonstyle10枚举说明),<br />value: [ResourceStr](ts-types.md#resourcestr),<br/>fontColor?: [ResourceColor](ts-types.md#resourcecolor),<br/>backgroundColor?: [ResourceColor](ts-types.md#resourcecolor),<br/>action: () => void;<br/>} | 否 | 确认按钮的使能状态、默认焦点、按钮风格、文本内容、文本色、按钮背景色和点击回调。<br />enabled：点击button是否响应。<br />默认值：true。<br />defaultFocus：设置button是否是默认焦点。<br />默认值：false。<br />style：设置button的风格样式。<br />默认值：DialogButtonStyle.DEFAULT。<br />value：按钮文本内容。<br />fontColor：按钮文本颜色。<br />backgroundColor：按钮背景颜色。<br />action： 按钮选中时的回调。 | 60| cancel | () => void | 否 | 点击遮障层关闭dialog时的回调。 | 61| alignment | [DialogAlignment](#dialogalignment枚举说明) | 否 | 弹窗在竖直方向上的对齐方式。<br>默认值：DialogAlignment.Default | 62| offset | [Offset](ts-types.md#offset) | 否 | 弹窗相对alignment所在位置的偏移量。 | 63| gridCount | number | 否 | 弹窗容器宽度所占用栅格数。 | 64| maskRect<sup>10+</sup> | [Rectangle](#rectangle10类型说明) | 否 | 弹窗遮蔽层区域，在遮蔽层区域内的事件不透传，在遮蔽层区域外的事件透传。<br/>默认值：{ x: 0, y: 0, width: '100%', height: '100%' } | 65 66## AlertDialogParamWithOptions<sup>10+</sup>对象说明 67| 参数名 | 参数类型 | 必填 | 参数描述 | 68| --------------- | ---------------------- | ------------ | --------------------- | 69| title | [ResourceStr](ts-types.md#resourcestr) | 否 | 弹窗标题。 | 70| subtitle<sup>10+</sup> | [ResourceStr](ts-types.md#resourcestr) | 否 | 弹窗子标题。 | 71| message | [ResourceStr](ts-types.md#resourcestr) | 是 | 弹窗内容。 | 72| autoCancel | boolean | 否 | 点击遮障层时，是否关闭弹窗。<br>默认值：true | 73| cancel | () => void | 否 | 点击遮障层关闭dialog时的回调。 | 74| alignment | [DialogAlignment](#dialogalignment枚举说明) | 否 | 弹窗在竖直方向上的对齐方式。<br>默认值：DialogAlignment.Default | 75| offset | [Offset](ts-types.md#offset) | 否 | 弹窗相对alignment所在位置的偏移量。 | 76| gridCount | number | 否 | 弹窗容器宽度所占用栅格数。 | 77| maskRect<sup>10+</sup>| [Rectangle](#rectangle10类型说明) | 否 | 弹窗遮蔽层区域，在遮蔽层区域内的事件不透传，在遮蔽层区域外的事件透传。<br/>默认值：{ x: 0, y: 0, width: '100%', height: '100%' } | 78| buttons<sup>10+</sup> | Array<[AlertDialogButtonOptions](#alertdialogbuttonoptions10对象说明)> | 否 | 弹窗容器中的多个按钮。 | 79|buttonDirection<sup>10+</sup> | [DialogButtonDirection](#dialogbuttondirection10枚举说明)| 否 | 按钮排布方向默认值为DialogButtonDirection.AUTO，建议3个以上按钮使用Auto模式（两个以上按钮会切换为纵向模式，通常能显示更多按钮），非Auto模式下，3个以上按钮可能会显示不全，超出显示范围的按钮会被截断。| 80 81## AlertDialogButtonOptions<sup>10+</sup>对象说明 82| 参数名 | 参数类型 | 必填 | 参数描述 | 83| ------------------| ---------------------- | ------------ | --------------------- | 84| enabled | boolean | 否 | 点击button是否响应，默认值true。 | 85| defaultFocus | boolean | 否 | 设置button是否是默认焦点，默认值false。 | 86| style | [DialogButtonStyle](#dialogbuttonstyle10枚举说明) | 否 | 设置button的风格样式，默认值DialogButtonStyle.DEFAULT。 | 87| value | [ResourceStr](ts-types.md#resourcestr) | 是 | 按钮的文本内容，若值为null，则该按钮不显示。 | 88| fontColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 按钮的文本颜色。 | 89| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 按钮背景颜色。 | 90| action | () => void | 是 | 按钮选中时的回调。 | 91 92## DialogButtonDirection<sup>10+</sup>枚举说明 93| 名称 | 描述 | 94| -------------------------- | --------- | 95| AUTO | 两个及以下按钮水平排布，两个以上为竖直排布。 | 96| HORIZONTAL | 按钮水平布局。 | 97| VERTICAL | 按钮竖直布局。 | 98 99confirm参数优先级：fontColor、backgroundColor > style > defaultFocus 100 101| backgroundColor | fontColor | style | defaultFocus | 效果 | 102| --------------- | --------- | --------------------------- | ------------ | -------- | 103| 绿底 | 红字 | - | - | 绿底红字 | 104| 绿底 | - | DialogButtonStyle.HIGHLIGHT | - | 绿底白字 | 105| 绿底 | - | DialogButtonStyle.DEFAULT | - | 绿底蓝字 | 106| 绿底 | - | - | TRUE | 绿底白字 | 107| 绿底 | - | - | FALSE/- | 绿底蓝字 | 108| - | 红字 | DialogButtonStyle.HIGHLIGHT | - | 蓝底红字 | 109| - | 红字 | DialogButtonStyle.DEFAULT | - | 白底红字 | 110| - | 红字 | - | TRUE | 蓝底红字 | 111| - | 红字 | - | FALSE/- | 白底红字 | 112| - | - | DialogButtonStyle.HIGHLIGHT | - | 蓝底白字 | 113| - | - | DialogButtonStyle.DEFAULT | - | 白底蓝字 | 114| - | - | - | TRUE | 蓝底白字 | 115| - | - | - | FALSE/- | 白底蓝字 | 116 117## DialogAlignment枚举说明 118 119| 名称 | 描述 | 120| ------------------------ | ------- | 121| Top | 垂直顶部对齐。 | 122| Center | 垂直居中对齐。 | 123| Bottom | 垂直底部对齐。 | 124| Default | 默认对齐。 | 125| TopStart<sup>8+</sup> | 左上对齐。 | 126| TopEnd<sup>8+</sup> | 右上对齐。 | 127| CenterStart<sup>8+</sup> | 左中对齐。 | 128| CenterEnd<sup>8+</sup> | 右中对齐。 | 129| BottomStart<sup>8+</sup> | 左下对齐。 | 130| BottomEnd<sup>8+</sup> | 右下对齐。 | 131 132## Rectangle<sup>10+</sup>类型说明 133 134Rectangle是各种Dialog中maskRect参数的类型。 135 136| 名称 | 类型 | 必填 | 描述 | 137|--------|------------------------------|----|-----------------------------------| 138| x | [Length](ts-types.md#length) | 否 | 弹窗遮蔽层区域相对于窗口左上角的x轴坐标。<br/>默认值：0vp | 139| y | [Length](ts-types.md#length) | 否 | 弹窗遮蔽层区域相对于窗口左上角的y轴坐标。<br/>默认值：0vp | 140| width | [Length](ts-types.md#length) | 否 | 弹窗遮蔽层区域的宽度。<br/>默认值：'100%' | 141| height | [Length](ts-types.md#length) | 否 | 弹窗遮蔽层区域的高度。<br/>默认值：'100%' | 142 143> **说明：** 144> 145> x和y可以设置正负值百分比。当x设置为'100%'时表示遮蔽层区域往右偏移窗口本身宽度大小，当x设置为'-100%'时表示遮蔽层区域往左偏移窗口本身宽度大小。当y设置为'100%'时表示遮蔽层区域往下偏移窗口本身高度大小，当y设置为'-100%'时表示遮蔽层区域往上偏移窗口本身高度大小。 146> 147> width和height只能设置正值，支持百分比，如果设置为负值，那么该值将被重置为默认值。 148> 149> 百分比相对于窗口自身宽高进行计算。 150 151## DialogButtonStyle<sup>10+</sup>枚举说明 152 153| 名称 | 描述 | 154| --------- | --------------------------------- | 155| DEFAULT | 白底蓝字（深色主题：白底=黑底）。 | 156| HIGHLIGHT | 蓝底白字。 | 157 158## 示例 159 160```ts 161// xxx.ets 162@Entry 163@Component 164struct AlertDialogExample { 165 build() { 166 Column({ space: 5 }) { 167 Button('one button dialog') 168 .onClick(() => { 169 AlertDialog.show( 170 { 171 title: 'title', 172 message: 'text', 173 autoCancel: true, 174 alignment: DialogAlignment.Bottom, 175 offset: { dx: 0, dy: -20 }, 176 gridCount: 3, 177 confirm: { 178 value: 'button', 179 action: () => { 180 console.info('Button-clicking callback') 181 } 182 }, 183 cancel: () => { 184 console.info('Closed callbacks') 185 } 186 } 187 ) 188 }) 189 .backgroundColor(0x317aff) 190 Button('two button dialog') 191 .onClick(() => { 192 AlertDialog.show( 193 { 194 title: 'title', 195 subtitle: 'subtitle', 196 message: 'text', 197 autoCancel: true, 198 alignment: DialogAlignment.Bottom, 199 gridCount: 4, 200 offset: { dx: 0, dy: -20 }, 201 primaryButton: { 202 value: 'cancel', 203 action: () => { 204 console.info('Callback when the first button is clicked') 205 } 206 }, 207 secondaryButton: { 208 enabled: true, 209 defaultFocus: true, 210 style: DialogButtonStyle.HIGHLIGHT, 211 value: 'ok', 212 action: () => { 213 console.info('Callback when the second button is clicked') 214 } 215 }, 216 cancel: () => { 217 console.info('Closed callbacks') 218 } 219 } 220 ) 221 }).backgroundColor(0x317aff) 222 Button('three button dialog') 223 .onClick(() => { 224 AlertDialog.show( 225 { 226 title: 'title', 227 subtitle: 'subtitle', 228 message: 'text', 229 autoCancel: true, 230 alignment: DialogAlignment.Bottom, 231 gridCount: 4, 232 offset: { dx: 0, dy: -20 }, 233 buttonDirection: DialogButtonDirection.HORIZONTAL, 234 buttons: [ 235 { 236 value: '按钮', 237 action: () => { 238 console.info('Callback when button1 is clicked') 239 } 240 }, 241 { 242 value: '按钮', 243 action: () => { 244 console.info('Callback when button2 is clicked') 245 } 246 }, 247 { 248 value: '按钮', 249 enabled: true, 250 defaultFocus: true, 251 style: DialogButtonStyle.HIGHLIGHT, 252 action: () => { 253 console.info('Callback when button3 is clicked') 254 } 255 }, 256 ], 257 cancel: () => { 258 console.info('Closed callbacks') 259 } 260 } 261 ) 262 }).backgroundColor(0x317aff) 263 }.width('100%').margin({ top: 5 }) 264 } 265} 266``` 267 268 269
