阅读时长约 18 分钟 | 难度★★★★☆ | 篇章第 3 篇 · 首页与功能导航 对应源码entry/src/main/ets/pages/HomePage.ets中的BottomNavBarBuilder前言底部导航栏的“选中态“是用户交互反馈的核心。玄象项目首页底部导航栏通过State currentTab变量记录当前选中标签通过三元表达式index this.currentTab ? Colors.PRIMARY_GOLD : Colors.TEXT_DIM实时切换图标与文字颜色。本篇将深入剖析玄象项目选中态切换的实现细节从State currentTab状态定义、三元表达式条件渲染、点击事件处理、TabItem图标着色到onPageShow页面重新可见时的状态同步。掌握这套选中态切换方法论您就能为任何 HarmonyOS 应用打造交互反馈精准的导航组件。提示选中态切换是 ArkUI 响应式编程的典型应用——State状态变化自动触发 UI 更新。一、选中态切换完整源码1.1 底部导航栏 BuilderBuilder BottomNavBar() { Row() { this.TabItem(, 首页, 0) this.TabItem(, 探索, 1) this.TabItem(, 我的, 2) } .width(100%) .height(60) .backgroundColor(Colors.BG_CARD) .border({ width: { top: 1 }, color: Colors.BG_CARD_BORDER }) } Builder TabItem(icon: string, name: string, index: number) { Column({ space: 4 }) { Text(icon) .fontSize(22) .fontColor(index this.currentTab ? Colors.PRIMARY_GOLD : Colors.TEXT_DIM) Text(name) .fontSize(11) .fontColor(index this.currentTab ? Colors.PRIMARY_GOLD : Colors.TEXT_DIM) } .layoutWeight(1) .height(56) .justifyContent(FlexAlign.Center) .onClick(() { this.currentTab index; if (index 2) { router.pushUrl({ url: pages/profile/ProfilePage }); } }) }1.2 状态变量定义State currentTab: number 0;玄象项目用currentTab记录当前选中标签索引0表示首页。二、State currentTab 响应式状态2.1 状态定义State currentTab: number 0;2.2 状态变更触发 UI 更新用户点击 Tab (index) ↓ State currentTab index ↓ ArkUI 监听状态变化 ↓ 重新渲染引用该状态的 UI ↓ TabItem 颜色切换2.3 初始值 0 的意义玄象项目currentTab 0表示首页默认选中。三、三元表达式条件渲染3.1 颜色切换逻辑.fontColor(index this.currentTab ? Colors.PRIMARY_GOLD : Colors.TEXT_DIM)3.2 执行流程index this.currentTab ? ├─ true → Colors.PRIMARY_GOLD金色选中态 └─ false → Colors.TEXT_DIM灰色未选中态3.3 三元表达式在 ArkUI 中的优势优势说明内联简洁无需额外 if-else 分支响应式State 变化自动触发重新计算可读性语义清晰、一目了然四、TabItem 图标着色4.1 图标与文字颜色一致性玄象项目图标和文字使用相同颜色逻辑元素选中颜色未选中颜色图标Colors.PRIMARY_GOLDColors.TEXT_DIM文字Colors.PRIMARY_GOLDColors.TEXT_DIM4.2 颜色一致性设计图标与文字颜色一致确保视觉统一选中态[] 首页 ← 金色图标 金色文字 未选中态[] 探索 ← 灰色图标 灰色文字五、onClick 事件处理5.1 点击切换逻辑.onClick(() { this.currentTab index; if (index 2) { router.pushUrl({ url: pages/profile/ProfilePage }); } })5.2 点击行为点击 TabcurrentTab跳转行为首页index00不跳转已在首页探索index11不跳转暂未实现我的index22pushUrl跳转5.3 特殊处理我的 Tab玄象项目“我的“Tab 点击后跳转到个人中心页因为当前只有首页页面其他 Tab 尚未实现独立页面。六、layoutWeight 等分布局6.1 layoutWeight 配置.layoutWeight(1)每个TabItem设置为layoutWeight(1)三个 Tab 等分导航栏宽度┌──────────┬──────────┬──────────┐ │ layout │ layout │ layout │ │ Weight 1│ Weight 1│ Weight 1│ └──────────┴──────────┴──────────┘6.2 计算公式导航栏宽度 屏幕宽度 每个 Tab 宽度 屏幕宽度 / 3七、选中态切换的扩展7.1 选中下划线Column({ space: 4 }) { Text(icon) ... Text(name) ... if (index this.currentTab) { Divider() .width(50%) .color(Colors.PRIMARY_GOLD) .strokeWidth(2) } }7.2 选中背景色Column({ space: 4 }) .backgroundColor(index this.currentTab ? #333D4A843 : Colors.TRANSPARENT) .borderRadius(8)7.3 选中缩放动画Text(icon) .fontSize(index this.currentTab ? 26 : 22) .animation({ duration: 200, curve: Curve.EaseOut })八、onPageShow 页面重新可见时的状态同步8.1 onPageShow 生命周期Entry Component struct HomePage { State currentTab: number 0; onPageShow(): void { // 从其他页面返回时确保状态同步 this.currentTab 0; } }8.2 状态同步场景用户从个人中心返回首页 ↓ HomePage.onPageShow 触发 ↓ currentTab 0 ← 重置为首页选中 ↓ UI 更新首页 Tab 高亮九、State 与 Prop 的对比9.1 玄象项目中 State 的使用变量State作用域currentTab✓仅在 HomePage 内使用todayGanZhi✓仅在 HomePage 内使用yiItems/jiItems✓仅在 HomePage 内使用9.2 与 Prop 的对比维度StateProp所有权组件内部从父组件传入修改可修改不可修改触发修改触发 UI 更新父组件修改触发更新十、玄象项目选中态设计原则10.1 响应式玄象项目选中态通过State响应式状态实现状态变更自动触发 UI 更新。10.2 一致性选中态颜色、字体效果保持一致确保用户可预测交互反馈。10.3 即时性点击 Tab 立即切换选中态无延迟。九、选中态切换的进阶技巧9.1 选中态动画过渡玄象项目当前选中态切换是“瞬间切换“可加入动画过渡增强体验Text(icon) .fontSize(index this.currentTab ? 26 : 22) .animation({ duration: 200, curve: Curve.EaseOut })9.2 选中态背景色过渡元素选中态未选中态过渡方式图标颜色PRIMARY_GOLDTEXT_DIM瞬间切换文字颜色PRIMARY_GOLDTEXT_DIM瞬间切换背景色#1A2030transparent瞬间切换图标大小26vp22vpanimation 动画9.3 使用 Tabs 组件替代底部导航ArkUI 内置的Tabs组件天然支持选中态切换动画Tabs() { TabContent() { HomePage() }.tabBar( 首页) TabContent() { ExplorePage() }.tabBar( 探索) TabContent() { ProfilePage() }.tabBar( 我的) } .barMode(BarMode.Fixed) .onChange((index: number) { // Tab 切换回调 })十、选中态设计的用户体验原则10.1 即时反馈原则用户点击 Tab 后应在 100ms 内给出视觉反馈。玄象项目通过State状态变更实现即时响应。10.2 一致性原则所有 Tab 的选中态样式一致金色图标 金色文字 深色背景。10.3 可见性原则当前选中 Tab 的视觉权重应显著高于未选中 Tab帮助用户明确当前位置。十一、玄象项目选中态切换与路由的协同11.1 选中态与路由同步.onClick(() { this.currentTab index; const pages [pages/HomePage, pages/ExplorePage, pages/profile/ProfilePage]; if (index ! 0) { router.pushUrl({ url: pages[index] }); } })提示当用户从其他页面返回首页时onPageShow中重置currentTab 0确保首页 Tab 高亮。11.2 选中态切换的单元测试选中态切换是玄象项目的核心交互逻辑建议编写单元测试覆盖describe(BottomNavBarTest, () { it(should switch to tab 2 when clicked, 0, () { // 模拟点击我的Tab // 验证 currentTab 2 // 验证图标颜色切换至金色 }); it(should reset to tab 0 on page show, 0, () { // 模拟 onPageShow 触发 // 验证 currentTab 0 }); });总结第 3 篇章“首页与功能导航“共 10 篇全面覆盖了玄象项目首页的实现篇号主题核心技术21顶部标题栏Row Blank 三段式22“今日天地“卡片border shadow borderRadius23五行环绕太极Stack position 三角函数24宜忌标签云ForEach padding borderRadius25九宫格功能入口Grid columnsTemplate26router.pushUrl 路由跳转main_pages.json 路由表27底部导航栏BottomTabBar 组件28Scroll 弹性滚动layoutWeight scrollBar29干支计算接入LunarCalendar HeavenlyStems30选中态切换State 三元表达式11.2 第 4 篇章预告第 4 篇章“二十八星宿模块“将从《31 · MansionData.ets 数据建模》开始深入玄象项目星宿模块的实现细节。总结本篇以玄象项目首页底部导航栏选中态切换为蓝本深入剖析了 ArkUI 选中态交互的实现从State currentTab响应式状态、三元表达式条件渲染、图标着色、onClick事件处理到layoutWeight等分布局与onPageShow状态同步。掌握这套选中态切换方法论您就能为任何 HarmonyOS 应用打造交互反馈精准的导航组件。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源HarmonyOS 官方文档State 装饰器HarmonyOS 官方文档条件渲染HarmonyOS 官方文档onPageShow 生命周期开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net选中态切换是 ArkUI 响应式编程的典型应用。通过State状态变更驱动 UI 更新实现即时交互反馈。掌握这一模式您就能构建任何类型的选中态交互组件。十二、本篇章总结12.1 第 3 篇章总结第 3 篇章“首页与功能导航“共 10 篇全面覆盖了玄象项目首页的全部实现细节。从顶部标题栏的 Row Blank 三段式布局、“今日天地“金边卡片的 border shadow borderRadius 样式、五行环绕太极的三角函数定位算法到九宫格功能入口的 Grid 布局、router.pushUrl 路由跳转、底部导航栏 BottomTabBar 封装以及 Scroll layoutWeight 弹性滚动布局、LunarCalendar 干支数据接入和 State currentTab 选中态切换。每一篇都基于真实源码配有完整的代码示例和详尽的技术解析。