How to control the pop-up to disappear at a specified time?

#harmonyos #popupcomponent #arkts #popupoptions

Read the original article：How to control the pop-up to disappear at a specified time?

Problem Description

After a Pop-up is popped up, it doesn't disappear at the specified time.

Expected result: After a Pop-up is popped up, it will disappear at the specified time. For example, when a bubble Pop-up is popped up on a Tabs component, only clicking the TabBar under the bubble will trigger the Pop-up to disappear. Clicking other TabBars will respond normally and switch the TabContent.
Actual result: After the Pop-up is popped up, any click event will cause it to disappear.

Background Knowledge

Popup Control: Bind a popup window to a component and set the popup content, interaction logic, and display state.

Troubleshooting Process

During the troubleshooting process, it was identified that the default autoCancel and mask properties of the PopupOptions caused the popup to disappear upon any click event, and adjusting these properties resolved the issue.

Analysis Conclusion

Setting autoCancel and mask to false allows the TabBar's click event to be triggered directly without the Popup disappearing. If you need to toggle the TabBar's popup to disappear, add a click event to the layout container to control the show variable to hide the popup. The second parameter of bindPopup is a PopupOptions object. By default, its autoCancel value is set to true, and its mask value is also true. This results in a mask being displayed, which blocks underlying click events and causes the Popup to close directly.

Solution

In the following sample code, the first Button has neither autoCancel nor mask set. Clicking another TabBar will not trigger a tab switch, but will first close the Popup. However, the second Button has autoCancel set to false and mask set to false. Clicking another TabBar will trigger a tab switch normally.

Click the first button to pop up the Popup, click anywhere on the page to make the Popup disappear; click the second button to make a gray Popup pop up, click anywhere other than the button on the page, and the Popup will not disappear.

@Entry
@Component
struct PopupExample {
  @State customPopup: boolean = false
  @State handlePopup: boolean = false
  build() {
    Column({ space: 100 }) {
      Button("popup")
        .margin({ top: 50 })
        .onClick(() => {
          this.customPopup = !this.customPopup
        })
        .bindPopup(this.customPopup, {
          message: "this is a popup",
          arrowHeight: 20, // Set arrow height
          arrowWidth: 20, // Set arrow width
          radius: 20, // Set corner radius
          shadow: ShadowStyle.OUTER_DEFAULT_XS, // Set shadow
        })
      Button('PopupOptions')
        .onClick(() => {
          this.handlePopup = !this.handlePopup
        })
        .bindPopup(this.handlePopup, {
          width: 300,
          message: 'This is a popup with PopupOptions',
          mask: false,
          arrowPointPosition: ArrowPointPosition.START, // Set the position of the arrow
          backgroundBlurStyle: BlurStyle.NONE, 
          popupColor: Color.Red, // Set the background color 
          autoCancel: false,
        })
    }
    .width('100%')
  }
}

Verification Result

By default, a pop-up window will have a transparent mask covering the bottom page. This can be achieved by setting the mask to false. Furthermore, if you need more precise control over the hiding of the pop-up window, you can intercept it in the onWillDismiss event, including intercepting system return and clicks outside the component area.