Jetpack Compose 是 Android 官方推出的现代化 UI 工具包，它允许你使用 Kotlin 构建声明式的用户界面。和传统 View 体系"找到控件、改属性"不同，Compose 是"描述界面长什么样，状态变了自动更新"。本文将为你提供 Jetpack Compose 的快速入门指南，让你了解如何创建简单的 Composable 函数、构建用户界面以及处理用户交互。

一、Compose 是什么：先理解"声明式"

传统的 View 体系是命令式的：findViewById 找到控件，再 setText / setVisibility 手动改它。界面状态一变，你要自己写一堆"更新哪几个控件"的代码。

Compose 是声明式的：你用 Kotlin 函数描述界面，界面由状态（State）驱动——状态变了，框架自动帮你更新对应的界面部分（这个过程叫重组）。

对比	传统 View（命令式）	Compose（声明式）
界面描述	XML 布局文件	Kotlin Composable 函数
更新界面	手动 find + setXXX	状态变化自动重组
状态管理	分散在各处	State + 单向数据流

二、Compose 架构分层

Compose 不是单层库，而是自下而上的四层架构，上层依赖下层：

• Compose Runtime：最底层，管状态和重组——mutableStateOf 的值变了，依赖它的 Composable 自动重跑
• Compose UI：测量、布局、绘制、输入、语义——把 Composable 渲染到屏幕上
• Foundation：Row / Column / Box / LazyColumn 这些基础布局组件
• Material：Button / TextField / Card 等 Material Design 组件（最常用，也最依赖上层）

理解重组是理解 Compose 的关键：状态变化 → 触发重组 → 只重绘变化的部分，不是整个界面。写 Compose 时"哪些状态被读取、哪些界面依赖它"决定了重组范围（见 State 状态管理一文）。

三、步骤 1：设置项目

确保你的 Android 项目配置为使用 Jetpack Compose。推荐用 BOM（Bill of Materials）统一管理版本，不用再一个个手动指定版本：

android {
    ...
    buildFeatures {
        compose true
    }
}

dependencies {
    // 用 BOM 统一版本，升级只需改 BOM 一个版本号
    implementation(platform("androidx.compose:compose-bom:2024.09.00"))
    implementation("androidx.compose.ui:ui")
    implementation("androidx.compose.material3:material3")
    implementation("androidx.activity:activity-compose")
}

TIP

Compose 版本演进很快，手动指定版本容易踩版本不匹配的坑。官方推荐用 BOM 批量管理版本，升级时只改一个 BOM 版本号即可。

四、步骤 2：创建 Composable 函数

在 Jetpack Compose 中，用户界面通过 Composable 函数构建。一个 Composable 函数用 @Composable 注解标记，描述一段 UI：

import androidx.compose.foundation.layout.Column
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable

@Composable
fun SimpleComposable() {
    Column {
        Text(text = "Hello, Jetpack Compose!")
    }
}

Column 是基础布局（像传统 View 的 LinearLayout），Text 显示文本——每个界面元素都是一个 Composable 函数。

五、步骤 3：设置界面

在 MainActivity 的 onCreate 中用 setContent 把 Composable 挂到 Activity：

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.runtime.Composable

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            // 在这里放你的 Composable 函数
            SimpleComposable()
        }
    }
}

六、步骤 4：运行应用程序

运行后就能看到 "Hello, Jetpack Compose!"。往 SimpleComposable 里加更多 Composable 元素，就能构建更复杂的界面。

七、核心机制：状态驱动界面

入门最后一步，理解 Compose 最核心的机制——状态驱动：

@Composable
fun Counter() {
    var count by remember { mutableStateOf(0) }
    Button(onClick = { count++ }) {
        Text("点击了 $count 次")
    }
}

• remember：记住状态，重组时不丢失
• mutableStateOf：可观察状态，读它会建立依赖，改它会触发重组
• 点击按钮 → count 变化 → 依赖 count 的 Text 自动更新——不需要你手动 setText

这正是声明式 UI 的威力：你只描述"界面 = f(状态)"，更新交给框架。

小结

• Compose = 用 Kotlin 描述 UI 的声明式框架，状态驱动界面
• 架构四层：Runtime（状态/重组）→ UI（绘制）→ Foundation（布局）→ Material（组件）
• 项目配置用 BOM 统一版本
• 核心机制：remember + mutableStateOf → 状态变化触发重组

下一步建议看《Compose 中的状态管理》（remember/mutableStateOf/derivedStateOf/rememberSaveable 详解）和《Navigation 导航实现》。