用 Jetpack Compose 写 Android 的 “Hello World”

“每一个伟大的 App 都始于一句 Hello World。”

如果你刚打开 Android Studio，准备迈入 Jetpack Compose 的世界，那么恭喜你——这篇文章就是为你准备的。我们将用最简洁的代码，带你跑通第一个 Compose 程序，并解释背后到底发生了什么。

目录

1. 为什么选 Jetpack Compose？
2. 准备开发环境
3. 代码逐行解读
   3.1 MainActivity 为什么继承 ComponentActivity？
   3.2 enableEdgeToEdge() 是干什么的？
   3.3 @Composable 和 Text() 是什么魔法？
   3.4 @Preview 如何实时预览？
4. 运行 & 调试小技巧
5. 下一步做什么？

---

1. 为什么选 Jetpack Compose？

---

过去写 Android UI，我们需要 XML 布局 + Activity/Fragment 的“双语言”模式。Jetpack Compose 把声明式 UI 带到了 Android，让我们用 纯 Kotlin 就能写完界面+逻辑，代码更少、实时预览更快、状态管理也更自然。

---

2. 准备开发环境

---

1. Android Studio Koala 或更高版本（Compose 需要新版 IDE 的实时预览支持）。
2. 新建项目时选择 Empty Activity (Compose) 模板，Gradle 会自动帮你拉好 compose_bom 等依赖。
3. 确保 build.gradle 里至少包含：

   implementation(platform("androidx.compose:compose-bom:2024.06.00"))
   implementation("androidx.compose.ui:ui")
   implementation("androidx.compose.material3:material3")
   

---

3. 代码逐行解读

---

class MainActivity : ComponentActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)enableEdgeToEdge()                // 1️⃣setContent {                     // 2️⃣MessageCard("Android")}}@Composable                        // 3️⃣fun MessageCard(name: String) {Text(text = "Hello $name!")}@Preview                          // 4️⃣@Composablefun PreviewMessageCard() {MessageCard(name = "Android")}
}

3.1 ComponentActivity 是什么？

ComponentActivity 是专门为 Compose 设计的 Activity 基类，内部实现了 LifecycleOwner、ViewModelStoreOwner 等接口，省去我们手动桥接 Compose 与旧架构的麻烦。

3.2 enableEdgeToEdge()

在 Android 15 开始，系统默认会在状态栏/导航栏加半透明遮罩。
enableEdgeToEdge() 让应用内容延伸到整个屏幕，再配合 WindowInsets 调整内边距，就能做出“沉浸式”布局。

3.3 @Composable 函数

• @Composable 注解告诉编译器：这是一个 UI 函数，可以被重组（recompose）。
• Text(...) 是 Compose 内置的最基础控件，相当于传统 View 体系中的 TextView。
• 参数 name 让我们把“谁向谁打招呼”抽象出来，方便复用和测试。

3.4 @Preview

在 Android Studio 右侧的 Split/Design 视图中，只要加上 @Preview 注解的 @Composable 函数，就能实时看到渲染效果，无需真机运行。改一行字，预览 1 秒刷新，开发效率大幅提升。

---

4. 运行 & 调试小技巧

---

• 热重载 (Live Edit)：确保 Settings → Live Edit → 勾选 “Push Edits Manually”，代码修改后按 Ctrl+S 立即生效，比传统 Instant Run 快得多。
• 日志：在 MessageCard 里加一行 Log.d("Compose", "Recomposing $name")，观察重组频率。
• 深色模式：在 Preview 里再加一个注解 @Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)，一键查看夜间效果。

---

5. 下一步做什么？

---

1. 把 Text 换成 Column、Row、Card 等布局，体验 Compose 的声明式排版。
2. 用 remember { mutableStateOf(...) } 加个小计数器，感受状态驱动 UI。
3. 把 MessageCard 提取到单独文件，学会模块化 UI 组件。
4. 引入 Navigation for Compose，做一个两页面跳转的 Demo。

---

结语

短短 30 行代码，我们已经完成了：

• 全屏显示
• 声明式 UI
• 实时预览
• 可组合、可测试的组件

这就是 Jetpack Compose 的魅力：没有 XML、没有 findViewById，一句 Hello World 就能带你飞。祝你编码愉快，下一篇博客见！