HarmonyOS鸿蒙Next中Navigation初始时单栏跳转后双栏

HarmonyOS鸿蒙Next中Navigation初始时是单栏的，希望跳转到某个页面后变成双栏，该如何实现？

3 回复

在宽屏设备上，Navigation 的 mode 默认处于 Split 模式（双栏），但是可以通过设置 mode 的值来切换单双栏，这里通过 AttributeModifier<NavigationModifier> 来改变 Navigation 各属性的值，示例如下：

class NavigationMainModifier implements AttributeModifier<NavigationModifier> {
  navigationMode: NavigationMode = NavigationMode.Auto;

  // 成员变量navigationMode的值改变时，会自动调用此方法
  applyNormalAttribute(instance: NavigationModifier): void {
    instance.mode(this.navigationMode)
  }
}

@Component
struct StartPage {
  @State navigationMainModifier: NavigationMainModifier = new NavigationMainModifier();
  ...

  aboutToAppear(): void {
    this.pathStack.setInterception({
      willShow: (from: NavDestinationContext | NavBar, to: NavDestinationContext | NavBar) => {
        // 由首页发起的跳转，切换成双栏模式
        if (from == 'navBar') {
          this.navigationMainModifier.navigationMode = NavigationMode.Split;
          // 跳转到首页，切换成单栏模式
        } else if (to == 'navBar') {
          this.navigationMainModifier.navigationMode = NavigationMode.Stack;
        }
      }
    })
  }

  build() {
    Navigation(this.pathStack) {
      ...
    }.title('主页面')
    .attributeModifier(this.navigationMainModifier)
  }
}

效果如下：

0030086000697657393.20250514151840.41372740022138658415693255938567.gif

完整示例如下：

import { NavigationModifier } from "@kit.ArkUI";

class NavigationMainModifier implements AttributeModifier<NavigationModifier> {
  navigationMode: NavigationMode = NavigationMode.Auto;

  // 成员变量navigationMode的值改变时，会自动调用此方法
  applyNormalAttribute(instance: NavigationModifier): void {
    instance.mode(this.navigationMode)
  }
}

@ComponentV2
struct Page01 {
  pathStack: NavPathStack | undefined = undefined;

  build() {
    NavDestination() {
      Button('push 页面1').width('80%').margin({ top: 10, bottom: 10 })
        .onClick(() => {
          this.pathStack?.pushPath({ name: 'Page01' });
        })
      Button(`pop`).width('80%').margin({ top: 10, bottom: 10 })
        .onClick(() => {
          this.pathStack?.pop();
        })
    }.title('页面1')
    .onReady((context: NavDestinationContext) => {
      this.pathStack = context.pathStack;
    })
  }
}

@Entry
@Component
struct StartPage {
  pathStack: NavPathStack = new NavPathStack();
  @State navigationMainModifier: NavigationMainModifier = new NavigationMainModifier();

  @Builder
  pagesMap(name: string) {
    if (name == 'Page01') {
      Page01()
    }
  }

  aboutToAppear(): void {
    this.pathStack.setInterception({
      willShow: (from: NavDestinationContext | NavBar, to: NavDestinationContext | NavBar) => {
        // 由首页发起的跳转，切换成双栏模式
        if (from == 'navBar') {
          this.navigationMainModifier.navigationMode = NavigationMode.Split;
          // 跳转到首页，切换成单栏模式
        } else if (to == 'navBar') {
          this.navigationMainModifier.navigationMode = NavigationMode.Stack;
        }
      }
    })
  }

  build() {
    Navigation(this.pathStack) {
      Column() {
        Button('push 页面1').width('80%').margin({ top: 10, bottom: 10 })
          .onClick(() => {
            this.pathStack.pushPath({ name: 'Page01' });
          })
      }
    }.title('主页面')
    .titleMode(NavigationTitleMode.Mini)
    .mode(NavigationMode.Stack)
    .attributeModifier(this.navigationMainModifier)
    .navDestination(this.pagesMap)
  }
}

更多关于HarmonyOS鸿蒙Next中Navigation初始时单栏跳转后双栏的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，Navigation组件支持初始时为单栏布局，跳转后切换为双栏布局。这种设计通常用于在不同页面间切换时，根据页面内容动态调整布局。开发者可以通过配置Navigation的mode属性来实现单栏和双栏的切换。初始时设置mode为single，跳转后将其改为double，即可实现布局的动态变化。

在HarmonyOS Next中实现Navigation从单栏跳转后变为双栏，可以通过动态修改Navigation的displayMode属性来实现。以下是具体实现方案：

  1. 在初始页面设置单栏模式：
struct FirstPage {
  build() {
    Navigation(this.pageName) {
      // 单栏内容
    }
    .displayMode(NavigationDisplayMode.Stack)
  }
}
  1. 在目标页面切换为双栏模式：
struct SecondPage {
  @State pageName: string = 'SecondPage'

  build() {
    Navigation(this.pageName) {
      // 左侧栏内容
      Column() {
        // 左侧组件
      }
      
      // 右侧栏内容
      Column() {
        // 右侧组件
      }
    }
    .displayMode(NavigationDisplayMode.Auto) // 或明确指定Split
  }
}

关键点说明：

  1. 使用NavigationDisplayMode.Auto会根据设备尺寸自动切换单/双栏
  2. 也可以明确使用NavigationDisplayMode.Split强制双栏布局
  3. 确保在跳转时使用正确的路由方式

注意：实际效果还取决于设备屏幕尺寸，在大屏设备上Auto模式会自动呈现分栏效果。

回到顶部