Android Compose 00_系列导读

Jetpack Compose Material 3 系列教程导读

前言

你好，Android 开发者朋友！

如果你已经在 Android 开发这条路上走了一段时间，习惯了用 XML 写布局，用 findViewById 找控件，那么恭喜你——你即将踏上一段全新的旅程！

Jetpack Compose 来了，它不是一个小版本的更新，而是一场彻底的 UI 开发革命。别担心，这不是要让你把过去的经验全部扔掉，而是给你一把更强大的武器。

为什么要学 Compose？

先来聊聊"为什么"。我知道你可能会想：

"XML 布局用得好好的，为什么要换？"
"Compose 是不是又是一个会被废弃的新技术？"
"学习成本会不会太高？"

这些都是好问题！让我用轻松一点的方式来回答：

XML 布局就像是用砖块盖房子，你需要一块一块地砌，还要处理砖块之间的缝隙。而 Compose 就像是用乐高积木搭房子，你只需要声明"我想要什么"，系统就会自动帮你组装好。

更重要的是：Compose 是 Android 官方推荐的 UI 方向。Google 已经明确表示，未来的新 UI 特性会优先在 Compose 中实现。想想看，当年从 Support Library 迁移到 AndroidX，从 Eclipse 换到 Android Studio，每一次技术迭代都带来了更好的开发体验。Compose 也不例外。

本系列适合谁看？

• 有 Android 开发经验：熟悉 Kotlin，写过 XML 布局
• 没用过 Compose：或者刚刚开始接触，想系统学习
• 想学习 Material 3：让 app 变得更漂亮

如果你完全没接触过 Android，建议先学基础知识再回来。如果你已经是 Compose 高手，这篇文章可能太基础了。

---

Compose 是什么？

用一句话概括：Compose 是一个用于构建原生 Android UI 的现代化工具包。

声明式 UI 的魔法

传统 XML 布局是命令式的：你告诉系统"怎么做"。

// 传统方式：命令式
val textView = findViewById<TextView>(R.id.text_view)
textView.text = "Hello"
textView.setTextColor(Color.RED)
textView.setOnClickListener { ... }

Compose 是声明式的：你告诉系统"要什么"。

// Compose 方式：声明式
Text(
    text = "Hello",
    color = Color.Red,
    modifier = Modifier.clickable { ... }
)

区别在哪？

传统方式像是指挥交通：你需要告诉每辆车什么时候走、什么时候停、怎么转弯。一旦路况变了，你得重新指挥。

Compose 像是设定导航：你告诉它目的地，系统会自动规划路线。路况变了？系统会自动重新规划！

Compose vs 传统 View 系统

对比项	传统 View 系统	Jetpack Compose
写布局方式	XML 文件	Kotlin 代码
代码量	较多（需要 XML + Kotlin）	较少（全部 Kotlin）
预览	需要构建或用单独预览工具	实时预览，所见即所得
状态管理	手动更新 UI	状态变化自动更新 UI
动画	复杂，需要写很多代码	简单，API 更直观
列表	RecyclerView 很繁琐	LazyColumn 超简单
代码复用	自定义 View 比较麻烦	Compose 函数天然可复用

---

Material Design 3 是什么？

说完了 Compose，再聊聊 Material Design 3（简称 MD3）。

MD3 的前世今生

• Material Design 1：2014 年发布，Google 第一次推出统一的设计语言
• Material Design 2：2018 年更新，引入了更多组件和颜色系统
• Material Design 3：2021 年发布，也叫"Material You"，强调个性化

为什么要用 MD3？

1. 更现代的视觉风格

MD3 的组件看起来更圆润、更有层次感，配色也更加丰富。

2. 动态主题（Dynamic Color）

从 Android 12 开始，系统可以根据你的壁纸自动生成主题色。MD3 完美支持这个特性！

3. 更好的个性化

MD3 提供了更多的定制选项，让你的 app 更有特色。

Compose + MD3 = 天生一对

Compose 原生支持 Material Design 3，你只需要导入依赖，就能直接使用所有 MD3 组件。不用自己写样式，不用找第三方库，开箱即用！

// 只要这一行，就能用所有 MD3 组件
import androidx.compose.material3.MaterialTheme

---

系列规划

这个系列共 10 篇文章，带你从零开始掌握 Compose + Material 3。

篇数	标题	核心内容	难度
0	系列导读（本篇）	Compose 是什么、为什么学、怎么学	★☆☆
1	基础显示组件	Text、Button、TextField、FAB	★☆☆
2	布局和容器组件	Card、Surface、Scaffold、布局结构	★★☆
3	选择和输入组件	Checkbox、Switch、Slider、Progress	★★☆
4	列表组件	LazyColumn、LazyRow、LazyGrid	★★★
5	图像组件	Image、Icon、AsyncImage（Coil）	★★☆
6	对话框和弹窗组件	AlertDialog、Dialog、BottomSheet	★★★
7	导航组件	NavigationBar、TabRow、NavigationRail	★★★
8	Material 3 新潮组件	SearchBar、DatePicker、Badge、Chip	★★★
9	特殊功能组件	主题系统、动画、状态管理	★★★

学习路线建议

配套演示项目

本系列的所有代码都来自一个开源演示项目：Compose Material 3 组件演示

项目地址：[GitHub 链接] https://github.com/1604653069/compose_demo.git

---

快速开始

在正式开始学习之前，先确保你能够运行演示项目。

环境要求

环境	要求
Android Studio	Hedgehog (2023.1.1) 或更高版本
Kotlin	1.9.0 或更高版本
Gradle	8.0 或更高版本
最低 SDK	API 24 (Android 7.0)
目标 SDK	API 36

运行演示项目

1. 克隆项目

git clone https://github.com/1604653069/compose_demo.git
cd compose_demo

2. 用 Android Studio 打开

打开项目后，等待 Gradle 同步完成（第一次可能需要几分钟）。

3. 运行 app

连接真机或启动模拟器，点击 Run 按钮或按 Shift + F10。

4. 体验组件

启动后你会看到主界面，可以浏览所有组件分类，点击进入查看详细演示。

项目结构一览

compose_demo/
├── app/
│   └── MainApp.kt                   # App 入口和导航配置
│
├── components/                      # 所有组件演示
│   ├── basic/                       # 基础组件（Text、Button 等）
│   ├── layout/                      # 布局组件（Card、Surface 等）
│   ├── input/                       # 输入组件（Checkbox、Switch 等）
│   ├── list/                        # 列表组件（LazyColumn 等）
│   ├── image/                       # 图像组件
│   ├── dialog/                      # 对话框组件
│   ├── navigation/                  # 导航组件
│   ├── modern/                      # MD3 新组件
│   └── special/                     # 特殊组件（DatePicker 等）
│
├── ui/theme/                        # 主题配置
│   ├── Color.kt                     # 颜色定义
│   ├── Theme.kt                     # 主题配置
│   └── Type.kt                      # 字体样式
│
├── viewmodel/                       # 状态管理
└── data/                            # 数据层
├── MainActivity.kt                  # 主 Activity

---

写在最后

Compose 不是一个难学的技术，相反，它比传统的 XML + Kotlin 方式更简单、更直观。

你可能会在初期感到一些不习惯——这很正常！就像第一次用筷子、第一次骑自行车，刚开始都觉得别扭，但熟练之后，你会发现自己再也回不去了。

下一章预告：

我们将从最基础的地方开始——学习 Text、Button、TextField 和 FloatingActionButton 这些基础显示组件。它们是你构建任何界面的起点。

准备好了吗？让我们开始吧！

---

相关资源：

• Jetpack Compose 官方文档
• Material Design 3 指南
• Compose Material 3 API 文档
• [演示项目 GitHub 地址] https://github.com/1604653069/compose_demo

---

本系列教程基于 Jetpack Compose 最新稳定版本编写。如有更新，请以官方文档为准。

下一篇：基础显示组件 - Text、Button、TextField、FAB