HarmonyOS7综合导航示例实战：导航能力整合与多页面交互协作

前言

如果前面的导航示例是在拆零件，这个综合案例就是把零件重新装回去。真正的项目不会只用一种导航能力，它往往是跳转、传参、返回、标题栏和转场一起工作。 我一直觉得，好示例不一定代码多，但一定能把“为什么要这么写”交代清楚。综合导航示例 这个页面就属于这种，值得停下来认真拆一遍。

综合导航示例 这一页真正有意思的地方，不是把效果堆出来，而是它把 导航能力整合与多页面交互协作 这件事说得比较落地。我会把它当成真实业务页面来拆，重点看哪些写法可以直接迁到项目里，哪些只是示例环境下的轻量实现。

这类写法尤其适合落在 完整应用骨架、教学演示项目、导航专题案例 这些场景里，所以我下面不会只讲“组件怎么写”，而是更关心“放进页面之后为什么这样组织”。

这页的阅读顺序我建议这样走

很多人学示例会直接复制 UI 代码，结果复刻出来是像的，但后面一改就散。原因通常不是代码抄错了，而是结构关系没先看懂。

页面里额外定义的数据模型包括：AppPage。如果后面准备接接口，我更建议把这些类型继续收口成更直白的业务命名。

我会把它当成真实业务页面来拆，重点看哪些写法可以直接迁到项目里，哪些只是示例环境下的轻量实现。

先把谁在驱动页面这件事搞清楚

如果一个示例后续不好改，十有八九不是布局有问题，而是状态职责没分开。这个案例刚好适合拿来观察这件事。

• isShow：建议优先确认它控制的是显示、选择、切换还是数据同步。
• currentTab：建议优先确认它控制的是显示、选择、切换还是数据同步。
• navStack：建议优先确认它控制的是显示、选择、切换还是数据同步。
• currentDest：建议优先确认它控制的是显示、选择、切换还是数据同步。
• logMessages：建议优先确认它控制的是显示、选择、切换还是数据同步。

真要自己上手改，我建议别一开始就扑到样式上，先把状态分层这件事处理好：

• 长期数据：列表内容、卡片信息、导航目标、角标基数这类不该跟着一次点击乱跳的内容。
• 交互状态：当前选中项、弹层开关、吸附开关、回显结果这类会频繁变化的值。
• 计算结果：过滤结果、统计文案、高亮判断这类更适合派生出来的内容。

我会优先读的就是这几段逻辑

示例代码里最怕被忽略的，就是那些看起来普通、实际上掌控页面节奏的方法。这里建议优先把它们摸清。

• navigateTo：读它时重点看输入、改动对象，以及它最终影响了页面哪一块。
• navigateBack：读它时重点看输入、改动对象，以及它最终影响了页面哪一块。
• getCurrentPages：读它时重点看输入、改动对象，以及它最终影响了页面哪一块。

我自己读这类方法时，通常只抓一条线：谁触发、谁被改、页面哪里立刻有反馈。把这三件事连起来，很多交互代码一下就顺了。

第一段关键代码：页面是怎么被带起来的

这一段建议慢一点看。它通常决定了页面初始状态，也决定了后续哪些区域会跟着刷新。

@StateisShow:boolean=true@StatecurrentTab:number=0@StatenavStack:string[]=['首页']@StatecurrentDest:string=''@StatelogMessages:string[]=['应用已启动']privatetabs:string[]=['首页','服务','我的']privatehomePages:AppPage[]=[{title:'新闻资讯',icon:'📰',color:DEMO_THEME_COLOR,dest:'新闻详情页'},{title:'产品介绍',icon:'📦',color:PRESET_COLORS[0].value,dest:'产品详情页'},{title:'技术文档',icon:'📚',color:PRESET_COLORS[1].value,dest:'文档页'},]privateservicePages:AppPage[]=[{title:'在线客服',icon:'💬',color:PRESET_COLORS[2].value,dest:'聊天页'},{title:'帮助中心',icon:'❓',color:'#9C27B0',dest:'帮助页'},]privatemyPages:AppPage[]=[{title:'个人资料',icon:'👤',color:'#FF9800',dest:'资料编辑页'},{title:'系统设置',icon:'⚙',color:'#607D8B',dest:'设置页'},]navigateTo(dest:string){this.navStack.push(dest)this.currentDest=dest

这一段我通常不会一下翻过去，而是先确认下面这几个判断点：

• @State字段到底在控制显示、选择、跳转结果还是模式切换。
• 默认值是不是合理，页面一打开会不会就落在一个可理解的状态上。
• 字段命名能不能让后来的人一眼看懂用途，而不是还要翻半天 UI。

第二段关键代码：真正决定交互手感的地方

这一段核心在三个方法：navigateTo负责入栈并记录目标页，navigateBack负责出栈并写日志，getCurrentPages根据currentTab返回当前栏目可展示的入口。它把 Tab、页面栈和操作日志串到一起，已经接近真实应用的导航骨架。

navigateTo(dest:string){this.navStack.push(dest)this.currentDest=destthis.logMessages.push('导航 → '+dest+' (栈深: '+this.navStack.length+')')}navigateBack(){if(this.navStack.length>1){constpopped=this.navStack.pop()this.currentDest=''this.logMessages.push('返回 ← '+popped+' (栈深: '+this.navStack.length+')')}}getCurrentPages():AppPage[]{if(this.currentTab===0)returnthis.homePagesif(this.currentTab===1)returnthis.servicePagesreturnthis.myPages}build(){Column(){if(this.isShow){Column({space:10}){

代码读到这里，我通常会顺手补三件事，不然后面很容易只看热闹：

1. 这个交互入口接收的到底是什么输入。
2. 输入进来之后，代码改了哪个状态，或者触发了哪次导航。
3. 变化发生后，用户最先感知到的反馈会落在哪个区域。

这三个问题串起来之后，这一页基本就不只是“看过”，而是真的读懂了。

真要学会用，自己过一遍这条操作线

第一次接触这个案例时，不要急着扩展功能。先把默认状态和一次完整交互跑顺，后面加东西才不会歪。

1. 先进入页面，确认首屏是不是把综合导航示例的主题交代清楚。
2. 盯住核心展示区，观察默认状态下最醒目的内容是什么。
3. 主动触发一次关键交互，比如点击、滑动、跳转、返回、切换或者选择。
4. 回头检查状态区、提示区、标题区或者附属信息有没有跟着变化。
5. 最后再打开源码，对照刚才那次交互，把状态变化链路串起来。

如果这五步你能边操作边说清楚页面发生了什么，后面再换成自己的数据和交互，心里会稳很多。

直接照搬不够，最好再补这几刀

我自己迁示例代码时，最怕的是把展示逻辑和业务逻辑粘成一团。这个案例里有些地方可以提前规避。

• 导航类页面迁到业务里时，最先要补的是参数类型和返回结果约定，而不是视觉样式。
• 如果页面层级开始变多，建议尽早把跳转入口、回退逻辑和标题栏动作拆成清晰边界。
• 只要页面里有重复块，就别硬撑着手写到底；早点抽成小组件，后面改样式和改交互都会轻松很多。
• 示例数据最好和布局代码分开放，不然后面一接接口，页面文件很容易立刻变臃肿。

我觉得它真正有价值的地方在这

我会把这类案例当成“工程感比炫技感更强”的材料来留存。后面真的要做同类页面时，能少走不少弯路。

• 页面结构比较稳，后续不管是换数据还是换皮肤，成本都不会特别高。
• 状态数量总体可控，适合拿来练“一个页面里如何分配职责”这件事。
• 组件参数和页面目标之间关系比较直观，不太会出现“能跑但看不懂为什么这么配”的情况。

完整代码

下面保留整理过命名的完整 ArkTS 代码，方便你直接对照学习。这里已经去掉原始的 Demo 命名，改成了更贴近当前案例语义的名称。

/** * 综合导航示例 */import{PRESET_COLORS,generateListItems,DEMO_BG_COLOR,DEMO_CARD_COLOR,DEMO_THEME_COLOR,DEMO_SUBTEXT_COLOR}from'./types'interfaceAppPage{title:stringicon:stringcolor:stringdest:string}@Entry@Componentstruct NavigationSystemShowcase{@StateisShow:boolean=true@StatecurrentTab:number=0@StatenavStack:string[]=['首页']@StatecurrentDest:string=''@StatelogMessages:string[]=['应用已启动']privatetabs:string[]=['首页','服务','我的']privatehomePages:AppPage[]=[{title:'新闻资讯',icon:'📰',color:DEMO_THEME_COLOR,dest:'新闻详情页'},{title:'产品介绍',icon:'📦',color:PRESET_COLORS[0].value,dest:'产品详情页'},{title:'技术文档',icon:'📚',color:PRESET_COLORS[1].value,dest:'文档页'},]privateservicePages:AppPage[]=[{title:'在线客服',icon:'💬',color:PRESET_COLORS[2].value,dest:'聊天页'},{title:'帮助中心',icon:'❓',color:'#9C27B0',dest:'帮助页'},]privatemyPages:AppPage[]=[{title:'个人资料',icon:'👤',color:'#FF9800',dest:'资料编辑页'},{title:'系统设置',icon:'⚙',color:'#607D8B',dest:'设置页'},]navigateTo(dest:string){this.navStack.push(dest)this.currentDest=destthis.logMessages.push('导航 → '+dest+' (栈深: '+this.navStack.length+')')}navigateBack(){if(this.navStack.length>1){constpopped=this.navStack.pop()this.currentDest=''this.logMessages.push('返回 ← '+popped+' (栈深: '+this.navStack.length+')')}}getCurrentPages():AppPage[]{if(this.currentTab===0)returnthis.homePagesif(this.currentTab===1)returnthis.servicePagesreturnthis.myPages}build(){Column(){if(this.isShow){Column({space:10}){// 导航栏Row(){Text('综合导航').fontSize(18).fontWeight(FontWeight.Bold).fontColor('#333333').layoutWeight(1)Text('栈: '+this.navStack.length).fontSize(12).fontColor('#FFFFFF').backgroundColor(DEMO_THEME_COLOR).padding({left:8,right:8,top:3,bottom:3}).borderRadius(8)}.width('100%')if(!this.currentDest){// Tab 导航Column(){// Tab 内容Column({space:8}){ForEach(this.getCurrentPages(),(page:AppPage)=>{Row({space:12}){Text(page.icon).fontSize(22).width(44).height(44).textAlign(TextAlign.Center).backgroundColor(page.color).borderRadius(10)Column({space:2}){Text(page.title).fontSize(14).fontWeight(FontWeight.Medium).fontColor('#333333')Text('点击进入').fontSize(11).fontColor(DEMO_SUBTEXT_COLOR)}.alignItems(HorizontalAlign.Start).layoutWeight(1)Text('>').fontSize(13).fontColor('#CCCCCC')}.width('100%').padding(10).backgroundColor(DEMO_CARD_COLOR).borderRadius(8).onClick(()=>{this.navigateTo(page.dest)})})}.layoutWeight(1).width('100%')// TabBarRow(){ForEach(this.tabs,(tab:string,index:number)=>{Column({space:2}){Text(['🏠','🔧','👤'][index]).fontSize(18).fontColor(this.currentTab===index?DEMO_THEME_COLOR:'#999999')Text(tab).fontSize(10).fontColor(this.currentTab===index?DEMO_THEME_COLOR:'#999999')}.layoutWeight(1).alignItems(HorizontalAlign.Center).padding({top:4,bottom:4}).onClick(()=>{this.currentTab=index})})}.width('100%').backgroundColor('#FFFFFF').borderRadius({topLeft:8,topRight:8})}.width('100%').height(200).backgroundColor('#FAFAFA').borderRadius(10)}else{// NavDestinationColumn({space:12}){Row(){Text('← 返回').fontSize(14).fontColor(DEMO_THEME_COLOR).onClick(()=>{this.navigateBack()})Blank()Text(this.currentDest).fontSize(14).fontColor('#333333')}.width('100%')Column({space:10}){Text('📍 '+this.currentDest).fontSize(18).fontWeight(FontWeight.Bold).fontColor(DEMO_THEME_COLOR)Text('来自 Tab: '+this.tabs[this.currentTab]).fontSize(13).fontColor(DEMO_SUBTEXT_COLOR)Text('导航栈深度: '+this.navStack.length).fontSize(12).fontColor('#999999')Button('继续跳转 (嵌套)').fontSize(13).height(38).width('100%').backgroundColor(PRESET_COLORS[0].value).fontColor('#FFFFFF').borderRadius(19).onClick(()=>{this.navigateTo('子页面'+(this.navStack.length+1))})Button('返回上一页').fontSize(13).height(38).width('100%').backgroundColor(DEMO_THEME_COLOR).fontColor('#FFFFFF').borderRadius(19).onClick(()=>{this.navigateBack()})Button('回到首页 (清空栈)').fontSize(13).height(38).width('100%').backgroundColor('#EEEEEE').fontColor('#666666').borderRadius(19).onClick(()=>{this.navStack=['首页']this.currentDest=''this.logMessages.push('清空导航栈，回到首页')})}.padding(16).width('100%').backgroundColor(DEMO_CARD_COLOR).borderRadius(10)}.width('100%')}// 导航日志Column({space:4}){Text('导航日志').fontSize(12).fontWeight(FontWeight.Medium).fontColor('#333333').width('100%')ForEach(this.logMessages.slice(-4),(msg:string)=>{Text(msg).fontSize(10).fontColor('#666666').width('100%')})}.width('100%').padding(10).backgroundColor('#FAFAFA').borderRadius(8)}.alignItems(HorizontalAlign.Start)}Text('综合导航示例 - 综合导航示例').fontSize(12).fontColor('#999999').margin({top:12})}.width('100%').height('100%').backgroundColor(DEMO_BG_COLOR).padding(16)}}

收个尾

这个案例没有故意炫技，反而因此更适合学习。页面目标清楚、代码组织也相对直接，拿来练手或者做项目骨架都不亏。