Compose 教学项目

本文档汇总 MyFirstCompose 项目涉及的所有学习参考资料。

Gitee 仓库项目地址： 点击查看

官方文档

资料	链接
Jetpack Compose 官方文档	https://developer.android.com/develop/compose
Compose API 参考	https://developer.android.com/reference/kotlin/androidx.compose
Navigation Compose	https://developer.android.com/develop/compose/navigation
Material3 设计指南	https://developer.android.com/develop/ui/views/components/material3

项目依赖版本

toml 复制代码

# gradle/libs.versions.toml
[versions]
agp = "8.11.2"
kotlin = "2.0.21"
composeBom = "2024.09.00"
lifecycleRuntimeKtx = "2.10.0"
activityCompose = "1.13.0"
lifecycleViewmodelCompose = "2.10.0"
navigationCompose = "2.7.7"
retrofit = "2.9.0"
coil = "2.6.0"
coroutines = "1.7.3"

核心依赖：

androidx.compose.bom:compose-bom:2024.09.00 --- Compose 版本统一管理
androidx.navigation:navigation-compose:2.7.7 --- 导航
com.squareup.retrofit2:retrofit:2.9.0 --- 网络请求
io.coil-kt:coil-compose:2.6.0 --- 图片加载

架构设计参考

主题	说明
MVVM 架构	ViewModel 管理 UI 状态，Composable 只负责渲染
sealed UiState	Loading/Success/Error 三状态统一处理
Repository 模式	数据来源统一管理，网络/本地/缓存分层
单向数据流	用户操作 → ViewModel → UI 重组
StateFlow + collectAsState	响应式状态观察

关键技术点

1. Composable 函数

@Composable 标记 UI 构建函数
Modifier 配置布局/样式/交互
@Preview 支持 Android Studio 实时预览

2. ViewModel

viewModel() 委托创建，自动关联生命周期
viewModelScope.launch 开启协程
MutableStateFlow 内部写，StateFlow 对外暴露

NavHost + composable 注册页面
navigate() 跳转，popBackStack() 返回
arguments 声明路由参数

4. 网络与数据

suspend 挂起函数用于协程
RetrofitManager 单例管理 Retrofit
ArticleRepository 同时负责网络获取与内存缓存

项目文件索引

复制代码

app/src/main/java/com/example/myfirstcompose/
├── MainActivity.kt                    # 入口
├── navigation/
│   ├── AppNavGraph.kt                 # 导航图
│   └── AppRoutes.kt                  # 路由常量
├── data/
│   ├── api/
│   │   ├── ApiService.kt             # Retrofit 接口
│   │   └── RetrofitManager.kt       # Retrofit 单例
│   ├── model/
│   │   ├── ArticleBean.kt           # 商品数据模型
│   │   ├── ProductListResponse.kt   # API 响应
│   │   └── ProfileUser.kt           # 用户数据模型
│   └── repository/
│       ├── ArticleRepository.kt     # 文章仓库（网络+缓存）
│       └── ProfileRepository.kt     # 用户仓库（本地）
├── ui/
│   ├── component/
│   │   ├── ArticleItem.kt           # 列表项卡片
│   │   ├── ArticleImage.kt          # 图片组件
│   │   ├── BannerView.kt            # 轮播图
│   │   └── ProfileAvatar.kt         # 头像组件
│   ├── page/
│   │   ├── home/                    # 首页模块
│   │   ├── profile/                # 个人中心模块
│   │   └── detail/                 # 详情页模块
│   └── theme/                       # Material3 主题

延伸学习资源

资源	链接
Google Codelabs - Compose 基础	https://developer.android.com/codelabs/jetpack-compose-basics
Compose 中的动画	https://developer.android.com/develop/ui/compose/animation/introduction?hl=zh-cn
官方 Navigation 样例	https://developer.android.com/develop/ui/compose/navigation
Retrofit 官方文档	https://square.github.io/retrofit/
Coil 图片加载	https://coil-kt.github.io/coil/compose/