新-Jetpack Compose：从上手到进阶再到高手-牛翰网

引言：为什么选择 Jetpack Compose？

有讠果：pan.baidu.com/s/114u2TnQG6Sqm9DlNJhQLQQ?pwd=3ypv

Jetpack Compose 是 Android 现代 UI 工具包的未来。它采用声明式编程范式，与你熟悉的传统 Android 命令式 View 系统截然不同。

命令式 UI： 你通过 findViewById 获取视图引用，然后调用 setter 方法（如 setText, setVisibility）来改变其状态。你需要“命令”视图如何更新。
声明式 UI： 你描述 UI 应该是什么样子（基于当前状态），而不是如何转换到该状态。当状态变化时，整个相关的 UI 部分会自动、高效地重组。

这种范式的转变带来了巨大的好处：更少的代码、更直观的开发、强大的工具支持以及更安全的状态管理。

第一阶段：上手 – 构建你的第一个 Composable 界面

这个阶段的目标是熟悉 Compose 的基本语法和开发环境，能够构建简单的静态或基础交互界面。

核心概念：

Composable 函数：
- 所有 UI 组件都是通过带有 @Composable 注解的函数定义的。
- 函数名大写，用于描述 UI 元素。
kotlin
```
@Composable
fun Greeting(name: String) {
    Text(text = "Hello, $name!")
}
```

基础布局：

Column：垂直排列子项。
Row：水平排列子项。
Box：堆叠子项，常用于重叠元素或绝对定位。

@Composable
fun ProfileCard() {
    Row {
        Image(bitmap = ...， contentDescription = "Avatar")
        Column {
            Text("John Doe")
            Text("Last seen recently")
        }
    }
}

Material Design 组件：
- Compose 深度集成了 Material Design。
- 学会使用 Button, TextField, TopAppBar, Scaffold 等组件来快速构建标准界面。

状态管理（基础）：

mutableStateOf()：这是 Compose 响应式的核心。
当状态值改变时，所有读取了该状态的 Composable 函数会自动重组。

@Composable
fun Counter() {
    val count = remember { mutableStateOf(0) } // 状态
    Button(onClick = { count.value++ }) {
        Text("I've been clicked ${count.value} times")
    }
}

remember：确保在重组过程中状态不会丢失。

学习路径：

官方 Codelab： 完成 Jetpack Compose 基础知识 Codelab。这是最佳起点。
实践： 尝试用 Compose 重写一个你熟悉的简单界面，例如一个待办事项列表的静态部分。

第二阶段：进阶 – 构建健壮、动态的应用程序

这个阶段你将学习如何构建复杂的、数据驱动的真实应用，并掌握性能优化的关键。

核心概念：

状态提升：

将状态从低层 Composable 移动到其调用者，使组件变为无状态。这是构建可复用、可测试组件的关键模式。
状态变为参数 value: T，事件通过 lambda 回调 onValueChange: (T) -> Unit 上报。

// 无状态的 Counter
@Composable
fun Counter(count: Int, onIncrement: () -> Unit) {
    Button(onClick = onIncrement) {
        Text("Count: $count")
    }
}

// 状态提升到父级
@Composable
fun ParentScreen() {
    val (count, setCount) = remember { mutableStateOf(0) }
    Counter(count = count, onIncrement = { setCount(count + 1) })
}

架构：ViewModel + Compose：

使用 viewModel() 函数在 Compose 中获取 ViewModel。
ViewModel 持有和管理 UI 状态（通常是 StateFlow 或 LiveData），并将其暴露给 Composable。
使用 collectAsState() 或 observeAsState() 将 Flow/LiveData 转换为 Compose 状态。

@Composable
fun MyScreen(viewModel: MyViewModel = viewModel()) {
    val uiState by viewModel.uiState.collectAsState()

    when (uiState) {
        is Loading -> ShowProgressBar()
        is Success -> ShowData((uiState as Success).data)
        is Error -> ShowError()
    }
}

主题与样式：
- 使用 MaterialTheme 来统一颜色、字体和形状。
- 自定义你的设计系统，实现深色/浅色主题的轻松切换。

列表与性能：

使用 LazyColumn 和 LazyRow 来高效地渲染长列表。它们只会组合和布局可见项。
关键： 使用 key 参数帮助 Compose 在数据变化时高效地识别和重组项。

LazyColumn {
    items(
        items = messages,
        key = { message -> message.id } // 关键！
    ) { message ->
        MessageRow(message)
    }
}

副作用：
- 重组是“纯”的，但应用有时需要执行外部操作（如发起网络请求、订阅监听），这就是副作用。
- 使用正确的副作用 API，如 LaunchedEffect（在组合中启动协程）、DisposableEffect（需要清理的资源）。

学习路径：

官方指南： 深入学习状态和架构文档。
实践： 构建一个完整的应用，例如一个从网络 API 获取数据并显示的新闻阅读器或天气应用。在其中实践 ViewModel、状态提升和列表。

第三阶段：高手 – 深入底层，游刃有余

成为高手意味着你不仅能解决问题，还能理解其原理，并处理极端复杂的场景。

核心概念：

自定义布局与图形：

当内置布局无法满足需求时，你需要使用 Layout Composable 从头开始测量和放置子项。
使用 Canvas 和 DrawScope 进行自定义绘制，创建独特的图形和动画。

@Composable
fun CircleLayout(...) {
    Layout(...) { measurables, constraints ->
        // 测量子项
        val placeables = measurables.map { it.measure(constraints) }
        // 决定自身大小
        layout(width, height) {
            // 放置子项
            placeables.forEach { it.placeRelative(x, y) }
        }
    }
}

高级动画：
- animate*AsState： 用于简单的属性动画。
- updateTransition： 管理多个值同时变化的复杂动画。
- rememberInfiniteTransition： 创建无限循环的动画。
- AnimatedVisibility 和 AnimatedContent： 处理进入/退出和内容变化的动画。
- 深入理解 AnimationSpec（如 spring, tween）来精确控制动画曲线。
Compose 运行时原理：
- 重组（Recomposition）：理解 Compose 的智能重组机制。它只会重组状态发生变化的 Composable，而不是整个屏幕。
- 稳定性（Stability）：理解 @Stable 注解和 @Immutable 注解，以及它们如何影响重组。使用 @Stable 标记你的模型类，可以帮助 Compose 编译器做出更优的重组决策。
- 位置记忆（Positional Memoization）：理解 Compose 如何在重组过程中通过调用点在源代码中的位置来记住状态和副作用。

性能分析与调试：

熟练使用 Compose Layout Inspector 来可视化重组和渲染边界。
使用 重组计数 功能来检测不必要的重组，并优化你的代码。
理解 derivedStateOf：当你的状态是由其他状态计算衍生而来时，使用它来避免不必要的计算和重组。

val listState = rememberLazyListState()
val showButton by remember {
    derivedStateOf {
        listState.firstVisibleItemIndex > 0
    }
}
// 只有当 showButton 的实际布尔值改变时，下面的 IF 语句才会重组
if (showButton) {
    FloatingActionButton(...)
}

与旧版 View 系统互操作：
- 在现有项目中逐步引入 Compose，使用 AndroidView 在 Compose 中嵌入传统 View。
- 使用 ComposeView 在 XML 布局或 Fragment 中嵌入 Compose 界面。

学习路径：

深入研究： 阅读 Compose 团队的 “深入探讨 Compose” 系列文章。
观看演讲： 观看 Google I/O 上关于 Compose 性能、动画和内部原理的深度演讲。
实践：
- 实现一个具有复杂手势交互和自定义动画的 UI 组件。
- 尝试为你团队的 Design System 构建一套高度定制化和可复用的 Composable 组件库。
- 分析并优化一个复杂界面的性能，将重组次数降到最低。

总结

阶段	核心目标	关键技能
上手	理解声明式思维，构建简单 UI	Composable 函数、基础布局、Material 组件、基础状态
进阶	构建生产级应用	状态提升、ViewModel 集成、主题、列表、副作用
高手	解决复杂问题，极致优化	自定义布局、高级动画、理解运行时、性能调优