HarmonyOS鸿蒙Next中OverlayManager怎么通过侧滑关闭

HarmonyOS鸿蒙Next中OverlayManager怎么通过侧滑关闭

使用context.getOverlayManager().addComponentContent增加的浮层，怎么响应侧滑事件，当前我想到的是在页面的onBackPress事件中关闭浮层，但这样会对使用浮层的业务有侵入式修改。

有没有其他什么方式？

3 回复

onBackPress 是目前支持侧滑事件的回调函数，【对使用浮层的业务有侵入式修改】具体指的是什么场景？

更多关于HarmonyOS鸿蒙Next中OverlayManager怎么通过侧滑关闭的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，OverlayManager用于管理悬浮窗。要通过侧滑关闭悬浮窗，可以使用OverlayManager的dismiss方法。具体实现时，可以在悬浮窗的布局中监听滑动手势，当检测到侧滑动作时，调用dismiss方法关闭悬浮窗。代码示例如下：

import { OverlayManager } from '@ohos.overlay';

// 监听滑动手势
gesture.onSwipe((event) => {
  if (event.direction === SwipeDirection.Left || event.direction === SwipeDirection.Right) {
    OverlayManager.dismiss(); // 关闭悬浮窗
  }
});

此代码通过监听滑动手势，当检测到左滑或右滑时，调用dismiss方法关闭悬浮窗。

在HarmonyOS Next中，可以通过以下方式实现OverlayManager浮层的侧滑关闭：

  1. 推荐使用OverlayManager自带的触摸事件处理能力，通过设置overlayOption的touchable属性为false，然后在浮层布局中添加手势监听：
const overlayOption: overlay.OverlayOption = {
  touchable: false // 允许触摸事件穿透
};

// 添加浮层时
context.getOverlayManager().addComponentContent(component, overlayOption);

// 在浮层组件内部
@State offsetX: number = 0;

build() {
  Row()
    .width('100%')
    .height('100%')
    .offset({x: this.offsetX})
    .gesture(
      PanGesture({
        onActionUpdate: (event: GestureEvent) => {
          this.offsetX = event.offsetX;
          if (Math.abs(event.offsetX) > 100) { // 滑动阈值
            context.getOverlayManager().removeComponentContent();
          }
        }
      })
    )
}
  1. 另一种方式是使用全局手势监听，这种方式不需要修改浮层内部逻辑：
// 在显示浮层时注册全局手势
let gestureListener = gesture.onGesture(GestureType.Pan, (event) => {
  if (event.offsetX > 100) { // 向右滑动超过阈值
    context.getOverlayManager().removeComponentContent();
    gestureListener.release(); // 记得释放监听
  }
});

这两种方式都不会对业务逻辑造成侵入式修改，第一种方式更推荐用于浮层内部的自定义交互，第二种适合全局手势控制。

回到顶部