DEV Community

Cover image for HarmonyOS development: openCustomDialog to close the specified Dialog
程序员一鸣
程序员一鸣

Posted on

HarmonyOS development: openCustomDialog to close the specified Dialog

#harmonyos

Foreword

this article is based on Api13

openCustomDialog makes up for many limitations in the use of CustomDialogController, and realizes that it can pop up at any position, which can be said to be very convenient. However, there are some small obstacles in use. For example, there may be multiple pop-up windows in a page, and the hiding order of these pop-up windows is uncertain. How can the corresponding pop-up windows be hidden according to certain conditions, that is, how to hide the specified pop-up window instead of the top pop-up window.

At present, there are two ways to implement, one is by storing ComponentContent, and the other is by storing dialogId to implement, then in this article, we will give examples of these two implementations one by one.

Store ComponentContent implementation to close the specified Dialog

we know that in when openCustomDialog, it will receive a ComponentContent will also be used when closing the pop-up window. Therefore, we can make a simple storage of ComponentContent. Persistent storage is not recommended for storage here. After all, it is usually done in one page. Even if it is not on the same page, we can also use global variable storage. How can we find the stored ComponentContent?, HashMap is recommend used here. key-value pairs are stored in this form, and key can be easily used to find the corresponding value.

Eject Dialog

After the pop-up window is popped up, the map set is used for storage. When the Dialog is popped up, an identification, that is, the key corresponding to the Dialog, needs to be transmitted.

 private showDialog(key: string) {
    let uiContext = this.getUIContext()
    let promptAction = uiContext.getPromptAction()
    let contentNode = new ComponentContent(uiContext, wrapBuilder(TextDialog))
    promptAction.openCustomDialog(contentNode).then(() => {

      this.mCustomDialogMap.set(key, contentNode)
    })
  }
Enter fullscreen mode Exit fullscreen mode

Hide Dialog

when hiding, just pass the corresponding key directly. Remember, remove the elements in map after hiding.

private hideDialog(key: string) {
    if (this.mCustomDialogMap.hasKey(key)) {
      let uiContext = this.getUIContext()
      let promptAction = uiContext.getPromptAction()
      let contentNode = this.mCustomDialogMap.get(key)
      promptAction.closeCustomDialog(contentNode).then(() => {

        this.mCustomDialogMap.remove(key)
      })
    }
  }
Enter fullscreen mode Exit fullscreen mode

Storage dialogId implement closing the specified Dialog

storage dialogId and storage the ComponentContent logic is basically the same, but it shows that the UI mode needs to be switched. Since dialogId must be obtained through builder, the passed ComponentContent is changed to internally defined here. @ Builder, if you want to use the global UI component, you can do it in the defined Builder.

Eject Dialog 

private showDialog(key: string) {
    let uiContext = this.getUIContext()
    let promptAction = uiContext.getPromptAction()
    promptAction.openCustomDialog({
      builder: () => {
        this.TextDialog(message)
      }
    }).then((dialogId: number) => {
      this.mCustomDialogMap.set(key, dialogId)
    })
  }
Enter fullscreen mode Exit fullscreen mode

hide Dialog 

private hideDialog(key: string) {
    if (this.mCustomDialogMap.hasKey(key)) {
      let uiContext = this.getUIContext()
      let promptAction = uiContext.getPromptAction()
      let dialogId = this.mCustomDialogMap.get(key)
      promptAction.closeCustomDialog(dialogId)

      this.mCustomDialogMap.remove(key)
    }
  }
Enter fullscreen mode Exit fullscreen mode

related Summary

the above are two ways to hide the specified Dialog. They are relatively simple and specific scenes. They are common in multiple pop-up Dialog on the page, but the specified Dialog scenes need to be hidden. Of course, they are also applicable to common common scenes.

Top comments (0)