全局弹窗相对于自定义弹窗有以下优点：
- 封装更彻底，一行代码就能调用
- 跟组件耦合度低，只需要传入组件的uicontext对象，不需要跟自定义弹窗一样需要在组件内部实例化customdialogcontroller对象
全局弹窗是鸿蒙在api 12增加的，promptaction对象增加了opencustomdialog方法。
代码实现
首先创建一个接口，用于参数的传递，弹窗内按钮的点击
interface globaldialogparam {
content:string; //弹窗显示内容
onconfirm: () => void //确认按钮的回调函数
oncancel: () => void// 取消按钮的回调函数
}
自定义弹窗内容，使用@builder装饰器表明该函数将返回一个 ui 组件树，弹窗内容根据您的需求自己实现。本例中就显示一个简单的对话框。
@builder function buildglobaldialogcomponent(param: globaldialogparam){
column() {
text(param.content).fontsize(17).fontcolor("#181818")
.lineheight(24).margin({
bottom:29,top:29,left:31,right:31
})
divider().color("#d8d8d8").height(0.5)
rowsplit() {
text("取消").fontsize(17).fontcolor("#181818")
.fontweight(fontweight.bold).onclick(event=>{
param.oncancel();
}).textalign(textalign.center).padding({
top:15,bottom:15
}).width('50%')
text("确定").fontsize(17).fontcolor($r('app.color.maincolor'))
.fontweight(fontweight.bold).onclick(event=>{
param.onconfirm();
}).textalign(textalign.center).padding({
top:15,bottom:15
}).width('50%')
}
}.backgroundcolor($r('app.color.white')).width('80%').borderradius(12)
}
在globaldialog类中增加两个静态方法，用来显示弹窗跟关闭弹窗，关键代码都增加来注释，这里就不过多解释了
export class globaldialog {
static contentnode:componentcontent;
//显示弹窗
static show(context: uicontext,dialogparam: globaldialogparam){
//componentcontent对象有三个参数
//参数1:ui 上下文
//参数2：使用 wrapbuilder 包装 buildglobaldialogcomponent 函数，这个函数用于构建对话框的实际内容
//参数3:传递给对话框的参数，包含内容文本和按钮的回调函数
globaldialog.contentnode = new componentcontent(context, wrapbuilder(buildglobaldialogcomponent), dialogparam);
const promptaction = context.getpromptaction()//通过 context 获取 promptaction，用于操作对话框显示
//显示弹窗
promptaction.opencustomdialog(globaldialog.contentnode,{
alignment: dialogalignment.center,//对话框在屏幕中央显示
autocancel: false,//点击弹窗外区域是否取消弹窗
});
}
//关闭弹窗
static close(context: uicontext){
const promptaction = context.getpromptaction()
promptaction.closecustomdialog(globaldialog.contentnode)
}
}
通过以上三个步骤，全局弹窗的代码就封装好了，接下来在组件中如何调用呢？其实代码很简单，调用globaldialog.show方法显示弹窗，在确定跟取消按钮的回调函数中调用globaldialog.close取消弹窗。
globaldialog.show(this.getuicontext(),{
content:"您确定要删除这条记录吗？",
onconfirm:()=>{
globaldialog.close(this.getuicontext())//关闭弹窗
apputil.showtoast("确定按钮点击");
},
oncancel:()=>{
globaldialog.close(this.getuicontext())//关闭弹窗
apputil.showtoast("取消按钮点击");
}
})
效果图：
延伸阅读，@builder 装饰器
在鸿蒙的 arkui 开发中，@builder 装饰器是一种用于简化组件构建的标记，它通常用于函数上，指示该函数返回一个 ui 组件。
@builder 装饰器的作用：
- 生成ui组件：@builder 装饰器标记的函数主要用于构建 ui 组件。它将函数体内定义的 ui 布局和组件树返回给调用方，以便在应用程序中使用这些组件。
- 提高代码可读性和模块化： 通过使用 @builder，可以把复杂的 ui 构建逻辑封装到一个函数中，使得代码更简洁和模块化，便于复用。例如，常见的对话框、弹窗、复杂组件可以通过这样的函数构建，并在不同的地方调用。
- 函数式ui构建： 鸿蒙的 arkui 是声明式 ui 框架，@builder 提供了一种函数式的 ui 组件创建方式。开发者可以通过定义函数和内部组件来构建界面，并使用该函数返回的组件进行显示。
源码下载
全局弹窗的代码都提交到github上了，这个库我会一直维护，这个一个鸿蒙api使用案例的工具库，后续会陆续增加功能以及维护。
