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

本文主要是介绍鸿蒙开发中实现自定义弹窗 (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()  //关闭对话框

这篇关于鸿蒙开发中实现自定义弹窗 (CustomDialog)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---