Skip to content

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 入口
基础组件TextImageButtonTextFieldSurfaceBox
Modifier链式调用与顺序、尺寸、内边距、背景、点击事件、裁剪、边框等
布局RowColumnBoxSpacerConstraintLayout
列表LazyColumnLazyRowitemsitem
预览@Preview 多设备、多主题预览
状态入门remembermutableStateOf,数据改变自动触发重组
View 与 Compose 互操作AndroidView 嵌入传统 View,ComposeView 嵌入到 XML 布局

🧩 阶段二:核心知识与状态管理

目标:掌握 Compose 的状态提升、ViewModel 集成以及核心 API 的灵活运用。

学习内容重点掌握
状态提升无状态 Composable,状态提升原则,事件向上传递
组合与重组重组作用域、key 控制复用、derivedStateOf 减少重组
副作用 APILaunchedEffectrememberCoroutineScopeDisposableEffectSideEffectproduceStatesnapshotFlow
高级组件HorizontalPagerTabRowScaffoldBottomSheet
导航Navigation Compose:路由声明、参数传递、返回栈、嵌套图
主题系统MaterialTheme、自定义颜色/字体/形状、动态主题(Material You)
手势与交互clickableModifier.pointerInput,拖动、缩放、长按等(复杂手势先了解概念)
ViewModel 集成viewModel()StateFlow / LiveData 收集为 Compose State
CompositionLocalCompositionLocalProvider 跨层级隐式传值
MVI 架构State / Intent / Effect 的拆分,单向数据流,在 Compose 中的落地方式

🧩 阶段三:动画与自定义绘制

目标:掌握 Compose 的动画系统,能绘制自定义图形,提升用户体验。

学习内容重点掌握
基础动画animate*AsState(大小、颜色、透明度等)
过渡动画updateTransitionAnimatedVisibilityAnimatedContent
页面切换动画在 Navigation 中配置 enterTransition / exitTransition
手势驱动动画animateToAnimatable 配合手势使用
无限动画rememberInfiniteTransition
Canvas 绘图CanvasdrawLinedrawCircle、路径、渐变
自定义布局Layout composable,measureplace 实现高级布局
修饰符进阶自定义 ModifierdrawBehinddrawWithContent 等)

📌 附录:Modifier 常用 API 速查

提示:Modifier 的调用顺序会影响最终效果(例如 paddingbackground 谁先谁后表现完全不同)。

分类常用 API用途
尺寸sizewidthheightfillMaxWidthfillMaxHeightfillMaxSizerequiredSizewrapContentSize设置宽高或填满父容器
间距paddingpaddingFromBaselineoffsetabsoluteOffset内边距与位置偏移
布局占比weight(仅限 Row / Column)、aspectRatiozIndex按权重分配空间、固定宽高比、调整层叠顺序
背景与边框backgroundborderclipshadow填充、描边、裁剪形状、阴影
交互clickablecombinedClickabletoggleableselectablepointerInput点击、长按、切换、选择以及自定义手势
滚动verticalScrollhorizontalScrollscrollabledraggable让内容可滚动或拖动
对齐alignBox / Row / Column 作用域内)、alignByBaseline子项在父布局内的对齐方式
焦点focusablefocusRequesteronFocusChanged焦点管理(常用于 TextField、可访问性)
绘制drawBehinddrawWithContentdrawWithCachealphagraphicsLayer自定义绘制与变换(旋转、缩放、透明度)
语义/测试semanticstestTagcontentDescription可访问性标签与 UI 测试定位
输入法imePaddingnavigationBarsPaddingstatusBarsPaddingwindowInsetsPadding适配系统栏与键盘(需 WindowInsets 支持)