目标读者：想系统学习 Jetpack Compose 的 Android 开发者（入门—进阶）
1. 学习前置条件
1.1 必备技能
- Kotlin 语言：熟悉函数式风格、lambda、高阶函数、协程
- Android Studio：建议 2024.2（Iguana）或更高版本
- Gradle：推荐 Kotlin DSL（
build.gradle.kts），确保启用 Compose 编译扩展 - 设备要求：最低 API 24（Android 7.0），JDK 17
1.2 项目配置示例
android {
compileSdk = 35
defaultConfig {
minSdk = 24
}
buildFeatures {
compose = true
}
composeOptions {
kotlinCompilerExtensionVersion = "1.5.6"
}
kotlinOptions {
jvmTarget = "17"
}
}
dependencies {
val composeBom = platform("androidx.compose:compose-bom:2024.10.01")
implementation(composeBom)
implementation("androidx.compose.ui:ui")
implementation("androidx.compose.material3:material3")
implementation("androidx.compose.ui:ui-tooling-preview")
debugImplementation("androidx.compose.ui:ui-tooling")
implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.8.0")
implementation("androidx.lifecycle:lifecycle-runtime-compose:2.8.0")
}2. 核心概念
2.1 Composable 函数
@Composable
fun Greeting(name: String) {
Text(text = "Hello, $name!")
}- 使用
@Composable注解 - 无返回值，直接描述 UI
- 小型函数可自由组合
2.2 状态管理与状态提升
@Composable
fun Counter() {
var count by remember { mutableStateOf(0) }
Column {
Text("Count: $count")
Button(onClick = { count++ }) {
Text("Increment")
}
}
}状态提升：将状态与事件回调上移到父组件，提升复用性和可测试性。
2.3 重组（Recomposition）
- 当状态变化时，Compose 会重跑相关的可组合函数
- 具备跳过（skip）与重用（reuse）机制
- 避免在组合阶段执行昂贵计算，必要时使用
remember/derivedStateOf
@Composable
fun SortedContacts(contacts: List
<Contact>, comparator: Comparator<Contact>) {
val sorted = remember(contacts, comparator) {
contacts.sortedWith(comparator)
}
LazyColumn {
items(sorted, key = { it.id }) { contact ->
ContactRow(contact)
}
}
}2.4 布局与 Modifier
- 常用布局：
Column、Row、Box、LazyColumn、LazyRow、LazyVerticalGrid - Modifier 负责大小、位置、背景、交互等
@Composable
fun ProfileCard(modifier: Modifier = Modifier) {
Row(
modifier = modifier
.fillMaxWidth()
.clip(RoundedCornerShape(12.dp))
.background(MaterialTheme.colorScheme.surfaceVariant)
.padding(16.dp),
verticalAlignment = Alignment.CenterVertically
) {
AsyncImage(
model = "https://example.com/avatar.jpg",
contentDescription = null,
modifier = Modifier.size(56.dp)
)
Spacer(Modifier.width(16.dp))
Column {
Text("Jane Doe", style = MaterialTheme.typography.titleMedium)
Text("Android Engineer", style = MaterialTheme.typography.bodySmall)
}
}
}3. 架构实践（MVVM + 单向数据流）
data class HomeUiState(
val isLoading: Boolean = false,
val items: List
<Item> = emptyList(),
val error: String? = null
)
@HiltViewModel
class HomeViewModel @Inject constructor(
private val repository: ItemRepository
) : ViewModel() {
private val _uiState = MutableStateFlow(HomeUiState())
val uiState: StateFlow
<HomeUiState> = _uiState.asStateFlow()
init { loadItems() }
private fun loadItems() {
viewModelScope.launch {
_uiState.update { it.copy(isLoading = true) }
repository.getItems()
.onSuccess { _uiState.update { it.copy(isLoading = false, items = it.items) } }
.onFailure { e ->
_uiState.update { it.copy(isLoading = false, error = e.message) }
}
}
}
}
@Composable
fun HomeRoute(viewModel: HomeViewModel = hiltViewModel()) {
val uiState by viewModel.uiState.collectAsState()
when {
uiState.isLoading -> LoadingScreen()
uiState.error != null -> ErrorScreen(uiState.error)
else -> ItemList(uiState.items)
}
}- StateFlow 优先：与协程深度集成，配合
collectAsState()使用 - 事件上行：UI 通过回调通知 ViewModel 执行业务逻辑
- State Holder 模式：将复杂状态逻辑封装在可组合范围内可记忆的对象中（
remember { TaskListState() }）
4. 性能优化要点
- 记忆化：使用
remember、rememberSaveable缓存昂贵结果 - 派生状态：
derivedStateOf生成依赖状态，减少重复计算 - 列表 key：
LazyListScope.items提供稳定 key 防止不必要重组 - 拆分组件：将 UI 分解为细粒度可组合函数
- Side-effect API：使用
LaunchedEffect、DisposableEffect处理副作用
@Composable
fun FilteredList(all: List
<Item>, keyword: String) {
val filtered by remember(keyword, all) {
derivedStateOf { all.filter { it.name.contains(keyword, true) } }
}
LazyColumn {
items(filtered, key = { it.id }) {
ItemRow(it)
}
}
}5. 测试策略
5.1 依赖配置
androidTestImplementation("androidx.compose.ui:ui-test-junit4")
debugImplementation("androidx.compose.ui:ui-test-manifest")5.2 示例
class CounterTest {
@get:Rule
val composeTestRule = createComposeRule()
@Test
fun counter_increments() {
composeTestRule.setContent { Counter() }
composeTestRule.onNodeWithText("Increment").performClick()
composeTestRule.onNodeWithText("Count: 1").assertIsDisplayed()
}
}建议为关键组件添加
Modifier.testTag("tag")以便精准定位。
6. 推荐学习路径
| 阶段 | 时间 | 目标 | 参考资源 |
|---|---|---|---|
| 基础入门 | 1-2 周 | Kotlin 语法、Composable 基础、状态与布局 | 官方文档、Compose Basics Codelab |
| 进阶实践 | 2-3 周 | Modifier、Lazy 列表、重组性能 | Compose Layouts Codelab、官方博客 |
| 架构模式 | 2-3 周 | MVVM、StateFlow、依赖注入、导航 | Now in Android、官方架构指南 |
| 高级主题 | 持续 | 动画、自定义布局、多屏适配、测试 | Google I/O 2024 分享、compose-samples |
7. 常见陷阱与建议
| ❌ 避免 | ✅ 推荐 |
|---|---|
| 在 Composable 中执行阻塞任务 | 使用 LaunchedEffect、rememberCoroutineScope |
直接暴露 MutableState |
使用不可变状态、状态提升 |
忽略 modifier 参数 |
每个组件都接受并传递 modifier |
使用 LiveData（新项目） |
统一使用 StateFlow / Flow |
| 忽视列表 key | 提供稳定 key，减少重组与跳帧 |
8. 官方与权威资源（2024-2026）
-
Jetpack Compose 官方文档（2025 更新）
https://developer.android.com/develop/ui/compose/documentation
系统覆盖 Compose 架构、状态、布局、性能与测试。 -
Compose Basics Codelab（2024.01）
https://developer.android.com/codelabs/jetpack-compose-basics
手把手构建首个 Compose 应用，适合入门。 -
Compose Layouts Codelab（2024.12）
https://developer.android.com/codelabs/jetpack-compose-layouts
深入理解布局与修饰符，包含实践练习。 -
Google I/O 2024：Scaling Across Screens with Compose
https://android-developers.googleblog.com/2024/05/scaling-across-screens-with-compose-google-io-24.html
讲解多屏幕适配策略与 Compose 大型应用经验。 -
Now in Android（官方示例应用）
https://github.com/android/nowinandroid
现代 Android 开发最佳实践的完整实现，包含 Compose + MVVM + Flow + Hilt。 -
Compose Samples（官方示例集合）
https://github.com/android/compose-samples
覆盖动画、布局、性能、测试等多种场景。 -
Jetpack Compose Playground（社区合辑）
https://foso.github.io/Jetpack-Compose-Playground/
汇集常见组件示例与技巧，便于快速查阅。
9. 开发工具与调试
- Android Studio Compose Preview：即时预览、实时编辑
- Layout Inspector（Compose 模式）：查看 UI 树、重组计数
- Compose Compiler Metrics：分析重组次数、跳过率
- Baseline Profiles：改善启动性能与流畅度
- Material 3 Catalog：参考最新 Material 组件样式
10. 下一步行动
- 配置最新 Android Studio + Kotlin 1.9+ 环境
- 跟随 Compose Basics & Layouts Codelab 完成实践
- 参考本文示例搭建 MVVM + StateFlow 架构
- 阅读 Now in Android / compose-samples 深化理解
- 将所学输出为实际项目，持续关注 2025-2026 官方更新
Compose 代表 Android UI 开发的主流方向。掌握状态驱动的声明式思维、结合现代架构与测试策略，才能构建可维护、高性能的应用。