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

2024-10-18
福建
本文字数：1997 字
阅读完需：约 7 分钟

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

封装更彻底，一行代码就能调用
跟组件耦合度低，只需要传入组件的 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("取消按钮点击");    }})

复制代码

效果图：