目录

平板切换自由多窗模式后，页面横向滑动失效

问题现象

页面在全屏模式下左滑到下一个页面后，切换自由多窗模式，此时页面无法右滑回到上一页。

背景知识

问题定位

  1. 建议检查代码中PanGesture滑动手势事件中onActionUpdate和onActionEnd方法中设定的偏移量阈值是否是固定的。
  2. 如果设定为固定值，检查应用有没有通过on('windowSizeChange')方法实现对窗口尺寸大小变化的监听。在窗口变化时无法及时动态改变滑动阈值，会导致自由多窗情况下滑动不到设定的距离，无法完成滑动返回上一页的操作。

分析结论

应用没有通过on('windowSizeChange')方法实现对窗口尺寸大小变化的监听，因此在动态切换到自由多窗后，PanGesture手势事件的判定值没有及时更新到自由多窗下的尺寸，导致滑动距离无法达到判定值，无法滑动切换页面。

修改建议

通过on('windowSizeChange')方法实现对窗口尺寸大小变化的监听，并在不同窗口尺寸下，设置不同的滑动距离。
import { window } from '@kit.ArkUI';
import { common } from '@kit.AbilityKit';

@Entry
@Component
struct PanGestureExample {
  @State offsetX: number = 0;
  @State offsetY: number = 0;
  // 初始化参数，这里会初始化为AppStorage中存储的值
  @State winWidth: number | undefined = 0;
  @State winHeight: number | undefined = 0;
  private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.All });

  getWindow(): window.Window {
    let context = this.getUIContext().getHostContext() as common.UIAbilityContext;
    let windowStage = context.windowStage;
    let windowClass = windowStage.getMainWindowSync();
    return windowClass;
  }

  onPageShow(): void {
    let windowClass: window.Window = this.getWindow();
    let properties = windowClass.getWindowProperties();
    let rect = properties.windowRect;
    this.winWidth = rect.width;
    this.winHeight = rect.height;
  }

  aboutToAppear() {
    let windowClass: window.Window = this.getWindow();
    // 监听窗口尺寸的变化
    windowClass?.on('windowSizeChange', (data) => {
      this.winWidth = data.width;
      this.winHeight = data.height;
    });
  }

  build() {
    Column() {
      Column() {
        // 实际开发中结合两者大小变化，动态调整滑动距离的触发条件
        Text(`滑动距离动态变化 X:${this.offsetX}  Y:${this.offsetY}`);
        Text(`窗口尺寸大小width:${this.winWidth},height:${this.winHeight}`);
      }
      .width('100%')
      .height('100%')
      .padding(20)
      .margin(50)
      // 手指滑动触发该手势事件
      .gesture(
        PanGesture(this.panOption)
          .onActionUpdate((event: GestureEvent) => {
            if (event) {
              this.offsetX = event.offsetX;
              this.offsetY = event.offsetY;
            }
          })
      );
    };
  }
}