Compose简介与开发环境搭建

说实话，我第一次接触 Jetpack Compose 的时候，心里是有点抗拒的。毕竟之前在 Android 上写 UI 用了好几年 XML，突然让我换个方式，总觉得多此一举。直到我亲手在项目里用 Compose 重构了一个列表页面……嗯，那一百多行的 RecyclerView 适配器、ViewHolder、点击监听器，缩成了三十多行纯 Kotlin 代码。从那以后，我就再也没回头写过 XML 了。

1.1 什么是 Jetpack Compose？

你想想看，传统的 Android UI 开发，是不是这样的：先在 XML 里画布局，再到 Activity/Fragment 里用 findViewById 找到控件，然后塞数据、加监听。这中间有大量的模板代码，而且数据和视图之间没有直接的绑定关系。一旦 UI 状态变了，你得手动更新对应的控件。烦不烦？

Compose 则完全不同。它是一套基于 Kotlin 的声明式 UI 框架。说白了，你只需要描述“界面应该长什么样”，剩下的由框架搞定。比如你想显示一段文字“Hello”，就这样写：

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name")
}

「可组合函数」（Composable function）是 Compose 的最小 UI 单元。你用它来组合、嵌套、复用。而且它只依赖 Kotlin 语言，完全不需要 XML。其实 Compose 在 2021 年才正式稳定，但 Google 现在已经把它作为 Android UI 的默认方向了。我在 2022 年帮一个金融客户做迁移时，就发现 Compose 的性能和开发效率比想象的还要好，尤其是在列表渲染上。

1.2 为什么强调“离线优先”？

这个课程叫《离线优先 Compose》，不是随便挂个词。我在做车载应用时踩过一个坑：网络不稳定的情况下，用户打开 App 直接白屏，因为所有数据都从远端拉。后来我们改用本地数据库为主、网络为同步源的方式，用户体验直线上升。

离线优先不是单纯“加个缓存”，而是设计理念：本地存储是真理源（Source of Truth），网络数据只是用来更新本地的。Compose 配合 Room 和 WorkManager，可以很优雅地实现这一套。你不需要手动写很多同步逻辑，Compose 的状态管理会让你清晰地知道数据什么时候该刷新。

传统方式	离线优先方式
UI 依赖网络请求结果	UI 依赖本地数据库
网络断开直接显示空白	本地数据始终可用，网络仅作同步
手动管理缓存与过期	Room + Compose 状态自动感知

1.3 开发环境搭建

这部分其实没什么复杂的，但也是初学者的第一个门槛。我见过不少新手在版本上栽跟头。记住，Compose 对 Kotlin 和 Android Studio 的版本很敏感。

1. 安装 JDK：建议 JDK 17 及以上。我用的是 Adoptium（以前叫 AdoptOpenJDK），在 JAVA_HOME 里配好就行。
2. 下载 Android Studio：必须用 2022.3（Dolphin）之后的版本。我建议直接用最新稳定版，比如 Flamingo。
3. 配置 Kotlin 插件：Android Studio 通常自带，但确保版本 ≥ 1.8.0。可以在 File > Settings > Languages & Frameworks > Kotlin 里检查。
4. 添加 Compose 编译器：在项目的 build.gradle（Module 级别）里加入：

android {
    buildFeatures {
        compose = true
    }
    composeOptions {
        kotlinCompilerExtensionVersion = "1.5.0"
    }
}

另外，你需要在 build.gradle 的 dependencies 里加入 Compose BOM（Bill of Materials），它统一管理所有 Compose 库的版本，省去很多麻烦：

def composeBom = platform('androidx.compose:compose-bom:2024.01.00')
implementation composeBom
// 其他 Compose 库都不用指定版本了
implementation 'androidx.compose.ui:ui'
implementation 'androidx.compose.material3:material3'
implementation 'androidx.compose.ui:ui-tooling-preview'
debugImplementation 'androidx.compose.ui:ui-tooling'

1.4 创建并运行第一个 Compose 项目

打开 Android Studio，选择 New Project → Empty Activity。注意看模板，现在默认就有 Compose 选项。你新建完成后，直接打开 MainActivity.kt，应该看到类似这样的代码：

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyAppTheme {
                Greeting("Android")
            }
        }
    }
}

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    MyAppTheme {
        Greeting("Android")
    }
}

你直接点右上角的绿色三角形运行，模拟器上就能看到「Hello Android!」。搞定。这里有个小技巧：用 @Preview 注解的函数可以在 Android Studio 里直接预览 UI，不用每次跑模拟器。我开发时基本都是边写代码边看预览，效率很高。

1.5 本章知识体系

下面这张图帮你理清本章的核心内容：从理解 Compose 是什么，到配好环境，再到跑起第一个项目，一个闭环就完成了。