Jetpack Compose
Jetpack Compose 是 Android 官方的现代声明式 UI 框架,用 Kotlin 编写界面,替代传统的 XML + View 体系。本文按三个阶段梳理学习路径与重点。
官方文档:Jetpack Compose 文档 | Android Developers
学习准备(前置知识)
- Kotlin 语言:熟悉协程、Flow、高阶函数、扩展函数、数据类、密封类等。
- Android 基础:了解 Activity、Fragment、ViewModel、Lifecycle 的基本概念。
- 声明式 UI 思维:可先对比传统 View 与 Compose 的写法差异,建立初步认知。
🧩 阶段一:快速入门
目标:能用 Composable 函数写出简单界面,理解组合与重组的基本概念。
| 学习内容 | 重点掌握 |
|---|---|
| 环境搭建 | 创建 Compose 项目,理解 setContent 入口 |
| 基础组件 | Text、Image、Button、TextField、Surface、Box 等 |
| Modifier | 链式调用与顺序、尺寸、内边距、背景、点击事件、裁剪、边框等 |
| 布局 | Row、Column、Box、Spacer、ConstraintLayout |
| 列表 | LazyColumn、LazyRow、items、item |
| 预览 | @Preview 多设备、多主题预览 |
| 状态入门 | remember、mutableStateOf,数据改变自动触发重组 |
| View 与 Compose 互操作 | AndroidView 嵌入传统 View,ComposeView 嵌入到 XML 布局 |
🧩 阶段二:核心知识与状态管理
目标:掌握 Compose 的状态提升、ViewModel 集成以及核心 API 的灵活运用。
| 学习内容 | 重点掌握 |
|---|---|
| 状态提升 | 无状态 Composable,状态提升原则,事件向上传递 |
| 组合与重组 | 重组作用域、key 控制复用、derivedStateOf 减少重组 |
| 副作用 API | LaunchedEffect、rememberCoroutineScope、DisposableEffect、SideEffect、produceState、snapshotFlow |
| 高级组件 | HorizontalPager、TabRow、Scaffold、BottomSheet 等 |
| 导航 | Navigation Compose:路由声明、参数传递、返回栈、嵌套图 |
| 主题系统 | MaterialTheme、自定义颜色/字体/形状、动态主题(Material You) |
| 手势与交互 | clickable、Modifier.pointerInput,拖动、缩放、长按等(复杂手势先了解概念) |
| ViewModel 集成 | viewModel()、StateFlow / LiveData 收集为 Compose State |
| CompositionLocal | CompositionLocalProvider 跨层级隐式传值 |
| MVI 架构 | State / Intent / Effect 的拆分,单向数据流,在 Compose 中的落地方式 |
🧩 阶段三:动画与自定义绘制
目标:掌握 Compose 的动画系统,能绘制自定义图形,提升用户体验。
| 学习内容 | 重点掌握 |
|---|---|
| 基础动画 | animate*AsState(大小、颜色、透明度等) |
| 过渡动画 | updateTransition、AnimatedVisibility、AnimatedContent |
| 页面切换动画 | 在 Navigation 中配置 enterTransition / exitTransition |
| 手势驱动动画 | animateTo、Animatable 配合手势使用 |
| 无限动画 | rememberInfiniteTransition |
| Canvas 绘图 | Canvas、drawLine、drawCircle、路径、渐变 |
| 自定义布局 | Layout composable,measure 与 place 实现高级布局 |
| 修饰符进阶 | 自定义 Modifier(drawBehind、drawWithContent 等) |
📌 附录:Modifier 常用 API 速查
提示:
Modifier的调用顺序会影响最终效果(例如padding和background谁先谁后表现完全不同)。
| 分类 | 常用 API | 用途 |
|---|---|---|
| 尺寸 | size、width、height、fillMaxWidth、fillMaxHeight、fillMaxSize、requiredSize、wrapContentSize | 设置宽高或填满父容器 |
| 间距 | padding、paddingFromBaseline、offset、absoluteOffset | 内边距与位置偏移 |
| 布局占比 | weight(仅限 Row / Column)、aspectRatio、zIndex | 按权重分配空间、固定宽高比、调整层叠顺序 |
| 背景与边框 | background、border、clip、shadow | 填充、描边、裁剪形状、阴影 |
| 交互 | clickable、combinedClickable、toggleable、selectable、pointerInput | 点击、长按、切换、选择以及自定义手势 |
| 滚动 | verticalScroll、horizontalScroll、scrollable、draggable | 让内容可滚动或拖动 |
| 对齐 | align(Box / Row / Column 作用域内)、alignByBaseline | 子项在父布局内的对齐方式 |
| 焦点 | focusable、focusRequester、onFocusChanged | 焦点管理(常用于 TextField、可访问性) |
| 绘制 | drawBehind、drawWithContent、drawWithCache、alpha、graphicsLayer | 自定义绘制与变换(旋转、缩放、透明度) |
| 语义/测试 | semantics、testTag、contentDescription | 可访问性标签与 UI 测试定位 |
| 输入法 | imePadding、navigationBarsPadding、statusBarsPadding、windowInsetsPadding | 适配系统栏与键盘(需 WindowInsets 支持) |