使用 Compose Navigation3 进行屏幕适配

📌 一句话摘要

本文分享了 B 站技术团队使用 Google 最新 Navigation3 导航库在 Compose Multiplatform (CMP) 环境下进行宽屏适配的实战经验与避坑指南。

📝 详细摘要

文章深入探讨了 B 站大前端团队为何选择 Navigation3 作为纯 Compose 导航框架，旨在解决 CMP 跨平台开发中原生容器带来的内存压力及生命周期不匹配问题。作者详细介绍了 Navigation3 的核心理念——将导航栈视为普通数据列表（f(data)=UI），并展示了如何通过 NavKey 桥接现有路由系统、利用 SceneStrategy 实现基于 WindowSizeClass 的断点式宽屏适配。此外，文章还针对单 Activity 架构下的状态保存、系统 UI 收集机制、返回事件处理及原生 Fragment 嵌入等实际工程问题提供了具体的代码实现方案和底层原理分析。

💡 主要观点

- Navigation3 实现了导航栈的声明式管理，将 f(data)=UI 理念延伸至页面层级。 Nav3 不再内置复杂的 NavGraph，而是让开发者直接操作 List。框架仅负责根据栈内容渲染 UI，这种精简设计使其能轻松整合进现有的路由系统。

纯 Compose 导航框架是解决 CMP 跨平台性能与兼容性问题的关键。 相比为每个页面嵌套原生容器（Activity/UIViewController），纯 Compose 导航能显著降低内存占用（避免重复创建渲染缓冲区），并提供更精准的生命周期回调，减少卡顿与发热。

通过 SceneStrategy 实现灵活的宽屏与折叠屏适配。 利用 SceneStrategy 接收导航栈并结合 WindowSizeClass，开发者可以自定义布局策略，在宽屏下自动切换为分栏布局（List-Detail），而在窄屏下回退为单页模式。

单 Activity 架构下需严格区分「状态」与「事件」，并建立统一的 System UI 配置收集机制。 为避免页面重入导致的 UI 闪烁或状态丢失，需将一次性事件（如 Toast）移出持久状态，并通过 Modifier 链向上层宿主上报状态栏等系统配置。

💬 文章金句

- Navigation3 将导航栈的管理权完全交给开发者，框架只负责「根据栈内容渲染 UI」，将 f(data)=UI 的理念扩展到了页面导航栈上。

• 在纯 Compose 世界内的页面导航切换范围内，我们需要一个纯 Compose 的导航框架。
• 这一次跳转动作应当分为两个具体步骤：使用「路由」寻找这个 URI 对应的页面信息，然后使用「导航」组件将这个页面展现在用户面前。
• 在单 Activity 页面导航框架中，SystemUI 配置（如状态栏颜色）如果允许每个页面、每个组件自由控制，将很容易出现 UI 闪烁等情况。

📊 文章信息

AI 评分：89

来源：哔哩哔哩技术

作者：哔哩哔哩技术

分类：软件编程

语言：中文

阅读时间：29 分钟

字数：7162

标签： Compose Navigation3, Android, CMP, 屏幕适配, Bilibili

阅读完整文章