前言

在平板、折叠屏等大屏设备上，分栏布局可以充分利用屏幕空间，同时显示两层导航内容。HarmonyOS 的 Navigation 组件支持 Split 分栏模式——当 Navigation 容器宽度 ≥ 600vp 时，自动切换为 NavBar + NavDestination 左右双栏显示。

本文以「猫猫大作战」在平板上的导航优化为锚点，讲解 Navigation 的 Split 分栏模式、单栏/分栏的自适应切换以及分栏场景下的页面栈管理。

提示：本系列不讲 ArkTS 基础语法与环境搭建，假设你已跟完第 1–87 篇。本篇是阶段三第 88 篇。

一、Split 分栏模式

1.1 布局变化

单栏模式（< 600vp）         分栏模式（≥ 600vp）
┌─────────────┐         ┌──────────┬──────────┐
│  导航页面    │         │ MainMenu │ GameList │
│  ┌───────┐  │         │ ┌─────┐  │ ┌──────┐  │
│  │  主页  │  │         │ │ 主页│  │ │详情  │  │
│  └───────┘  │         │ └─────┘  │ └──────┘  │
│             │         │          │          │
│  pushPath → │         │ ┌─────┐  │ ┌──────┐  │
│  ┌───────┐  │         │ │列表 │  │ │详情2 │  │
│  │  详情  │  │         │ └─────┘  │ └──────┘  │
│  └───────┘  │         │          │          │
└─────────────┘         └──────────┴──────────┘
    手机模式                  平板模式

1.2 启用分栏

Navigation(this.navStack) {
  this.MainMenu()
}
.navDestination(this.pageBuilder)
.mode(NavigationMode.Split)               // 启用分栏模式

二、分栏模式下的布局

2.1 NavBar 宽度控制

Navigation(this.navStack) {
  this.MainMenu()
}
.mode(NavigationMode.Split)
.navBarWidth(320)                    // NavBar 宽度（vp）
.minNavBarWidth(280)                 // 最小宽度
.maxNavBarWidth(400)                 // 最大宽度

2.2 NavBar 位置

Navigation(this.navStack) {
  this.MainMenu()
}
.mode(NavigationMode.Split)
.navBarPosition(NavBarPosition.LEFT)  // NavBar 在左（默认）
// .navBarPosition(NavBarPosition.RIGHT) // NavBar 在右

三、分栏与页面栈

3.1 分栏下的栈行为

// 手机模式：pushPath 全屏替换
navStack.pushPath({ name: 'pages/Detail' });
// → 全屏显示 Detail

// 平板模式：pushPath 在右侧分栏显示
navStack.pushPath({ name: 'pages/Detail' });
// → 左侧 NavBar + 右侧 Detail

四、自适应切换

Navigation(this.navStack) {
  this.MainMenu()
}
.mode(NavigationMode.Auto)            // 自动模式
.navBarWidth(320)

五、总结

Split 分栏模式利用了大屏设备的宽度优势，实现导航层级并列显示。通过 Auto 模式可以实现从手机到平板的平滑适配。

核心要点：

• Split 模式：宽度 ≥ 600vp 时激活双栏
• navBarWidth/navBarPosition 控制 NavBar 显示
• Auto 模式自动根据设备宽度切换

下一篇预告：第 89 篇将深入 Tabs 底部导航——主页/我的等多 Tab 页面的实现。

如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！

相关资源：

• Split 分栏模式文档
• Navigation 架构
• 开源鸿蒙跨平台社区
• 第 87 篇：路由拦截
• 第 89 篇：Tabs 导航