Harmony-Free Hengong Dialog Customized Pop-up Window

Hello everyone, nice to meet you all! Today, we are going to talk about the custom dialog "openCustomDialog" in HONOR OS. I believe that many of you will need to use pop-up windows in your development process, and it should not be coupled with the page during use. Today, I will help you all analyze the usage of "openCustomDialog" in detail.

一、First, let's analyze the settings for pop-up windows in Harmony OS. Harmony OS provides some basic design for pop-up windows, but it cannot meet the requirements for diverse designs of pop-ups. However, it offers the method "openCustomDialog" which can be used. This method is based on the "PromptAction" under the UIContext.

1、First, define a context

// Applying Context
private context: common.UIAbilityContext = getContext() as common.UIAbilityContext;
// Tips for Methodology
private promptAction: PromptAction = context.windowStage.getMainWindowSync().getUIContext().getPromptAction()

2、Let's take a look at the parameters of penCustomDialog. dialogContent refers to the content to be displayed, which is the component. options are the parameters related to the pop-up window, such as closing the pop-up window, etc. You can refer to the Harmony OS documentation for detailed descriptions. Here, we mainly discuss the custom components that need to be displayed.

this.promptAction().openCustomDialog(custom,options);

二、The ComponentContent of the custom component has three parameters. Among them, the T type parameter is the key data for data interaction.

uiContext: This is the context of the UI. getUIContext()

builder: It is the WrappedBuilder<[T]> component decorated with @builder.

args: is a parameter of type T

1、"Builder" is a global component, which is the custom component we need to write. The generic type "T" represents the data object type that we need to pass, and "args" represents the data object that needs to be passed.

// custom component
@Builder
export function customBuilder(params: DialogBuilderParams) {
    Text("custom component")
}
// create component
let custom = new ComponentContent(getUIContext(), wrapBuilder,params)
// show component
this.promptAction().openCustomDialog(custom,options);

2、So, basically, this is the completion of a basic pop-up window. Next, let's talk about the parameters that the component needs to pass in. The parameters need to be displayed as 'params', and there are also the close method 'close' and other parameters 'status'.

export interface DialogBuilderParams<T,R>{
  params: T
  close: (data: R) => void
  status?: DialogStatus
}

3、After obtaining the data, it is displayed in the component. The code of the group definition component is modified. params.params is used to display the data, and params.close(true) is used to close the pop-up window.

// custom component
@Builder
export function customBuilder(params: DialogBuilderParams) {
  Column() {
    Text(params.params).width('90%').textAlign(TextAlign.Center).padding(10)
    Blank()
    Divider()
    Text('确认')
      .onClick(() => {
        params.close(true)
      })
      .width('100%')
      .aspectRatio(6)
      .textAlign(TextAlign.Center)
  }
  .width('70%')
  .backgroundColor(Color.White)
}

4、Implement the method for closing the popup window. When it is necessary to pass parameters for processing the close method.

// create component
let custom = new ComponentContent(getUIContext(),wrapBuilder,{
    params: "This is the data to be presented.",
    close: (data: R) => {
        // close dialog
        this.promptAction().closeCustomDialog(custom)
    }
})

Note: The complete code has been submitted to the HarmonyOS Third-Party Library. Use the following command to install.

ohpm install @free/dialog

Calling method

// Prompt Pop-up Window 
Dialog.alert({data:"alert"})
// Middle pop-up window 
Dialog.open({data:"open"})
// Bottom pop-up window 
Dialog.sheet({data:['sheet']})
// Selector Popup Window 
Dialog.picker({data:['picker']})
// Phone call pop-up window 
Dialog.tel("168********")
// Input box popup window 
Dialog.input({data:"input"})
// Time Selection Dialog Box 
Dialog.time({data:new Date()})
// Date selection dialog box 
Dialog.date({data:new Date()})
// Calendar Selection Dialog Box 
Dialog.calendar({data:new Date()})
// Custom Pop-up Window Dialog.custom(wrap, params)

If you like this content, please give a little heart!