鸿蒙弹窗实现乱象？带你玩转正确的实现姿势

news2024/11/21 11:34:07

最近看到很多童鞋吐槽鸿蒙自定义弹窗的实现，也有不少童鞋提供了各式各样的低耦，轻巧方向的优化方案，但多数参差不齐，甚至有基于老API(白玩，以后还得废弃掉…)给的方案，为避免如此“乱象”遂提出正确的实现姿势。

姿势一

如果您没有特别的要求，系统AlertDialog(API 6+)完全够用

代码示例：

AlertDialog.show({
      title: '温馨提示',
      message: '您确认要退出登录吗？',
      autoCancel: true, //点击窗口外边是否自动关闭
      alignment: DialogAlignment.Center, //弹窗位置
      cornerRadius: 8,
      primaryButton: {
        value: '确认',
        action: () => {
          toast.show('点击了确认按钮')
        }
      },
      secondaryButton: {
        value: '取消',
        action: () => {
          toast.show('点击了取消按钮')
        }
      },
      cancel: () => {
          toast.show('点击弹窗外导致的取消回调')
      }
    })

效果是酱紫的：

demo0

系统AlertDialog还可以定制一些特别的样式：

demo1

具体就不代码举例了，感兴趣的童鞋可以参考官网demo哈

姿势二

很多时候，系统AlertDialog并不能满足精致化的业务需求，那么API 7给您带来了饱受诟病和吐槽的CustomDialog(API 6+)来方便开发者自定义弹窗

代码示例：

@CustomDialog
@Preview
export struct CommonDialog {
  title: string | Resource = "温馨提示"
  msg: string | Resource = ""
  confirm: string | Resource = "确认"
  cancel: string | Resource = "取消"
  controller?: CustomDialogController
  onCancel: () => void = () => {
  }
  onConfirm: () => void = () => {
  }

  build() {
    Column({ space: 30 }) {
      Text(this.title)
        ......

      Text(this.msg)
        ......
        
      Flex({ justifyContent: FlexAlign.SpaceAround }) {
        Button(this.cancel)
          .onClick(() => {
            if (this.controller) {
              this.controller.close()
              this.onCancel()
            }
          })
          ......

        Button(this.confirm)
          .onClick(() => {
            if (this.controller) {
              this.controller.close()
              this.onConfirm()
            }
          })
          ......
      }
    }
  }
}

然后在组件中配置和唤起：

@Entry
@Component
struct ToolTestPage {
  private dialogController: CustomDialogController = new CustomDialogController({
    builder: CommonDialog({
      onCancel: () => {
        toast.show("你点了取消")
      },
      onConfirm: () => {
        toast.showLong("你点了确认")
      },
      title: "温馨提示",
      msg: "您确认要退出登录吗？",
      cancel: "取消",
      confirm: "确认",
    })
  })

  build() {
  ......
    Button('自定义弹窗')
      .onClick(() => {
        this.dialogController.open()
      })
  ......
  }
}

运行效果：

demo2