【鸿蒙实战开发】自定义弹窗(Custom Dialog)的定义与使用

效果图

1.为什么使用自定义组件

当我们发起网络请求后要在UI上反应当前的请求情况，需要动态的向用户展示当前的网络状况，加强用户与UI之间的交互，我们在请求网络或者广告、中奖、警告、软件更新时可以使用自定义弹窗组件，自定义的样式风格自由可以满足更多的用户需求。

2.新建一个ets文件用于放置自定义的弹窗具体内容

使用@CustomDialog装饰器装饰自定义弹窗，这个修饰器内自定义的内容也就是自定义的弹窗内容

必须在自定义里面的内容里加入控制器controller: CustomDialogController

静态效果：

加上修饰器@Preview可以预览样式设置效果

自定义弹窗内容代码：

文件路径：entry/src/main/ets/common/components/CustomDialogCom.ets（文件位置根据自己目录结构来存放）

3.实例化CustomDialogController创建构造器与装饰器呼应相连

在使用的页面位置创建构造器，在构造器里面接收刚才自定义的弹窗

dialog: CustomDialogController = new CustomDialogController({  builder: LoadDialog({ message: '正在加载...' }), //定义给谁用  customStyle: true, //打卡组件已定义的私有属性  alignment: DialogAlignment.Center, //设置显示的位置 })

4.通过生命周期函数或者想要触发的事件里进行使用和关闭

this.dialog.open() //打开弹窗​this.dialog.close() //关闭弹窗

5.总结

自定义弹窗的使用灵活可以根据具体需求做出不同的改变，this.dialog.open() 打开弹窗的方法和this.dialog.close()关闭弹窗的方法可以用于网络请求中灵活实现开启与关闭，轻松展现出网络的请求状况。

以上的若如不足之处敬请谅解，内容中涉及到组件之间的传参，若有学友有需要的话我后面出一期，每天一个知识点共同进步。

写在最后

●如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我两个小忙：
●点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
●关注小编，同时可以期待后续文章ing ，不定期分享原创知识。