HarmonyOS鸿蒙Next中如何控制Popup在指定时间消失

【问题现象】

Popup弹出后，没办法在指定时机消失。

预期效果：

Popup弹出后，能在指定时机消失。如：在Tabs组件上弹出气泡Popup，只有点击气泡下的TabBar，才会主动触发Popup消失，点击其它TabBar会正常响应点击事件并切换TabContent。

实际效果：

Popup弹出后，任何点击事件都会消失。

【背景知识】

Popup控制：给组件绑定popup弹窗，并设置弹窗内容，交互逻辑和显示状态。

【定位思路】

bindPopup的第二个参数是PopupOptions对象，其默认autoCancel的值是true，mask值也是true，会展示遮罩点击遮罩会默认关闭Popup弹窗，而遮罩会遮挡住下面内容区域，导致点击事件无法透传到下面内容区域，而直接关闭弹窗。

【解决方案】

可以将autoCancel设为false，mask设为false，这时候可以直接触发TabBar的点击切换事件，而Popup弹窗不消失，如果需要切换TabBar弹窗消失的话，可以在布局容器中增加点击事件去控制show变量来隐藏弹窗。

如下示例代码中，第一个Button没有设置autoCancel和mask，点击其他TabBar不会触发Tab切换，会先关闭Popup。而第二个Button设置了autoCancel为false,mask为false之后，点击其他TabBar就可以正常触发TabBar点击切换事件。

@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, // 设置气泡箭头高度
          arrowWidth: 20, // 设置气泡箭头宽度
          radius: 20, // 设置气泡的圆角
          shadow: ShadowStyle.OUTER_DEFAULT_XS, // 设置气泡的阴影
        })
      Button('PopupOptions')
        .onClick(() => {
          this.handlePopup = !this.handlePopup
        })
        .bindPopup(this.handlePopup, {
          width: 300,
          message: 'This is a popup with PopupOptions',
          mask: false,
          arrowPointPosition: ArrowPointPosition.START, // 设置箭头的位置
          backgroundBlurStyle: BlurStyle.NONE, // 关闭气泡的模糊背景
          popupColor: Color.Red, // 设置气泡的背景色
          autoCancel: false,
        })
    }
    .width('100%')
  }
}

如图所示：

点击第一个按钮popup弹出，点击页面任意位置popup消失。

点击第2个按钮灰色popup弹出，点击页面任意非按钮位置，它不会消失。

【总结】

Popup弹窗默认会有透明遮罩挡住底部页面，将mask设为false即可。此外，如果需要更精确的控制弹窗的隐藏的话还可以在onWillDismiss事件中进行拦截控制，包含系统返回拦截以及点击组件外部区域拦截。