Location>code7788 >text

Harmony System (HarmonyOS) global pop-up window implementation

Popularity：116 ℃/2024-09-10 11:48:36

Global popups have the following advantages over custom popups:

  • More thorough encapsulation, one line of code to call the
  • Low coupling with the component, you only need to pass in the UIContext object of the component, you don't need to instantiate the CustomDialogController object inside the component as you do with the custom pop-up window.

Global popups were added by Hongmeng in API 12, and the openCustomDialog method was added to the PromptAction object.

code implementation

First create an interface for passing parameters and clicking buttons in the popup window

interface GlobalDialogParam {
    content:string; //popup window display content
    onConfirm: () => void // callback function for the confirm button
    onCancel: () => void // callback function for the cancel button
}

Customize the content of the popup window by using the @Builder decorator to indicate that the function will return a tree of UI components, with the content of the popup window implemented according to your needs. This example displays a simple dialog box.

@Builder function buildGlobalDialogComponent(param: GlobalDialogParam){
    Column() {
        Text().fontSize(17).fontColor("#181818")
        .lineHeight(24).margin({
            bottom:29,top:29,left:31,right:31
        })

        Divider().color("#D8D8D8").height(0.5)
        RowSplit() {
            Text("abolish").fontSize(17).fontColor("#181818")
            .fontWeight().onClick(event=>{
                ();
            }).textAlign().padding({
                top:15,bottom:15
            }).width('50%')

            Text("recognize").fontSize(17).fontColor($r(''))
            .fontWeight().onClick(event=>{
                ();
            }).textAlign().padding({
                top:15,bottom:15
            }).width('50%')
        }
    }.backgroundColor($r('')).width('80%').borderRadius(12)
}

In the GlobalDialog class to add two static methods, used to display the pop-up window and close the pop-up window, the key code are added to the comments, here will not be too much to explain the

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

    //Display the popup window
    static show(context: UIContext,dialogParam: GlobalDialogParam){
        //The ComponentContent object has three parameters
        //Parameter 1: UI context
        //Parameter 2: Use wrapBuilder to wrap the buildGlobalDialogComponent function, which is used to build the actual content of the dialog box.
        //Parameter 3: the parameters passed to the dialog, including the content text and the button callback function
         = new ComponentContent(context, wrapBuilder(buildGlobalDialogComponent), dialogParam);

        const promptAction = ()//get promptAction via context, used to manipulate the dialog display

        // Display the popup window
        (,{
            alignment: ,//Dialog is displayed in the center of the screen.
            autoCancel: false,// Click outside the popup to cancel it.
        }); }
    }

    // Close the popup
    static close(context: UIContext){
        const promptAction = ()
        ()
    }
}

Through the above three steps, the global pop-up window code is encapsulated, the next component in how to call it? In fact, the code is very simple, call the method to display the pop-up window, and call the cancel pop-up window in the callback function of the OK and Cancel buttons.

((),{
    content: "Are you sure you want to delete this record?" ,
    onConfirm:()=>{
        (())//close the popup window
        ("OK button click");;
    },
    onCancel:()=>{
        (())//close the popup window
        ("Cancel button clicked"); }
    }
})

Rendering:

Extended reading, @Builder decorator

In Hongmeng's ArkUI development, the @Builder decorator is a markup used to simplify component building, which is typically used on functions to instruct the function to return a UI component.

The role of the @Builder decorator:

  1. Generate UI components:The @Builder decorator-tagged function is primarily used to build UI components. It returns the UI layout and component tree defined within the function to the caller so that the components can be used in the application.
  2. Improve code readability and modularity: By using @Builder, you can encapsulate complex UI building logic into a function, making the code more concise and modular for easy reuse. For example, common dialog boxes, pop-up windows, and complex components can be built with such a function and called in different places.
  3. Functional UI construction: Hongmeng's ArkUI is a declarative UI framework, @Builder provides a functional way to create UI components. Developers can build interfaces by defining functions and internal components, and use the components returned by that function for display.

Source Code Download

Global pop-up code are submitted to github, this library I will always maintain, this a Hongmeng API use case tool library, the subsequent increase in functionality as well as maintenance.

/ansen666/harmony_tools


sweep Follow my public number

<Previous Next>