HarmonyOS应用开发实战：猫猫大作战-Navigation 的 Split 分栏模式、单栏/分栏的自适应切换以及分栏场景下的页面栈管理

前言

在平板、折叠屏等大屏设备上，分栏布局可以充分利用屏幕空间，同时显示两层导航内容。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 导航