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

本文将带你从零开始认识 MyFirstCompose 项目，了解其整体架构与技术选型。

1.1 项目简介

MyFirstCompose 是一个基于 Jetpack Compose 开发的入门级 Android 应用，采用 单 Activity + MVVM + Repository 架构模式。

学习目标：

理解 Compose 的声明式 UI 编程思想
掌握 MVVM 架构的数据流向
学会使用 Navigation Compose 进行页面跳转
了解网络请求与本地缓存的基本模式

项目功能：

页面	功能说明
首页	商品列表搜索、排序、轮播图
个人中心	用户信息展示、通知开关
详情页	商品详情查看

1.2 技术栈一览

kotlin 复制代码

// build.gradle.kts (app)
dependencies {
    // Compose BOM 管理版本
    implementation(platform(libs.androidx.compose.bom))
    implementation(libs.androidx.ui)
    implementation(libs.androidx.material3)
    
    // ViewModel + StateFlow
    implementation(libs.androidx.lifecycle.viewmodel.compose)
    
    // Navigation
    implementation("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 + StateFlow

1.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 核心依赖版本

toml 复制代码

# 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 24（Android 7.0）
编译 SDK： API 36

1.5 入口解析

kotlin 复制代码

// MainActivity.kt
class MainActivity : ComponentActivity() {
    override fun onCreate(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 编程