警告弹窗

2024-01-22 18:20 更新

显示警告弹窗组件,可设置文本内容与响应回调。

说明

从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

属性

名称参数类型参数描述
showAlertDialogParamWithConfirm | AlertDialogParamWithButtons定义并显示AlertDialog组件。

AlertDialogParamWithConfirm对象说明

参数名参数类型必填参数描述
titleResourceStr弹窗标题。
messageResourceStr弹窗内容。
autoCancelboolean

点击遮障层时,是否关闭弹窗。

默认值:true

confirm

{

value: ResourceStr,

fontColor?: ResourceColor,

backgroundColor?: ResourceColor,

action: () => void

}

确认按钮的文本内容、文本色、按钮背景色和点击回调。
cancel() => void点击遮障层关闭dialog时的回调。
alignmentDialogAlignment

弹窗在竖直方向上的对齐方式。

默认值:DialogAlignment.Default

offsetOffset弹窗相对alignment所在位置的偏移量。
gridCountnumber弹窗容器宽度所占用栅格数。

AlertDialogParamWithButtons对象说明

参数名参数类型必填参数描述
titleResourceStr弹窗标题。
messageResourceStr弹窗内容。
autoCancelboolean

点击遮障层时,是否关闭弹窗。

默认值:true

primaryButton

{

value: ResourceStr,

fontColor?: ResourceColor,

backgroundColor?: ResourceColor,

action: () => void;

}

按钮的文本内容、文本色、按钮背景色和点击回调。
secondaryButton

{

value: ResourceStr,

fontColor?: ResourceColor,

backgroundColor?: ResourceColor,

action: () => void;

}

按钮的文本内容、文本色、按钮背景色和点击回调。
cancel() => void点击遮障层关闭dialog时的回调。
alignmentDialogAlignment

弹窗在竖直方向上的对齐方式。

默认值:DialogAlignment.Default

offsetOffset弹窗相对alignment所在位置的偏移量。
gridCountnumber弹窗容器宽度所占用栅格数。

DialogAlignment枚举说明

名称描述
Top垂直顶部对齐。
Center垂直居中对齐。
Bottom垂直底部对齐。
Default默认对齐。
TopStart8+左上对齐。
TopEnd8+右上对齐。
CenterStart8+左中对齐。
CenterEnd8+右中对齐。
BottomStart8+左下对齐。
BottomEnd8+右下对齐。

示例

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct AlertDialogExample {
  5. build() {
  6. Column({ space: 5 }) {
  7. Button('one button dialog')
  8. .onClick(() => {
  9. AlertDialog.show(
  10. {
  11. title: 'title',
  12. message: 'text',
  13. autoCancel: true,
  14. alignment: DialogAlignment.Bottom,
  15. offset: { dx: 0, dy: -20 },
  16. gridCount: 3,
  17. confirm: {
  18. value: 'button',
  19. action: () => {
  20. console.info('Button-clicking callback')
  21. }
  22. },
  23. cancel: () => {
  24. console.info('Closed callbacks')
  25. }
  26. }
  27. )
  28. })
  29. .backgroundColor(0x317aff)
  30. Button('two button dialog')
  31. .onClick(() => {
  32. AlertDialog.show(
  33. {
  34. title: 'title',
  35. message: 'text',
  36. autoCancel: true,
  37. alignment: DialogAlignment.Bottom,
  38. gridCount: 4,
  39. offset: { dx: 0, dy: -20 },
  40. primaryButton: {
  41. value: 'cancel',
  42. action: () => {
  43. console.info('Callback when the first button is clicked')
  44. }
  45. },
  46. secondaryButton: {
  47. value: 'ok',
  48. action: () => {
  49. console.info('Callback when the second button is clicked')
  50. }
  51. },
  52. cancel: () => {
  53. console.info('Closed callbacks')
  54. }
  55. }
  56. )
  57. }).backgroundColor(0x317aff)
  58. }.width('100%').margin({ top: 5 })
  59. }
  60. }

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号