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

效果图

#思路

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

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

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

1.定义自定义弹窗

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

/** 自定义弹窗有规则：* 1.必须有@CustomDialog* 2.里面使用 controller:CustomDialogController 定义一个固定的控制器对象* */
@CustomDialog
export struct HdLoadingDialog {@Statemessage: string = ''controller: CustomDialogControllerbuild() {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() //关闭对话框