HarmonyOS Navigation：解锁页面显示模式的奥秘_鸿蒙 navigationmode.stack-优快云博客

Navigation 组件的主要职责是实现页面之间的流畅导航，为用户带来极为友好的交互体验，让用户在不同视图间的切换轻松自如。打个比方，在一个内容丰富的资讯类应用中，用户可以借助 Navigation 组件，从新闻列表页面快速跳转到新闻详情页面；在购物类应用里，能从商品展示页面顺畅切换到商品详情、购物车以及支付等页面，一步一步完成购物流程。

而设置页面显示模式，无疑是 Navigation 组件的一项关键能力。不同的显示模式就像是为应用穿上了不同风格的外衣，能适配各种设备屏幕尺寸和用户使用场景，进而极大地提升用户体验。接下来，就让我们深入探索 HarmonyOS Navigation 设置页面显示模式的奥秘。

二、三种显示模式详解

（一）自适应模式（NavigationMode.Auto）

自适应模式堪称 HarmonyOS Navigation 组件的 “智能管家”，它是默认的显示模式，就像一位贴心的助手，能够根据页面宽度自动切换分栏或单栏模式，为用户带来最适宜的视觉体验。

在自适应模式下，当页面宽度大于等于一定阈值时，Navigation 组件便会自动采用分栏模式，将页面巧妙地划分为多个区域，让不同的内容模块得以同时展示。以华为平板为例，当使用自适应模式的应用在平板上运行时，若页面宽度充足，新闻类应用可能会在一侧展示新闻列表，另一侧展示新闻详情，用户无需频繁切换页面，就能轻松浏览感兴趣的内容，大大提高了信息获取的效率。

而当页面宽度小于这个阈值时，组件则会自动切换为单栏模式，让内容以简洁有序的方式依次呈现。在手机上浏览应用时，如果屏幕宽度较窄，自适应模式会将页面调整为单栏，确保用户能够专注于当前内容，避免信息过于繁杂造成的视觉干扰。

需要注意的是，在 API version 9 及以前，这个切换阈值为 520vp；从 API version 10 及以后，阈值变为 600vp 。这一调整充分考虑了不同版本系统下设备屏幕尺寸和用户使用习惯的变化，使得自适应模式能够更加精准地适配各种设备。

（二）单页面模式（NavigationMode.Stack）

若你希望将页面设置为单页面模式，只需将 mode 属性轻松设置为 NavigationMode.Stack，就能达成目的。在这种模式下，页面如同一个专注的讲述者，每次仅聚焦于一个单一的内容区域，其他内容则像被暂时存放在幕后，等待用户的进一步探索。

单页面模式特别适用于那些屏幕空间有限，或者需要用户高度集中注意力在单一内容上的场景。以手机端的便签应用为例，当用户打开便签撰写内容时，单页面模式能让整个屏幕都专注于便签的编辑区域，没有多余的干扰元素，用户可以心无旁骛地记录灵感、规划日程，尽情享受沉浸式的书写体验。又比如一些简单的小游戏应用，在手机上运行时采用单页面模式，能将游戏画面完整地展示在屏幕上，让玩家全身心地投入到游戏的乐趣中。

从优势方面来看，单页面模式的布局简洁明了，就像一本条理清晰的书籍，用户可以轻松理解页面的结构和信息层次。同时，它的操作也极为便捷，用户无需在多个分栏之间来回切换，减少了操作的复杂性，提升了使用效率。

下面是一段设置为单页面模式的代码示例，让我们更直观地感受它的实现方式：

@Entry

@Component

struct NavigationExample {

private arr: number[] = [1, 2, 3];

build() {

Column() {

Navigation() {

TextInput({ placeholder: 'search...' }).width("90%").height(40).backgroundColor('#FFFFFF')

List({ space: 12 }) {

ForEach(this.arr, (item) => {

ListItem() {

NavRouter() {

Text("NavRouter" + item).width("100%").height(72).backgroundColor('#FFFFFF').borderRadius(24).fontSize(16).fontWeight(500).textAlign(TextAlign.Center)

NavDestination() {

Text("NavDestinationContent" + item)

}.title("NavDestinationTitle" + item)

}

}, item => item)

}.width("90%").margin({ top: 12 })

}.title("主标题").mode(NavigationMode.Stack).menus([

{ value: "", icon: "./image/ic_public_search.svg", action: () => { } },<