第一章：项目概述与环境搭建

第一章项目概述与环境搭建本文将带你从零开始认识 MyFirstCompose 项目了解其整体架构与技术选型。1.1 项目简介MyFirstCompose 是一个基于Jetpack Compose开发的入门级 Android 应用采用单 Activity MVVM Repository架构模式。学习目标理解 Compose 的声明式 UI 编程思想掌握 MVVM 架构的数据流向学会使用 Navigation Compose 进行页面跳转了解网络请求与本地缓存的基本模式项目功能页面功能说明首页商品列表搜索、排序、轮播图个人中心用户信息展示、通知开关详情页商品详情查看1.2 技术栈一览// build.gradle.kts (app)dependencies{// Compose BOM 管理版本implementation(platform(libs.androidx.compose.bom))implementation(libs.androidx.ui)implementation(libs.androidx.material3)// ViewModel StateFlowimplementation(libs.androidx.lifecycle.viewmodel.compose)// Navigationimplementation(androidx.navigation:navigation-compose:2.7.7)// 网络请求implementation(com.squareup.retrofit2:retrofit:2.9.0)implementation(com.squareup.retrofit2:converter-gson:2.9.0)// 图片加载implementation(io.coil-kt:coil-compose:2.6.0)// 协程implementation(org.jetbrains.kotlinx:kotlinx-coroutines-android:1.7.3)}类别技术选型UI 框架Jetpack Compose Material3架构模式MVVM Repository导航Navigation Compose 2.7.7网络Retrofit 2.9 Gson图片Coil 2.6异步Kotlin Coroutines StateFlow1.3 项目结构app/src/main/java/com/example/myfirstcompose/ ├── MainActivity.kt # 入口启动 NavHost ├── navigation/ │ ├── AppNavGraph.kt # 导航图 路由注册 │ └── AppRoutes.kt # 路由常量避免魔法字符串 ├── data/ │ ├── api/ │ │ ├── ApiService.kt # Retrofit 接口定义 │ │ └── RetrofitManager.kt # 单例 Retrofit 构建器 │ ├── model/ │ │ ├── ArticleBean.kt # 商品/文章数据模型 │ │ ├── ProductListResponse.kt │ │ └── ProfileUser.kt # 用户数据模型 │ └── repository/ │ ├── ArticleRepository.kt # 文章列表网络 内存缓存 │ └── ProfileRepository.kt # 用户本地示例数据 └── ui/ ├── component/ │ ├── ArticleItem.kt # 列表项卡片 │ ├── ArticleImage.kt # 图片组件预览占位 │ └── BannerView.kt # 轮播图 ├── page/ │ ├── home/ # 首页列表 搜索 排序 │ ├── profile/ # 个人中心用户信息 设置 │ └── detail/ # 详情页商品详情 └── theme/ ├── Theme.kt # Material3 主题 ├── Color.kt # 颜色定义 └── Type.kt # 字体样式1.4 核心依赖版本# gradle/libs.versions.toml [versions] agp 8.11.2 kotlin 2.0.21 composeBom 2024.09.00 lifecycleRuntimeKtx 2.10.0 navigationCompose 2.7.7 retrofit 2.9.0 coil 2.6.0 coroutines 1.7.3最低兼容API 24Android 7.0编译 SDKAPI 361.5 入口解析// MainActivity.ktclassMainActivity:ComponentActivity(){overridefunonCreate(savedInstanceState:Bundle?){super.onCreate(savedInstanceState)enableEdgeToEdge()setContent{AppNavGraph()// 整个应用只有一个 Composable 入口}}}要点Compose 应用不需要 XML 布局所有 UI 都是用 Kotlin 代码声明的。1.6 总结项目采用单 Activity 多页面架构通过 Navigation Compose 管理页面流转数据层使用 Repository 模式网络请求与本地缓存分离三个页面首页/个人中心/详情均采用相同的 MVVM sealed UiState 模式技术栈简洁适合 Compose 入门学习下一章我们将学习 第二章Compose 入门 — 声明式 UI 编程