Compose 教学项目

张

张建站

2026/5/18 21:14:29

10分钟阅读

Compose 教学项目本文档汇总 MyFirstCompose 项目涉及的所有学习参考资料。Gitee 仓库项目地址点击查看官方文档资料链接Jetpack Compose 官方文档https://developer.android.com/develop/composeCompose API 参考https://developer.android.com/reference/kotlin/androidx.composeNavigation Composehttps://developer.android.com/develop/compose/navigationMaterial3 设计指南https://developer.android.com/develop/ui/views/components/material3项目依赖版本# 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 UiStateLoading/Success/Error 三状态统一处理Repository 模式数据来源统一管理网络/本地/缓存分层单向数据流用户操作 → ViewModel → UI 重组StateFlow collectAsState响应式状态观察关键技术点1. Composable 函数Composable标记 UI 构建函数Modifier配置布局/样式/交互Preview支持 Android Studio 实时预览2. ViewModelviewModel()委托创建自动关联生命周期viewModelScope.launch开启协程MutableStateFlow内部写StateFlow对外暴露3. Navigation ComposeNavHostcomposable注册页面navigate()跳转popBackStack()返回arguments声明路由参数4. 网络与数据suspend挂起函数用于协程RetrofitManager单例管理 RetrofitArticleRepository同时负责网络获取与内存缓存项目文件索引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-basicsCompose 中的动画https://developer.android.com/develop/ui/compose/animation/introduction?hlzh-cn官方 Navigation 样例https://developer.android.com/develop/ui/compose/navigationRetrofit 官方文档https://square.github.io/retrofit/Coil 图片加载https://coil-kt.github.io/coil/compose/学习路径建议第一阶段环境搭建 Compose 基础第一章项目概述与环境搭建第二章Compose入门—声明式UI编程第二阶段架构与状态管理第三章MVVM架构与ViewModel第七章状态管理实战与架构总结第三阶段导航与数据层第四章NavigationCompose页面导航第五章数据层—网络请求与Repository第四阶段UI 组件与实战第六章UI组件与Material3主题