HarmonyOS 鸿蒙Next中用Navigation作为页面导航时，横竖屏切换出现这问题

HarmonyOS 鸿蒙Next中用Navigation作为页面导航时，横竖屏切换出现这问题

我发现一个问题我的页面导航是用Navigaion的，现在发现当我从：导航首页（A）—》到子页面（B）—》再到子子页面（C 横屏模式）–》再退子页面（B）–》再退回到导航首页（A）。然后导航首页的底部就一块大的空白处如下图，帮我看看是什么原因造成的。

  1. 这是刚开始是的导航首页截图： 截图

  2. 这是导航后返回回来导航首页时的截图： 截图

导航首页示例代码：

  build() {
    Column(){
      Navigation(this.navPathStack) {
        Column() {
          Button('去心流页面')
            .onClick(()=>{
              this.navPathStack.pushPathByName('FlowClockPage','')
            })
        }
        .height('100%')
        .width('100%')
        .backgroundColor(Color.Green)
      }.mode(NavigationMode.Stack)
      .width('100%')
    } .size({ width: '100%', height: '100%' })
    .backgroundColor(Color.Pink)
  }

横竖屏切换代码：

1.land:

  /**
   * 设置模屏
   * @param uiAbilityContext
   */
  static setLand(uiAbilityContext: common.UIAbilityContext) {
    // 1.获取应用主窗口。
    let windowStage = uiAbilityContext.windowStage

    let windowClass: window.Window | null = null
    windowStage.getMainWindow((err: BusinessError, data: window.Window) => {
      let errCode: number = err.code;
      if (errCode) {
        console.error('Failed to obtain the main window. Cause: ' + JSON.stringify(err));
        return;
      }

      windowClass = data;
      windowClass.setPreferredOrientation(window.Orientation.LANDSCAPE)
    })
  }

2.Portrait

  /**
   * 设置竖屏
   * @param uiAbilityContext
   */
  static setPortrait(uiAbilityContext: common.UIAbilityContext) {
    // 1.获取应用主窗口。
    let windowStage = uiAbilityContext.windowStage

    let windowClass: window.Window | null = null
    windowStage.getMainWindow((err: BusinessError, data: window.Window) => {
      let errCode: number = err.code;
      if (errCode) {
        console.error('Failed to obtain the main window. Cause: ' + JSON.stringify(err));
        return;
      }

      windowClass = data;
      windowClass.setPreferredOrientation(window.Orientation.PORTRAIT)
    })
  }

更多关于HarmonyOS 鸿蒙Next中用Navigation作为页面导航时，横竖屏切换出现这问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

感谢您的提问，为了更快解决您的问题，麻烦请补充以下信息：

  • 完整的复现代码（使用目前提供代码初次进入首页即展示2.图的效果）；

更多关于HarmonyOS 鸿蒙Next中用Navigation作为页面导航时，横竖屏切换出现这问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


横竖屏切换时系统需要重新计算安全区域，若Navigation组件未及时响应尺寸变化，会导致底部工具栏占位残留。在首页的aboutToAppear生命周期中触发安全区域刷新：

aboutToAppear() {
  // 强制触发布局更新
  this.navPathStack.pop(); // 清除潜在残留路径
  this.navPathStack.pushPathByName('MainPage', '');
}

鸿蒙Next中Navigation组件在横竖屏切换时可能出现页面布局异常或导航栈问题。这是由于屏幕方向改变时未正确处理组件生命周期导致的。解决方法：在config.json中配置"orientation"为"unspecified"或锁定方向；在Ability中使用onConfigurationChanged回调重新加载页面；使用Navigation的restoreState属性保存状态。需确保页面布局适配不同方向的尺寸类。

这个问题可能是由于横竖屏切换时Navigation组件的布局状态没有正确恢复导致的。建议检查以下几点：

  1. 确保在页面返回时正确重置了屏幕方向。可以在页面B的onPageShow生命周期中强制重置为竖屏：
onPageShow() {
  ScreenOrientationUtil.setPortrait(globalThis.abilityContext);
}
  1. 检查Navigation组件的父容器Column是否设置了正确的尺寸。建议修改build方法中的Column布局：
Column() {
  Navigation(this.navPathStack) {
    Column() {
      Button('去心流页面')
        .onClick(()=>{
          this.navPathStack.pushPathByName('FlowClockPage','')
        })
    }
    .height('100%')
    .width('100%')
    .backgroundColor(Color.Green)
  }
  .mode(NavigationMode.Stack)
  .width('100%')
  .height('100%')  // 确保Navigation也有明确的高度
}
.size({ width: '100%', height: '100%' })
.backgroundColor(Color.Pink)
  1. 考虑在页面C退出时添加延迟再切换方向，确保动画完成：
onPageHide() {
  setTimeout(() => {
    ScreenOrientationUtil.setPortrait(globalThis.abilityContext);
  }, 100);
}

这个问题通常是由于屏幕方向切换和页面转场动画之间的时序问题导致的布局计算错误。

回到顶部