【听见课堂 HarmonyOS NEXT 实战系列 55】手机底栏与大屏侧栏如何共享一套路由
听见课堂有隐私、首页、课程编辑、实时课堂、扫描、OCR、回顾、任务确认、任务中心、历史、设置和状态画廊等页面。如果手机底栏和大屏侧栏各维护一套字符串,选中态、返回路径和页面标题很快会分叉。项目用集中 RouteId 作为共同语义,再让两种导航壳选择不同入口密度。

一、路由标识不能等同于显示文案
RouteId.HOME、RouteId.LIVE_CLASS 和 RouteId.TASK_CENTER 是稳定 key,中文标题来自 PAGE_META。未来把“回顾”改成“复盘”时,只调整显示文案,不应改变持久化的最近页面值。
稳定 key 也让选中态、无障碍说明和页面分发共享同一判断。
二、手机底栏只保留五个最高频入口
bottomNavigation() 固定组合首页、课堂、回顾、任务和设置。其他页面通过这些主入口内的动作到达,避免把 12 个页面全部塞进狭窄底栏。
this.bottomNavButton('首页', RouteId.HOME)
this.bottomNavButton('课堂', RouteId.LIVE_CLASS)
this.bottomNavButton('回顾', RouteId.REVIEW)
this.bottomNavButton('任务', RouteId.TASK_CENTER)
this.bottomNavButton('设置', RouteId.SETTINGS)
三、大屏侧栏可以暴露更完整的信息架构
大屏有 248vp 侧栏宽度,能容纳更多页面名与分组。它仍使用同一个 currentPage 和 navigate(route),因此不是另一套应用,只是更高信息密度的导航呈现。
共享路由让用户从侧栏进入任务确认或历史时,页面标题和业务数据继续沿用同一实现。
四、选中态来自 currentPage
底栏图标根据 this.currentPage === route 选择普通或 selected 资源;按钮同时改变文字颜色和指示条。状态不只靠颜色,还通过图形与语义表达。
accessibilityText 会追加“当前页面”,使辅助技术能够知道哪个入口已选中。
五、图标尺寸和按钮触达分开控制
底栏 SVG 图标为 22vp,但按钮平均分配整行宽度,并满足更大的点击区域。外层按钮负责触达与按压,内层图标只负责视觉。
这延续了 Theme Token 的原则:48vp 是交互契约,不是要求所有图形都放大到 48vp。
六、三个手机页面使用沉浸式壳
实时课堂、扫描材料和 OCR 复核需要最大内容面积,因此 isImmersivePhonePage() 对这三个路由返回 true。phone 下它们绕过通用顶栏与底栏,直接构建专用页面。
大屏下仍使用侧栏工作区,因为宽度足以同时保留导航和主要操作。
七、沉浸不等于没有返回流程
隐藏公共壳后,专用页面必须提供明确返回按钮,并处理正在监听、相机或 OCR 会话。项目在路由离开实时课堂且仍处于监听时调用 liveService.pause(),避免后台继续采集。
if (route !== RouteId.LIVE_CLASS &&
this.currentPage === RouteId.LIVE_CLASS &&
this.liveState === LiveSessionState.LISTENING) {
this.liveService.pause();
}
八、navigate 还负责滚动复位与最近页面
路由变化时,contentScroller.scrollEdge(Edge.Top) 清除上一页滚动偏移;随后更新 currentPage、preferences.lastPage 并通过 PersistenceV2 保存。
这能避免从设置长页进入状态画廊时继承旧滚动位置。路由函数因此是短生命周期 UI 状态与轻量偏好的协调点。

九、页面分发保持单一入口
currentPageContent() 根据 RouteId 选择具体 Builder,根 build() 再决定使用隐私壳、手语页、沉浸页、large 壳或 compact 壳。路由语义与壳选择分成两层,减少重复页面实现。
同一个任务中心不会因为从底栏或侧栏进入而拥有两份状态。
十、持久化最近页面需要安全回退
显示文案变化不会破坏 lastPage,但应用升级删除或重命名 RouteId 时仍需迁移与默认值。隐私页也应优先于直接恢复业务页,避免未确认说明就跳过入口。
路由持久化属于轻量偏好,不应替代完整导航栈或深链参数模型。
十一、可达性验收不能只点五个按钮
至少要验证底栏五项、侧栏全部入口、沉浸页返回、监听中离开、长页滚动复位、暗色选中态、Tab/Enter 激活和无障碍名称。还要从子页反向检查能否回到稳定主入口。
UI 树能证明控件存在和尺寸合理,但真实屏幕阅读器播报仍需独立设备验收。
十二、总结
共享路由的核心不是复用一组字符串,而是让标题、选中态、页面分发、返回副作用和最近页面都服从同一语义。手机用五项底栏控制入口密度,大屏用侧栏提高可达性,沉浸页只临时改变页面壳。
下一篇将复盘 1100vp→835vp→1100vp 往返测试,说明为什么响应式验收必须检查状态恢复,而不只是截三张图。
更多推荐


所有评论(0)