鸿蒙开发中实现自定义弹窗 (CustomDialog)

效果图

#思路

创建带有 @CustomDialog 修饰的组件 ，并且在组件内部定义controller: CustomDialogController

实例化CustomDialogController，加载组件，open()-> 打开对话框 ， close() -> 关闭对话框

#定义弹窗 (CustomDialog)是什么？
CustomDialog是自定义弹窗，可用于广告、中奖、警告、软件更新等与用户交互响应操作。开发者可以通过CustomDialogController类显示自定义弹窗。
##步骤：

1.定义自定义弹窗

使用@CustomDialog装饰器装饰自定义弹窗，并且在组件内部定义controller: CustomDialogController

/*
 * 自定义弹窗有规则：
 * 1.必须有@CustomDialog
 * 2.里面使用 controller:CustomDialogController 定义一个固定的控制器对象
 * */
@CustomDialog
export struct HdLoadingDialog {
  @State
  message: string = ''
  controller: CustomDialogController

  build() {
    Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      LoadingProgress().width(30).height(30).color('#fff')
      if (this.message) {Text(this.message).fontSize((14)).fontColor('#fff')}
    }
    .width(150)
    .height(50)
    .padding(10)
    .backgroundColor('rgba(0,0,0,0.5)')
    .borderRadius(8)
  }
}

2.在想用的地方调用

调用方：实例化CustomDialogController，加载组件，open()-> 打开对话框 ， close() -> 关闭对话框

  dialog = new CustomDialogController({
    builder: LoadingDialog({ message: '加载中...' }),
    customStyle: true, // 去掉弹框默认样式,使用自定义样式
    alignment:DialogAlignment.Center
  })

this.dialog.open()  //打开对话框

this.dialog.close()  //关闭对话框