全局彈窗相對于自定義彈窗有以下優(yōu)點：

• 封裝更徹底，一行代碼就能調(diào)用
• 跟組件耦合度低，只需要傳入組件的UIContext對象，不需要跟自定義彈窗一樣需要在組件內(nèi)部實例化CustomDialogController對象

全局彈窗是鴻蒙在API 12增加的，PromptAction對象增加了openCustomDialog方法。

代碼實現(xiàn)

首先創(chuàng)建一個接口，用于參數(shù)的傳遞，彈窗內(nèi)按鈕的點擊

interface GlobalDialogParam {
    content:string; //彈窗顯示內(nèi)容
    onConfirm: () => void //確認按鈕的回調(diào)函數(shù)
    onCancel: () => void// 取消按鈕的回調(diào)函數(shù)
}

自定義彈窗內(nèi)容，使用@Builder裝飾器表明該函數(shù)將返回一個 UI 組件樹，彈窗內(nèi)容根據(jù)您的需求自己實現(xiàn)。本例中就顯示一個簡單的對話框。

@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類中增加兩個靜態(tài)方法，用來顯示彈窗跟關(guān)閉彈窗，關(guān)鍵代碼都增加來注釋，這里就不過多解釋了

export class GlobalDialog {
    static contentNode:ComponentContent<GlobalDialogParam>;

    //顯示彈窗
    static show(context: UIContext,dialogParam: GlobalDialogParam){
        //ComponentContent對象有三個參數(shù)
        //參數(shù)1:UI 上下文
        //參數(shù)2：使用 wrapBuilder 包裝 buildGlobalDialogComponent 函數(shù)，這個函數(shù)用于構(gòu)建對話框的實際內(nèi)容
        //參數(shù)3:傳遞給對話框的參數(shù)，包含內(nèi)容文本和按鈕的回調(diào)函數(shù)
        GlobalDialog.contentNode = new ComponentContent(context, wrapBuilder(buildGlobalDialogComponent), dialogParam);

        const promptAction = context.getPromptAction()//通過 context 獲取 promptAction，用于操作對話框顯示

        //顯示彈窗
        promptAction.openCustomDialog(GlobalDialog.contentNode,{
            alignment: DialogAlignment.Center,//對話框在屏幕中央顯示
            autoCancel: false,//點擊彈窗外區(qū)域是否取消彈窗
        });
    }

    //關(guān)閉彈窗
    static close(context: UIContext){
        const promptAction = context.getPromptAction()
        promptAction.closeCustomDialog(GlobalDialog.contentNode)
    }
}

通過以上三個步驟，全局彈窗的代碼就封裝好了，接下來在組件中如何調(diào)用呢？其實代碼很簡單，調(diào)用GlobalDialog.show方法顯示彈窗，在確定跟取消按鈕的回調(diào)函數(shù)中調(diào)用GlobalDialog.close取消彈窗。

GlobalDialog.show(this.getUIContext(),{
    content:"您確定要刪除這條記錄嗎？",
    onConfirm:()=>{
        GlobalDialog.close(this.getUIContext())//關(guān)閉彈窗
        AppUtil.showToast("確定按鈕點擊");
    },
    onCancel:()=>{
        GlobalDialog.close(this.getUIContext())//關(guān)閉彈窗
        AppUtil.showToast("取消按鈕點擊");
    }
})

效果圖：

延伸閱讀，@Builder 裝飾器

在鴻蒙的 ArkUI 開發(fā)中，@Builder 裝飾器是一種用于簡化組件構(gòu)建的標記，它通常用于函數(shù)上，指示該函數(shù)返回一個 UI 組件。

@Builder 裝飾器的作用：

1. 生成UI組件：@Builder 裝飾器標記的函數(shù)主要用于構(gòu)建 UI 組件。它將函數(shù)體內(nèi)定義的 UI 布局和組件樹返回給調(diào)用方，以便在應用程序中使用這些組件。
2. 提高代碼可讀性和模塊化： 通過使用 @Builder，可以把復雜的 UI 構(gòu)建邏輯封裝到一個函數(shù)中，使得代碼更簡潔和模塊化，便于復用。例如，常見的對話框、彈窗、復雜組件可以通過這樣的函數(shù)構(gòu)建，并在不同的地方調(diào)用。
3. 函數(shù)式UI構(gòu)建： 鴻蒙的 ArkUI 是聲明式 UI 框架，@Builder 提供了一種函數(shù)式的 UI 組件創(chuàng)建方式。開發(fā)者可以通過定義函數(shù)和內(nèi)部組件來構(gòu)建界面，并使用該函數(shù)返回的組件進行顯示。

源碼下載

全局彈窗的代碼都提交到github上了，這個庫我會一直維護，這個一個鴻蒙API使用案例的工具庫，后續(xù)會陸續(xù)增加功能以及維護。

https://github.com/ansen666/harmony_tools

掃一掃 關(guān)注我的公眾號