Compose 学习路径思维导图

🗺️

学习路径总览

Compose 学习的五个阶段，建议按顺序循序渐进

Jetpack Compose 学习路径 │ ├── 📚 阶段一：基础入门 (6篇) │ ├── 声明式 UI 思想 │ ├── State 状态管理 │ ├── Side Effects 副作用 │ ├── CompositionLocal │ ├── Modifier 修饰符 │ └── Material3 主题 │ ├── 🏛️ 阶段二：架构集成 (10篇) │ ├── UDF 单向数据流 │ ├── ViewModel 集成 │ ├── Navigation 导航 │ ├── Hilt 依赖注入 │ ├── Room 数据库 │ ├── DataStore 存储 │ ├── Paging 3 分页 │ ├── Retrofit 网络 │ ├── Coroutines 协程 │ └── 测试指南 │ ├── 🎨 阶段三：UI 进阶 (12篇) │ ├── Custom Layout │ ├── Canvas 绘制 │ ├── 动画系统 │ ├── 动画进阶 │ ├── 手势处理 │ ├── 键盘处理 │ ├── 表单处理 │ ├── Text 样式 │ ├── BottomSheet │ ├── 列表进阶 │ ├── 深色模式 │ └── 图片加载 │ ├── 🔌 阶段四：系统集成 (10篇) │ ├── 权限处理 │ ├── 通知系统 │ ├── WorkManager │ ├── CameraX 相机 │ ├── Media3 视频 │ ├── View 互操作 │ ├── WebView 集成 │ ├── 无障碍开发 │ ├── 导航进阶 │ └── Multiplatform │ └── 🔬 阶段五：底层原理 (6篇) ├── Compiler 原理 ├── Snapshot 系统 ├── Stability 系统 ├── 性能深入分析 ├── 列表性能优化 └── 调试技巧

📦

核心概念详解

Compose 的核心概念和原理，理解这些是掌握 Compose 的关键

Compose 核心概念 │ ├── 🔄 状态管理 State │ ├── remember { mutableStateOf() } │ ├── rememberSaveable │ ├── derivedStateOf │ ├── collectAsState() │ └── State Hoisting 状态提升 │ ├── ⚡ 副作用 Side Effects │ ├── LaunchedEffect │ ├── DisposableEffect │ ├── SideEffect │ ├── rememberCoroutineScope │ └── rememberUpdatedState │ ├── 🔁 重组 Recomposition │ ├── Slot Table 槽表 │ ├── Gap Buffer 间隙缓冲 │ ├── Positional Memoization │ ├── $changed 参数 │ └── Skipping 跳过机制 │ ├── 📸 Snapshot 系统 │ ├── MutableSnapshot │ ├── 读写追踪 │ ├── 隔离与合并 │ └── 事务管理 │ └── 🎯 Stability 稳定性 ├── @Stable 注解 ├── @Immutable 注解 ├── Stability 推断规则 └── 稳定性报告

State 状态管理 Side Effects Compiler 原理 Snapshot 系统 Stability 系统

🎨

UI 构建体系

从 Modifier 到 Custom Layout，构建复杂 UI 的完整知识体系

Compose UI 构建 │ ├── 🔧 Modifier 修饰符 │ ├── 链式调用顺序 │ ├── size / padding / offset │ ├── clickable / pointerInput │ ├── graphicsLayer │ └── 自定义 Modifier │ ├── 📐 Custom Layout │ ├── Layout Composable │ ├── MeasurePolicy │ ├── Constraints 约束 │ ├── Intrinsic Measurements │ ├── SubcomposeLayout │ └── ParentDataModifier │ ├── 🖌️ Canvas 绘制 │ ├── DrawScope │ ├── Path 路径 │ ├── drawLine / drawCircle │ ├── drawPath / drawArc │ └── 自定义图表 │ ├── ✍️ Text 文本 │ ├── AnnotatedString │ ├── ClickableText │ ├── 文本选择 │ └── 自定义字体 │ └── 🎭 主题系统 ├── MaterialTheme ├── ColorScheme ├── Typography ├── Shapes └── Dynamic Colors

Modifier 深入 Custom Layout Canvas 绘制 Text 样式 Material3

✨

动画与交互

从简单动画到复杂手势，打造流畅的用户体验

动画与交互 │ ├── 🎬 基础动画 │ ├── animate*AsState │ ├── AnimatedVisibility │ ├── AnimatedContent │ ├── Crossfade │ └── animateContentSize │ ├── 🚀 进阶动画 │ ├── Transition API │ ├── updateTransition │ ├── 共享元素动画 │ ├── 无限动画 │ └── 物理动画 Spring │ ├── 👆 手势处理 │ ├── clickable / combinedClickable │ ├── draggable / swipeable │ ├── transformable (缩放旋转) │ ├── pointerInput │ └── 嵌套滚动 │ ├── ⌨️ 键盘处理 │ ├── WindowInsets.ime │ ├── 键盘可见性监听 │ ├── 焦点管理 │ └── 软键盘适配 │ └── 📝 表单处理 ├── TextField 状态 ├── 实时验证 ├── 错误提示 └── 复杂表单架构

动画指南动画进阶手势处理键盘处理表单处理

🏛️

架构与数据层

构建可维护、可测试的应用架构

架构与数据层 │ ├── 🔀 UDF 单向数据流 │ ├── State → UI │ ├── Event → ViewModel │ ├── UiState 封装 │ └── One-time Events │ ├── 📦 ViewModel │ ├── viewModel() 获取 │ ├── StateFlow 暴露状态 │ ├── SavedStateHandle │ └── hiltViewModel() │ ├── 💉 Hilt 依赖注入 │ ├── @HiltAndroidApp │ ├── @Inject constructor │ ├── @Module / @Provides │ └── 作用域 Scope │ ├── 💾 数据持久化 │ ├── Room + Flow │ ├── DataStore Preferences │ ├── Proto DataStore │ └── 数据库迁移 │ ├── 🌐 网络层 │ ├── Retrofit + Coroutines │ ├── 错误处理 │ ├── Loading 状态 │ └── Result 封装 │ └── 📄 分页加载 ├── PagingSource ├── collectAsLazyPagingItems ├── LoadState 处理 └── RemoteMediator

UDF 架构 ViewModel Hilt DI Room DataStore Retrofit Paging 3

🔌

系统集成

与 Android 系统能力和原生组件的集成

系统集成 │ ├── 🔐 权限与系统服务 │ ├── rememberLauncherForActivityResult │ ├── 权限请求流程 │ ├── 通知 NotificationChannel │ └── WorkManager 后台任务 │ ├── 📷 媒体能力 │ ├── CameraX 相机预览 │ ├── 拍照 / 录像 │ ├── Media3 ExoPlayer │ ├── 画中画 PiP │ └── Coil 图片加载 │ ├── 🔀 View 互操作 │ ├── AndroidView 嵌入 View │ ├── ComposeView 嵌入 Compose │ ├── ViewCompositionStrategy │ └── 状态同步 │ ├── 🌐 WebView │ ├── AndroidView 包装 │ ├── JavaScript 交互 │ ├── Cookie 管理 │ └── 文件选择 │ └── ♿ 无障碍 ├── Semantics API ├── contentDescription ├── TalkBack 支持 └── 焦点管理

权限处理通知 WorkManager CameraX Media3 View 互操作 WebView 无障碍