前言在平板、折叠屏等大屏设备上分栏布局可以充分利用屏幕空间同时显示两层导航内容。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) // 启用分栏模式NavigationMode说明适用场景Stack单栏模式默认手机Split分栏模式平板、折叠屏Auto自动根据宽度选择自适应二、分栏模式下的布局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 导航
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) // 启用分栏模式NavigationMode说明适用场景Stack单栏模式默认手机Split分栏模式平板、折叠屏Auto自动根据宽度选择自适应二、分栏模式下的布局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 导航
