A Detailed Explanation of the Global Pop-up Windows in the Cangjie development language of HarmonyOS NEXT

Previously, I shared the custom pop-up Windows in the Cangjie development language. That time, the custom pop-up Windows needed to be initialized on the corresponding page first and then popped up, which was not very convenient. Today, I’d like to share a global pop-up window that doesn’t rely on the page.
Cangjie provides the global pop-up module prompt_action. Import it before using it:

import ohos.prompt_action.*

This module provides three preset pop-up window forms. The first one is a simple text prompt. You can set the pop-up window content, pop-up duration, pop-up mode and other attributes. The usage method is as follows:

PromptAction.showToast(message: '这是一个弹窗', duration: 4000, bottom: "80vp", showMode: ToastShowMode.Default)

You can call it at any time anywhere on any page, which is very convenient. Take a look at the effect:

The second type is the dialogue pop-up window, which includes title, content and button prompt pop-ups. It has more content than the previous type of pop-up window and is suitable for most scenarios. The usage method is as follows:

let buttons: Array<ButtonInfo> = [
  ButtonInfo("确认", Color.RED),
  ButtonInfo("取消", Color.BLACK)
]

PromptAction.showDialog(title: "标题", message: "删除不可取消，确认删除？", buttons: buttons, callback: { err: Option<AsyncError>, i: Option<Int32> =>

  })

The pop-up window effect diagram is as follows:

The third type is the menu pop-up window, which supports the input of 1 to 6 buttons. Its usage is similar to that of a dialog box:

let buttons: Array<ButtonInfo> = [
  ButtonInfo("选项1", Color.BLACK),
  ButtonInfo("选项2", Color.BLACK)
]
PromptAction.showActionMenu(title: "标题", buttons: buttons, callback: { err: Option<AsyncError>, i: Option<Int32> =>

  })

The effect drawing is as follows:

If none of these three pop-up Windows meet your requirements, PromptAction also supports setting custom content. It will return the id of the pop-up window. We can close the pop-up window based on the id. The specific usage method is as follows:

@State var customdialogId:Int32 = 0

@Builder
func CustomDialog() {
    Column(10) {
        Image(@r(app.media.startIcon))
        .width(50)
        .height(50)
        Text("这是自定义弹窗")
        .height(50.vp)
        Button("确定")
        .onClick({
            => PromptAction.closeCustomDialog(customdialogId)
        })
    }
    .margin(10.vp)
}

PromptAction.openCustomDialog(CustomDialogOptions(builder: bind(this.CustomDialog, this)),{ id =>
            customdialogId = id
            })