第1章 Compose 初体验

课程目录第1章 Compose 初体验

1. Compose 初体验：什么是 Jetpack Compose？

说实话，我第一次接触 Compose 的时候，心里是有点抵触的。毕竟做 Android 开发这么多年，XML 布局已经写得滚瓜烂熟了。但当我真正用 Compose 写完一个页面后，我不得不承认——这玩意儿，真香。

Jetpack Compose 是 Google 推出的原生 UI 工具包。它完全抛弃了传统的 XML 布局方式，改用 Kotlin 代码直接描述界面。你可能会问：这不就是代码写 UI 吗？跟以前用 Java 写 View 有啥区别？

区别大了。Compose 的核心思想是声明式 UI。说白了，你只需要告诉框架「界面长什么样」，剩下的刷新、更新、重绘，框架自己搞定。

声明式 UI vs 命令式 UI

我拿一个简单的例子来说明。假设你有一个点赞按钮，点击后数字 +1。

命令式 UI（传统方式）：

// 找到按钮
val button = findViewById<Button>(R.id.likeButton)
val textView = findViewById<TextView>(R.id.likeCount)

// 设置点击监听
button.setOnClickListener {
    count++
    // 手动更新 UI
    textView.text = "$count"
}

你看，每次数据变了，你得手动找到对应的 View，然后调用 setText、setVisibility 这些方法。页面复杂了，这种代码会变得非常混乱。我在项目中就见过一个 Activity 里塞了上千行 findViewById 和 setText，改个需求要翻半天。

声明式 UI（Compose 方式）：

@Composable
fun LikeButton() {
    var count by remember { mutableStateOf(0) }
    
    Column {
        Text("点赞数：$count")
        Button(onClick = { count++ }) {
            Text("点赞")
        }
    }
}

看到区别了吗？你只需要描述「count 是多少，界面就长什么样」。count 变了，Compose 自动重新绘制相关部分。不需要你手动操作任何 View。

核心区别一句话总结：

命令式 UI：你告诉框架「怎么做」
声明式 UI：你告诉框架「要什么」

Compose 的优势

我个人觉得，Compose 最大的优势不是「少写代码」，而是逻辑和 UI 在一起。以前写一个列表，数据在 ViewModel 里，适配器在另一个文件，布局在 XML 里，点击事件又写在 Activity 里。改一个功能要打开四五个文件。

Compose 把这一切整合到了一起。你的 UI 逻辑、状态管理、事件处理，都可以写在一个 Composable 函数里。代码量直接砍半。

另外，Compose 的预览功能也很香。以前改个 XML 布局，得编译运行才能看到效果。Compose 支持实时预览，改完代码立刻看到界面变化。嗯，这里要注意，预览需要开启 @Preview 注解，但配置一次后面就很爽了。

对比项	传统 View 系统	Jetpack Compose
布局方式	XML + 代码	纯 Kotlin 代码
UI 更新	手动调用 setText 等	自动重组
状态管理	LiveData / 手动维护	mutableStateOf / StateFlow
代码量	较多	减少 40%-60%
学习曲线	平缓	初期有门槛

适用场景

Compose 适合新项目，也适合老项目逐步迁移。我建议新项目直接上 Compose，别犹豫。老项目可以从一个页面开始试水，比如设置页、个人中心这种相对独立的页面。

不过要注意，如果你的项目还在用低版本 API（比如 API 21 以下），Compose 的支持会受限。目前 Compose 最低支持 API 21，覆盖了 99% 的设备，基本不用担心。

避坑指南：

我曾经在一个老项目里强行全量迁移 Compose，结果发现有些第三方库还没适配，比如地图 SDK、视频播放器。折腾了两天又改回去了。建议先做调研，确认你用的关键库都支持 Compose。

环境搭建与第一个 Compose 项目

搭建环境其实很简单。你需要：

Android Studio Arctic Fox 或更高版本
Kotlin 1.5.31 以上
Gradle 7.0 以上

创建一个新项目时，直接选择「Empty Compose Activity」模板。Android Studio 会自动帮你配好所有依赖。

如果你要在现有项目里加 Compose，需要在 build.gradle 里添加：

// 在 android 块里
buildFeatures {
    compose = true
}

// 在 dependencies 里
implementation "androidx.compose.ui:ui:1.5.0"
implementation "androidx.compose.material3:material3:1.1.0"
implementation "androidx.compose.ui:ui-tooling-preview:1.5.0"
implementation "androidx.activity:activity-compose:1.7.0"

写第一个 Compose 页面，你只需要一个函数：

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            // 这就是你的第一个 Compose 页面
            Text("Hello, Compose!")
        }
    }
}

就这么简单。setContent 是 Compose 的入口，里面放你的 Composable 函数。Text 就是一个 Composable，相当于传统开发里的 TextView。

小技巧： 我个人习惯把 setContent 里的内容单独抽成一个函数，比如 App()，这样预览和测试都方便。别把所有代码都塞在 Activity 里，后面会很难维护。

知识体系总览

下面这张图帮你理清 Compose 的核心脉络：

这张图把 Compose 的核心知识点串起来了。你从中心出发，沿着箭头走一遍，就能理解 Compose 的全貌。后面每一章，我们都会深入这些分支中的一个。

好了，第一章就到这里。环境搭好了，第一个页面也跑起来了。接下来你会接触到更多的 Composable 组件，慢慢就会发现——用 Compose 写 UI，真的会上瘾。

公众号:蓝海资料掘金营，微信deep3321

📚 课程目录

1. Compose 初体验：什么是 Jetpack Compose？

声明式 UI vs 命令式 UI

Compose 的优势

适用场景

环境搭建与第一个 Compose 项目

知识体系总览