HarmonyOS 鸿蒙Next中Navigation在折叠屏如何不分屏显示？

HarmonyOS 鸿蒙Next中Navigation在折叠屏如何不分屏显示？

4 回复

【背景知识】

Navigation组件是路由导航的根视图容器，一般作为Page页面的根容器使用，其内部默认包含了标题栏、内容区和工具栏，其中内容区默认首页显示导航内容（Navigation的子组件）或非首页显示（NavDestination的子组件），首页和非首页通过路由进行切换。

【解决方案】

可以将Navigation的显示模式（mode属性）设置为NavigationMode.Stack，参考文档：mode枚举说明。 代码如下：

@Entry
@Component
struct NavigationPage {
  @State message: string = 'Hello World';
  build() {
    Navigation(){
      RelativeContainer() {
        Text(this.message)
          .id('HelloWorld')
          .fontSize($r('app.float.page_text_font_size'))
          .fontWeight(FontWeight.Bold)
          .alignRules({
            center: { anchor: '__container__', align: VerticalAlign.Center },
            middle: { anchor: '__container__', align: HorizontalAlign.Center }
          })
          .onClick(() => {
            this.message = 'Welcome';
          })
      }
      .backgroundColor('#0A59F7')
      .height('100%')
      .width('100%')
    }
    .mode(NavigationMode.Stack)
    .backgroundColor('#F1F3F5')
    .height('100%')
    .width('100%')
  }
}

更多关于HarmonyOS 鸿蒙Next中Navigation在折叠屏如何不分屏显示？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


可以将Navigation的显示模式（mode属性）设置为NavigationMode.Stack，参考文档：mode枚举说明。

在HarmonyOS鸿蒙Next中，若要在折叠屏设备上实现Navigation不分屏显示，可以通过设置Navigation的displayMode属性为NavigationDisplayMode.SINGLE来实现。该属性控制导航栏的显示模式，设置为SINGLE后，导航栏将不会在折叠屏设备上分屏显示，而是保持单屏模式。具体代码示例如下：

Navigation.setDisplayMode(NavigationDisplayMode.SINGLE);

此设置适用于需要在折叠屏设备上保持统一导航体验的场景。

在HarmonyOS Next中，Navigation组件在折叠屏设备上默认会采用分屏显示模式。若需要实现不分屏显示，可以通过以下方式配置：

  1. 在manifest.json中设置：
"abilities": {
  "supportSplitScreen": false
}
  1. 代码中动态控制：
let abilityContext = ... // 获取Ability上下文
abilityContext.setSplitScreenMode(false);
  1. 对于Navigation组件本身，确保其布局参数设置为全屏显示：
Navigation(this.pageStack)
  .width('100%')
  .height('100%')

注意：强制不分屏可能会影响折叠屏设备的最佳用户体验，建议根据实际场景评估是否需要此功能。

回到顶部