1# 警告弹窗 2 3显示警告弹窗组件，可设置文本内容与响应回调。 4 5> **说明：** 6> 7> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 属性 11 12| 名称 | 参数类型 | 参数描述 | 13| ---- | --------------- | -------- | 14| show | [AlertDialogParamWithConfirm](#alertdialogparamwithconfirm对象说明) \| [AlertDialogParamWithButtons](#alertdialogparamwithbuttons对象说明) | 定义并显示AlertDialog组件。 | 15 16## AlertDialogParamWithConfirm对象说明 17| 参数名 | 参数类型 | 必填 | 参数描述 | 18| ---------- | ---------------- | ---------- | ------------------------------- | 19| title | [ResourceStr](ts-types.md#resourcestr) | 否 | 弹窗标题。 | 20| message | [ResourceStr](ts-types.md#resourcestr) | 是 | 弹窗内容。 | 21| autoCancel | boolean | 否 | 点击遮障层时，是否关闭弹窗。<br>默认值：true | 22| confirm | {<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/>} | 否 | 确认按钮的文本内容、文本色、按钮背景色和点击回调。 | 23| cancel | () => void | 否 | 点击遮障层关闭dialog时的回调。 | 24| alignment | [DialogAlignment](#dialogalignment枚举说明) | 否 | 弹窗在竖直方向上的对齐方式。<br>默认值：DialogAlignment.Default | 25| offset | [Offset](ts-types.md#offset) | 否 | 弹窗相对alignment所在位置的偏移量。 | 26| gridCount | number | 否 | 弹窗容器宽度所占用栅格数。 | 27 28## AlertDialogParamWithButtons对象说明 29| 参数名 | 参数类型 | 必填 | 参数描述 | 30| --------------- | ---------------------- | ------------ | --------------------- | 31| title | [ResourceStr](ts-types.md#resourcestr) | 否 | 弹窗标题。 | 32| message | [ResourceStr](ts-types.md#resourcestr) | 是 | 弹窗内容。 | 33| autoCancel | boolean | 否 | 点击遮障层时，是否关闭弹窗。<br>默认值：true | 34| primaryButton | {<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/>} | 否 | 按钮的文本内容、文本色、按钮背景色和点击回调。 | 35| secondaryButton | {<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/>} | 否 | 按钮的文本内容、文本色、按钮背景色和点击回调。 | 36| cancel | () => void | 否 | 点击遮障层关闭dialog时的回调。 | 37| alignment | [DialogAlignment](#dialogalignment枚举说明) | 否 | 弹窗在竖直方向上的对齐方式。<br>默认值：DialogAlignment.Default | 38| offset | [Offset](ts-types.md#offset) | 否 | 弹窗相对alignment所在位置的偏移量。 | 39| gridCount | number | 否 | 弹窗容器宽度所占用栅格数。 | 40 41## DialogAlignment枚举说明 42 43| 名称 | 描述 | 44| ------------------------ | ------- | 45| Top | 垂直顶部对齐。 | 46| Center | 垂直居中对齐。 | 47| Bottom | 垂直底部对齐。 | 48| Default | 默认对齐。 | 49| TopStart<sup>8+</sup> | 左上对齐。 | 50| TopEnd<sup>8+</sup> | 右上对齐。 | 51| CenterStart<sup>8+</sup> | 左中对齐。 | 52| CenterEnd<sup>8+</sup> | 右中对齐。 | 53| BottomStart<sup>8+</sup> | 左下对齐。 | 54| BottomEnd<sup>8+</sup> | 右下对齐。 | 55 56## 示例 57 58```ts 59// xxx.ets 60@Entry 61@Component 62struct AlertDialogExample { 63 build() { 64 Column({ space: 5 }) { 65 Button('one button dialog') 66 .onClick(() => { 67 AlertDialog.show( 68 { 69 title: 'title', 70 message: 'text', 71 autoCancel: true, 72 alignment: DialogAlignment.Bottom, 73 offset: { dx: 0, dy: -20 }, 74 gridCount: 3, 75 confirm: { 76 value: 'button', 77 action: () => { 78 console.info('Button-clicking callback') 79 } 80 }, 81 cancel: () => { 82 console.info('Closed callbacks') 83 } 84 } 85 ) 86 }) 87 .backgroundColor(0x317aff) 88 Button('two button dialog') 89 .onClick(() => { 90 AlertDialog.show( 91 { 92 title: 'title', 93 message: 'text', 94 autoCancel: true, 95 alignment: DialogAlignment.Bottom, 96 gridCount: 4, 97 offset: { dx: 0, dy: -20 }, 98 primaryButton: { 99 value: 'cancel', 100 action: () => { 101 console.info('Callback when the first button is clicked') 102 } 103 }, 104 secondaryButton: { 105 value: 'ok', 106 action: () => { 107 console.info('Callback when the second button is clicked') 108 } 109 }, 110 cancel: () => { 111 console.info('Closed callbacks') 112 } 113 } 114 ) 115 }).backgroundColor(0x317aff) 116 }.width('100%').margin({ top: 5 }) 117 } 118} 119``` 120 121 122
