[鸿蒙]介绍几种常用弹窗

一. AlertDialog

AlertDialog.show(): 大弹窗(弹窗宽度几乎占领整个手机界面)

    // 建议使用this.getUIContext().showAlertDialog()
    //一个按钮的弹窗
    AlertDialog.show(
      {
        title: 'title',
        // 副标题
        subtitle: 'subtitle',
        //如果要打印后端返回数据&格式化这样写：JSON.stringify(res, null, 2)
        message: '你好，这里是内容', 
        //点击遮障层时是否关闭弹窗，true:关闭弹窗。false:不关闭弹窗
        autoCancel: true,
        // 对齐方式
        alignment: DialogAlignment.Bottom,
        // 设置整个弹窗偏移多少
        offset: { dx: 30, dy: -100 },
        gridCount: 3,
        confirm: {
          value: 'button',
          action: () => {
            console.info('Button-clicking callback')
          }
        },
        // 关闭弹窗后的回调
        cancel: () => {
          console.info('Closed callbacks')
        },
        // 弹窗即将消失前的回调
        // 这里的DismissReason.PRESS_BACK和DismissReason.TOUCH_OUTSIDE是三键 back 操作、点击遮障层(弹窗以外的区域)操作
        onWillDismiss: (dismissDialogAction: DismissDialogAction) => {
          console.info("reason=" + JSON.stringify(dismissDialogAction.reason))
          console.log("dialog onWillDismiss")
          if (dismissDialogAction.reason == DismissReason.PRESS_BACK) {
            dismissDialogAction.dismiss()
          }
          if (dismissDialogAction.reason == DismissReason.TOUCH_OUTSIDE) {
            dismissDialogAction.dismiss()
          }
        }
      }
    )
  })
  .backgroundColor(0x317aff)

//两个按钮的
Button('two button dialog')
  .onClick(() => {
    // 建议使用this.getUIContext().showAlertDialog()
    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')
          }
        },
        // 第一个按钮，enabled、defaultFocus、style属性就默认按照这里的写
        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')
        },
        onWillDismiss: (dismissDialogAction: DismissDialogAction) => {
          console.info("reason=" + JSON.stringify(dismissDialogAction.reason))
          console.log("dialog onWillDismiss")
          if (dismissDialogAction.reason == DismissReason.PRESS_BACK) {
            dismissDialogAction.dismiss()
          }
          if (dismissDialogAction.reason == DismissReason.TOUCH_OUTSIDE) {
            dismissDialogAction.dismiss()
          }
        }
      }
    )
  }).backgroundColor(0x317aff)

//三个按钮的
Button('three button dialog')
  .onClick(() => {
    // 建议使用this.getUIContext().showAlertDialog()
    AlertDialog.show(
      {
        title: 'title',
        subtitle: 'subtitle',
        message: 'text',
        autoCancel: true,
        alignment: DialogAlignment.Bottom,
        gridCount: 4,
        offset: { dx: 0, dy: -20 },
        buttonDirection: DialogButtonDirection.HORIZONTAL,
        buttons: [
          {
            value: '按钮',
            action: () => {
              console.info('Callback when button1 is clicked')
            }
          },
          {
            value: '按钮',
            action: () => {
              console.info('Callback when button2 is clicked')
            }
          },
          {
            value: '按钮',
            enabled: true,
            defaultFocus: true,
            style: DialogButtonStyle.HIGHLIGHT,
            action: () => {
              console.info('Callback when button3 is clicked')
            }
          },
        ],
        cancel: () => {
          console.info('Closed callbacks')
        },
        onWillDismiss: (dismissDialogAction: DismissDialogAction) => {
          console.info("reason=" + JSON.stringify(dismissDialogAction.reason))
          console.log("dialog onWillDismiss")
          if (dismissDialogAction.reason == DismissReason.PRESS_BACK) {
            dismissDialogAction.dismiss()
          }
          if (dismissDialogAction.reason == DismissReason.TOUCH_OUTSIDE) {
            dismissDialogAction.dismiss()
          }
        }
      }
    )
  }).backgroundColor(0x317aff)

二. promptAction

1.promptAction.showToast(): 轻弹窗(小弹窗)

2.promptAction.showDialog() : 可点击可选弹窗,也可设置和AlertDialog.show()差不多的"大弹窗"

(1) 可点击可选弹窗

promptAction.showDialog({
  alignment: DialogAlignment.Center,
  title: '温馨提示',
  message: '通讯录功能需要获取权限，请在系统设置中打开通讯录开关',
  buttons: [
    { text: '取消', color: $r('app.color.font_sub') },
    { text: '立即开启', color: $r('app.color.brand') }
  ]
})

(2) 大弹窗