HarmonyOS7导航与标签页组合示例实战：NavRouter 与 Tabs 组合结构设计

文章目录前言真正值得先看的不是细节代码状态设计这里有点东西代码别平均看先抓关键方法第一段关键代码页面是怎么被带起来的第二段关键代码真正决定交互手感的地方不是只看最好按这个顺序动手拿去项目里之前我通常会做这些调整这页不复杂但很适合当模板完整代码收个尾前言底部标签和页面导航几乎是移动应用最常见的组合。难点不在组件会不会用而在层级关系怎么摆才不乱。这个案例拿来理解主导航和子导航的职责划分特别合适。 真到项目里很多问题都不是“会不会用组件”而是“这个组件放在当前页面里顺不顺手”。所以这篇不会只盯 API而是把页面结构、交互反馈和后续扩展一起看。如果把这页当成练习材料我会优先看它怎样围绕 NavRouter 与 Tabs 组合结构设计 组织页面。因为这一层想清楚了后面的代码基本就不会散。这类写法尤其适合落在 多 Tab 应用、内容平台、商城首页结构 这些场景里所以我下面不会只讲“组件怎么写”而是更关心“放进页面之后为什么这样组织”。真正值得先看的不是细节代码如果你已经打开运行效果会更容易理解这一段。因为这页并不是靠某一个孤立控件撑起来的而是几个区域互相配合才成立。页面区域主要职责在代码里的典型表现头部说明区交代当前案例在演示什么Text标题、补充说明、标签文案核心展示区承载组件能力的主要效果Column、Row、业务组件本体辅助信息区补充状态、标签、分组或统计信息次级文本、角标、分组标题、描述块交互入口区负责切换、返回、定位、选择等动作点击事件、按钮、索引条、导航入口这一页没有额外拆出接口页面更多是直接围绕基础数据和组件参数展开。如果你不是只想看懂而是准备拿去改这篇更关注哪些区域适合抽离、复用和替换。状态设计这里有点东西这里别把状态理解成“只是几个变量”。它其实是页面行为的总闸门。你后面要加功能、接接口、做联动第一步都是先想清楚这些字段。isShow建议优先确认它控制的是显示、选择、切换还是数据同步。showDetail建议优先确认它控制的是显示、选择、切换还是数据同步。currentTab建议优先确认它控制的是显示、选择、切换还是数据同步。tabBarIndex建议优先确认它控制的是显示、选择、切换还是数据同步。真要自己上手改我建议别一开始就扑到样式上先把状态分层这件事处理好长期数据列表内容、卡片信息、导航目标、角标基数这类不该跟着一次点击乱跳的内容。交互状态当前选中项、弹层开关、吸附开关、回显结果这类会频繁变化的值。计算结果过滤结果、统计文案、高亮判断这类更适合派生出来的内容。代码别平均看先抓关键方法如果你想更快进入状态可以把这些方法当成页面的控制台。哪个方法被触发页面就往哪个方向走。这个案例没有太多额外方法核心价值主要集中在页面结构和组件组合方式。我自己读这类方法时通常只抓一条线谁触发、谁被改、页面哪里立刻有反馈。把这三件事连起来很多交互代码一下就顺了。第一段关键代码页面是怎么被带起来的这一段建议慢一点看。它通常决定了页面初始状态也决定了后续哪些区域会跟着刷新。StateisShow:booleantrueStateshowDetail:booleanfalseStatecurrentTab:number0StatetabBarIndex:number0privatetabs:string[][首页,发现,消息,我的]build(){Column(){if(this.isShow){Column({space:12}){Text(NavRouter Tabs).fontSize(20).fontWeight(FontWeight.Bold).fontColor(DEMO_THEME_COLOR)Text(NavRouter 与 Tabs 组合实现 Tab 导航中的页面跳转).fontSize(13).fontColor(DEMO_SUBTEXT_COLOR).width(100%)// 模拟 Tab 导航Column(){// Tab 页面if(!this.showDetail){这一段我通常不会一下翻过去而是先确认下面这几个判断点State字段到底在控制显示、选择、跳转结果还是模式切换。默认值是不是合理页面一打开会不会就落在一个可理解的状态上。字段命名能不能让后来的人一眼看懂用途而不是还要翻半天 UI。第二段关键代码真正决定交互手感的地方这一段代码要按两条线看点击 Tab 时更新currentTab/tabBarIndex点击栏目内容时把showDetail置为true。前者改变当前栏目后者进入栏目内详情。真实 App 的首页、发现、消息页基本都离不开这种分层。.onClick((){this.showDetailtrue})})}elseif(this.currentTab1){ForEach([摄影,旅行,美食],(item:string,idx:number){Row({space:10}){Text([,✈,][idx]).fontSize(20)Column({space:2}){Text(item).fontSize(14).fontColor(#333333)Text(点击进入).fontSize(11).fontColor(DEMO_SUBTEXT_COLOR)}.alignItems(HorizontalAlign.Start).layoutWeight(1)Text().fontSize(13).fontColor(#CCCCCC)}.width(100%).padding(12).backgroundColor(DEMO_CARD_COLOR)代码读到这里我通常会顺手补三件事不然后面很容易只看热闹这个交互入口接收的到底是什么输入。输入进来之后代码改了哪个状态或者触发了哪次导航。变化发生后用户最先感知到的反馈会落在哪个区域。这三个问题串起来之后这一页基本就不只是“看过”而是真的读懂了。不是只看最好按这个顺序动手我比较推荐用“观察 - 触发 - 对照源码”的方式学这个页面。先看到效果再回去找原因记得会更牢。先进入页面确认首屏是不是把导航与标签页组合示例的主题交代清楚。盯住核心展示区观察默认状态下最醒目的内容是什么。主动触发一次关键交互比如点击、滑动、跳转、返回、切换或者选择。回头检查状态区、提示区、标题区或者附属信息有没有跟着变化。最后再打开源码对照刚才那次交互把状态变化链路串起来。如果这五步你能边操作边说清楚页面发生了什么后面再换成自己的数据和交互心里会稳很多。拿去项目里之前我通常会做这些调整如果只把这页当 demo 看它的价值其实只发挥了一半。更值得做的是顺手想一遍放进项目之后哪里该抽哪里该换哪里该收口。导航类页面迁到业务里时最先要补的是参数类型和返回结果约定而不是视觉样式。如果页面层级开始变多建议尽早把跳转入口、回退逻辑和标题栏动作拆成清晰边界。只要页面里有重复块就别硬撑着手写到底早点抽成小组件后面改样式和改交互都会轻松很多。示例数据最好和布局代码分开放不然后面一接接口页面文件很容易立刻变臃肿。这页不复杂但很适合当模板如果你经常做业务页会发现这种案例特别适合复用思路。它不像单纯 API 示例那样看完就过去。页面结构比较稳后续不管是换数据还是换皮肤成本都不会特别高。状态数量总体可控适合拿来练“一个页面里如何分配职责”这件事。组件参数和页面目标之间关系比较直观不太会出现“能跑但看不懂为什么这么配”的情况。完整代码下面保留整理过命名的完整 ArkTS 代码方便你直接对照学习。这里已经去掉原始的 Demo 命名改成了更贴近当前案例语义的名称。/** * 导航与标签页组合示例 */import{PRESET_COLORS,generateListItems,DEMO_BG_COLOR,DEMO_CARD_COLOR,DEMO_THEME_COLOR,DEMO_SUBTEXT_COLOR}from./typesEntryComponentstruct NavrouterTabsComposition{StateisShow:booleantrueStateshowDetail:booleanfalseStatecurrentTab:number0StatetabBarIndex:number0privatetabs:string[][首页,发现,消息,我的]build(){Column(){if(this.isShow){Column({space:12}){Text(NavRouter Tabs).fontSize(20).fontWeight(FontWeight.Bold).fontColor(DEMO_THEME_COLOR)Text(NavRouter 与 Tabs 组合实现 Tab 导航中的页面跳转).fontSize(13).fontColor(DEMO_SUBTEXT_COLOR).width(100%)// 模拟 Tab 导航Column(){// Tab 页面if(!this.showDetail){Column(){// 顶部内容区Column({space:12}){Text(当前 Tab: this.tabs[this.currentTab]).fontSize(16).fontWeight(FontWeight.Bold).fontColor(DEMO_THEME_COLOR)// 每个Tab的内容列表if(this.currentTab0){ForEach([推荐文章,热门话题,最新动态],(item:string,idx:number){Row({space:10}){Text([,,][idx]).fontSize(20)Column({space:2}){Text(item).fontSize(14).fontColor(#333333)Text(点击查看详情).fontSize(11).fontColor(DEMO_SUBTEXT_COLOR)}.alignItems(HorizontalAlign.Start).layoutWeight(1)Text().fontSize(13).fontColor(#CCCCCC)}.width(100%).padding(12).backgroundColor(DEMO_CARD_COLOR).borderRadius(8).onClick((){this.showDetailtrue})})}elseif(this.currentTab1){ForEach([摄影,旅行,美食],(item:string,idx:number){Row({space:10}){Text([,✈,][idx]).fontSize(20)Column({space:2}){Text(item).fontSize(14).fontColor(#333333)Text(点击进入).fontSize(11).fontColor(DEMO_SUBTEXT_COLOR)}.alignItems(HorizontalAlign.Start).layoutWeight(1)Text().fontSize(13).fontColor(#CCCCCC)}.width(100%).padding(12).backgroundColor(DEMO_CARD_COLOR).borderRadius(8).onClick((){this.showDetailtrue})})}elseif(this.currentTab2){ForEach([消息1,消息2],(item:string){Row({space:10}){Text().fontSize(20)Text(item).fontSize(14).fontColor(#333333).layoutWeight(1)Text().fontSize(13).fontColor(#CCCCCC)}.width(100%).padding(12).backgroundColor(DEMO_CARD_COLOR).borderRadius(8).onClick((){this.showDetailtrue})})}else{Text(个人中心).fontSize(14).fontColor(DEMO_SUBTEXT_COLOR).width(100%).textAlign(TextAlign.Center).padding(20)}}.layoutWeight(1).width(100%)// 底部 TabBarRow(){ForEach(this.tabs,(tab:string,index:number){Column({space:2}){Text([,,,][index]).fontSize(20).fontColor(this.currentTabindex?DEMO_THEME_COLOR:#999999)Text(tab).fontSize(10).fontColor(this.currentTabindex?DEMO_THEME_COLOR:#999999)}.layoutWeight(1).alignItems(HorizontalAlign.Center).padding({top:6,bottom:6}).onClick((){this.currentTabindex})})}.width(100%).backgroundColor(#FFFFFF).borderRadius({topLeft:12,topRight:12}).shadow({radius:4,color:#00000010,offsetY:-2})}.width(100%).height(280).backgroundColor(#FAFAFA).borderRadius(12)}else{// NavDestinationColumn({space:12}){Row(){Text(← 返回).fontSize(14).fontColor(DEMO_THEME_COLOR).onClick((){this.showDetailfalse})Blank()Text(详情页).fontSize(14).fontColor(#333333)}.width(100%)Text(从 Tab: this.tabs[this.currentTab] 跳转而来).fontSize(16).fontWeight(FontWeight.Bold).fontColor(DEMO_THEME_COLOR)Text(NavRouter 覆盖在 Tabs 之上).fontSize(13).fontColor(DEMO_SUBTEXT_COLOR)Button(返回 Tab).fontSize(14).height(40).backgroundColor(DEMO_THEME_COLOR).fontColor(#FFFFFF).borderRadius(20).onClick((){this.showDetailfalse})}.padding(24).width(100%).height(280).backgroundColor(DEMO_CARD_COLOR).borderRadius(12).justifyContent(FlexAlign.Center)}}.width(100%).padding(16).backgroundColor(DEMO_CARD_COLOR).borderRadius(12)// 说明Row({space:6}){Text(提示).fontSize(11).fontWeight(FontWeight.Bold).fontColor(#FF6B35)Text(NavRouter 跳转会覆盖 Tabs 显示返回时恢复 Tab 页面).fontSize(11).fontColor(DEMO_SUBTEXT_COLOR).layoutWeight(1)}.width(100%).padding(10).backgroundColor(#FFF8E1).borderRadius(8)}.alignItems(HorizontalAlign.Start)}Text(导航与标签页组合示例 - NavRouter Tabs).fontSize(12).fontColor(#999999).margin({top:12})}.width(100%).height(100%).backgroundColor(DEMO_BG_COLOR).padding(16)}}收个尾看完这一页如果你能说清楚它的结构、状态和交互分别承担什么职责那它的核心价值你基本就拿到了。后面无非就是换成你自己的数据和页面语义。