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

同一路由中心驱动手机底栏与大屏侧栏

一、路由标识不能等同于显示文案

RouteId.HOMERouteId.LIVE_CLASSRouteId.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 侧栏宽度,能容纳更多页面名与分组。它仍使用同一个 currentPagenavigate(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) 清除上一页滚动偏移;随后更新 currentPagepreferences.lastPage 并通过 PersistenceV2 保存。

这能避免从设置长页进入状态画廊时继承旧滚动位置。路由函数因此是短生命周期 UI 状态与轻量偏好的协调点。

统一 RouteId 分流到底栏、侧栏和沉浸页并保持返回链

九、页面分发保持单一入口

currentPageContent() 根据 RouteId 选择具体 Builder,根 build() 再决定使用隐私壳、手语页、沉浸页、large 壳或 compact 壳。路由语义与壳选择分成两层,减少重复页面实现。

同一个任务中心不会因为从底栏或侧栏进入而拥有两份状态。

十、持久化最近页面需要安全回退

显示文案变化不会破坏 lastPage,但应用升级删除或重命名 RouteId 时仍需迁移与默认值。隐私页也应优先于直接恢复业务页,避免未确认说明就跳过入口。

路由持久化属于轻量偏好,不应替代完整导航栈或深链参数模型。

十一、可达性验收不能只点五个按钮

至少要验证底栏五项、侧栏全部入口、沉浸页返回、监听中离开、长页滚动复位、暗色选中态、Tab/Enter 激活和无障碍名称。还要从子页反向检查能否回到稳定主入口。

UI 树能证明控件存在和尺寸合理,但真实屏幕阅读器播报仍需独立设备验收。

十二、总结

共享路由的核心不是复用一组字符串,而是让标题、选中态、页面分发、返回副作用和最近页面都服从同一语义。手机用五项底栏控制入口密度,大屏用侧栏提高可达性,沉浸页只临时改变页面壳。

下一篇将复盘 1100vp→835vp→1100vp 往返测试,说明为什么响应式验收必须检查状态恢复,而不只是截三张图。

Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐