如何完成 View 应用到 Jetpack Compose 的迁移：sunflower 完整拆解

如何完成 View 应用到 Jetpack Compose 的迁移：sunflower 完整拆解

【免费下载链接】sunflowerA gardening app illustrating Android development best practices with migrating a View-based app to Jetpack Compose.项目地址: https://gitcode.com/gh_mirrors/su/sunflower

手头的 View 应用由 XML 和 Fragment 堆成，想换 Compose 又怕推倒重来。sunflower 是一个园艺应用，把 View 应用到 Jetpack Compose 的迁移拆成了可复现的路线，照着走一遍就能套到自己的项目上。

项目定位：View 应用改写成 Compose 的完整路线

sunflower 的定位写在 README 里：一个园艺 App，演示如何把 Material 2 的 View 应用迁到 Material 3 的 Compose。它的价值不在园艺功能，而在迁移路径本身——Gallery、Garden、Home、PlantList、PlantDetail 五个页面逐个重写，最后把 Fragment 导航整体换成 Navigation Compose，Fragment 全部移除。

注意它的改动范围：数据层的 Room、Repository、WorkManager 基本不动，只动 UI 层。对想迁移自家项目的团队来说，这就是"刀口"大小的参考，不用连数据库一起重做。

🧠 理解核心：把界面当「报菜名」

传统 View 像亲自下厨：XML 先把每道菜的盘子摆好，代码里 findViewById 再端菜上桌，数据一变，得手动找到对应控件去改。

Compose 更像报菜名：你只描述"客人看到什么"——"列表数据是这几行，界面就该长这样"，框架负责把画面重新画出来。

每个屏幕就是一个 Kotlin 函数：输入状态，输出界面，状态一变函数重跑一次。这个差别直接决定迁移顺序：先搬单个页面，再换导航，而不是先推翻整套 XML 体系。

📝 五步跑通迁移示例

第 1 步：拉代码，先跑起来

一条命令git clone https://gitcode.com/gh_mirrors/su/sunflower，用 Android Studio 打开直接 Run。验证：App 能进首页并显示植物列表，数据来自本地 assets/plants.json，不需要联网。

第 2 步：补一个 Unsplash key

画廊页的图来自 Unsplash API，key 要写进 gradle.properties（放项目根目录或用户目录 ~/.gradle/gradle.properties 都行）：

unsplash_access_key=<your Unsplash access key>

这一行就是全部配置。验证：点进详情页再进画廊能加载出图片；不配 key 时 App 也能运行，只是进不了画廊，别把这一点误判成迁移失败。

第 3 步：按迁移路线读文档

先读 迁移路线文档，整个迁移分三段：定策略、逐屏迁移、换导航并删除 Fragment。验证：你能对着文档说出五个页面的迁移顺序，以及每段对应的完成状态。

第 4 步：挑一个页面看实现

打开 Compose 界面源码，garden、plantlist、plantdetail、gallery、home 五个子目录对应五个已迁移的屏幕。验证：挑 plantlist 看，列表界面全是 @Composable 函数；res/layout 下只剩 item_plant_description.xml 一个文件，那是给后面要讲的 AndroidViewBinding 用的。

第 5 步：看导航怎么切换

路由定义集中在 路由文件，每个页面一段：

data object PlantDetail : Screen( route = "plantDetail/{plantId}", navArguments = listOf(navArgument("plantId") { type = NavType.StringType }) ) { fun createRoute(plantId: String) = "plantDetail/${plantId}" }

原来的 nav_graph XML 换成了这种字符串路由，参数也声明在代码里。验证：运行后从首页点进详情页、再进画廊，plantId 和 plantName 两个参数都能正确带过去，返回键行为不变。

⚠️ 新旧写法对照，顺便避开三个坑

三个容易踩的坑：

1. key 没配就怀疑代码坏了。症状是画廊进不去，实际只差 gradle.properties 里那一行，见第 2 步。
2. HTML 文案变乱码。Compose 的 Text 渲染不了 HTML 标签，植物介绍里的加粗会原样显示。项目在 植物详情页源码 里用 AndroidViewBinding 嵌了一个 TextView 解决，这个 Composable 就叫 PlantDescription。
3. 页面没迁完先换导航。旧页面还依赖 Fragment 导航图时，提前删 Fragment 会直接崩。迁移路线文档也把换导航放在最后一步，五个页面全部迁完才动它。

🚀 三条进阶建议

• 对比改动幅度：checkout 仓库的 views 分支，那是迁移前的 View 版本，可逐文件 diff。
• 每个新 Composable 顺手补 UI 测试，androidTest 目录里 createComposeRule 的写法可以直接抄。
• 冷启动别凭感觉，用 macrobenchmark 模块现成的任务生成 Baseline Profile，再看数据。

想继续深入，从仓库里的 docs/MigrationJourney.md 读起；README 也说明了后续 Compose 写法以官方 compose-samples 示例集为准。

【免费下载链接】sunflowerA gardening app illustrating Android development best practices with migrating a View-based app to Jetpack Compose.项目地址: https://gitcode.com/gh_mirrors/su/sunflower