鸿蒙系统(HarmonyOS)全局弹窗实现

全局弹窗相对于自定义弹窗有以下优点：

• 封装更彻底，一行代码就能调用
• 跟组件耦合度低，只需要传入组件的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<GlobalDialogParam>;

    //显示弹窗
    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 装饰器的作用：

1. 生成UI组件：@Builder 装饰器标记的函数主要用于构建 UI 组件。它将函数体内定义的 UI 布局和组件树返回给调用方，以便在应用程序中使用这些组件。
2. 提高代码可读性和模块化： 通过使用 @Builder，可以把复杂的 UI 构建逻辑封装到一个函数中，使得代码更简洁和模块化，便于复用。例如，常见的对话框、弹窗、复杂组件可以通过这样的函数构建，并在不同的地方调用。
3. 函数式UI构建： 鸿蒙的 ArkUI 是声明式 UI 框架，@Builder 提供了一种函数式的 UI 组件创建方式。开发者可以通过定义函数和内部组件来构建界面，并使用该函数返回的组件进行显示。

源码下载

全局弹窗的代码都提交到github上了，这个库我会一直维护，这个一个鸿蒙API使用案例的工具库，后续会陆续增加功能以及维护。

https://github.com/ansen666/harmony_tools

扫一扫 关注我的公众号