Jetpack Compose 完全开发手册：从入门到精通

前言

为了进行现代化的模板式开发，Google 在 2018 年推出了 Android Jetpack。如今，Android 应用市场中的大部分主流 APP 已经开始采用 Android Jetpack 组件集合。这些组件帮助我们处理大量重复代码的任务，简化复杂流程，减少 Bug 数量，让开发者能将更多精力投入到业务逻辑和用户体验的打造上。

使用此架构能带来的具体好处如下：

UI 和业务逻辑解耦：通过状态驱动 UI，逻辑清晰。
避免内存泄漏：有效管理生命周期组件。
提高可测试性：函数式编程风格便于单元测试。
提高稳定性：降低 Can not perform this action after onSaveInstanceState、WindowManager$BadTokenException、OOM 及 NullPointerException 等异常的发生概率。

这些优势让开发者能够更轻松开发出出色的 Android 应用，推动 Android 生态的快速发展。

第一章初识 Jetpack Compose

1. 为什么我们需要一个新的 UI 工具？

传统的 Android UI 开发基于 View 体系，采用命令式编程（Imperative Programming）。开发者需要手动创建视图、设置属性、监听事件并更新 UI。这种方式在复杂交互下容易导致代码冗余和维护困难。

Jetpack Compose 是 Google 推出的声明式 UI（Declarative UI）框架。它允许开发者定义 UI 应该是什么样子，而不是如何一步步构建它。当数据状态发生变化时，Compose 会自动重组（Recompose）受影响的 UI 部分，无需手动刷新。

2. Jetpack Compose 的着重点

加速开发：提供丰富的开箱即用 Material 组件，节省设计还原时间。
强大的 UI 工具：实时预览功能（Preview），所见即所得。
直观的 Kotlin API：基于 Kotlin 语言特性，语法简洁，类型安全。

3. Compose API 的原则

Compose 的设计遵循以下核心原则：

一切都是函数：UI 由 Kotlin 函数描述。
顶层函数（Top-level function）：组合函数通常作为顶层或成员函数存在。
组合优于继承：通过组合小组件构建复杂界面，而非继承 View 树。
信任单一来源（Single Source of Truth）：状态是 UI 的唯一真实来源。

4. 深入了解 Compose 架构

Compose 库分为三个主要模块：

Core：核心布局与基础组件。
Foundation：基础构建块，如滚动容器、动画支持。
Material：Material Design 风格的组件实现。

此外，还有插槽 API（Slots API）用于自定义组件结构。

第二章 Jetpack Compose 构建 Android UI

1. 环境准备与 Hello World

依赖配置

在 build.gradle.kts 中添加以下依赖：

android {
    // ...
    buildFeatures {
        compose = true
    }
    composeOptions {
        kotlinCompilerExtensionVersion = "1.5.1"
    }
}

dependencies {
    implementation("androidx.compose.ui:ui:1.5.1")
    implementation("androidx.compose.material3:material3:1.1.0")
    implementation("androidx.activity:activity-compose:1.7.2")
}

Hello World 示例

@Composable
fun Greeting(name: String) {
    Text(
        text = "Hello $name!",
        style = MaterialTheme.typography.headlineMedium
    )
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun App() {
    MaterialTheme {
        Scaffold {
            Padding(
                padding = it.calculateTopPadding()
            ) {
                Greeting("Android Developer")
            }
        }
    }
}

2. 深入详解 Compose | 优化 UI 构建

@Composable 注解

@Composable 标记一个函数为组合函数。调用该函数时，Compose 会执行其内部逻辑来生成 UI 元素。

重组（Recomposition）

当 Composable 函数内的状态变量发生变化时，Compose 会重新执行该函数及其调用的子函数，仅更新发生变化的部分，而非重建整个视图树。

封装与状态提升

将状态提升到父组件（State Hoisting）是推荐做法，使 UI 组件保持无状态，便于复用和测试。

3. 深入详解 Compose | 实现原理

Positional Memoization：位置记忆化，根据参数在调用栈中的位置缓存结果，优化性能。
存储参数：Compose 会记录函数的参数值，仅在参数变化时触发重组。

第三章 Jetpack Compose 实战演练

1. 倒计时器应用

数据结构与状态模式

使用 mutableStateOf 管理倒计时秒数。

var seconds by remember { mutableStateOf(60) }
var isRunning by remember { mutableStateOf(false) }

倒计时功能

结合 LaunchedEffect 实现定时器逻辑。

LaunchedEffect(isRunning) {
    if (isRunning && seconds > 0) {
        while (seconds > 0) {
            delay(1000L)
            seconds--
        }
    }
}

绘制时钟

使用 Canvas 或 Box 布局绘制圆形进度条，根据 seconds 计算旋转角度。

2. 玩安卓 App 实战

准备工作

引入 Retrofit 获取数据，使用 Coil 加载图片。

底部导航栏

使用 NavigationRail 或 BottomAppBar 实现页面切换。

管理状态

通过 ViewModel 管理列表数据和分页逻辑，确保配置变更（如屏幕旋转）后数据不丢失。

3. 天气应用

画页面与背景

使用 Box 叠加背景图和内容层。

画内容

利用 Column 垂直排列温度、湿度、风速等信息卡片。

4. 电影 App 快速打造

实现方案

首页：LazyColumn 展示海报网格。
详情页：全屏覆盖层，展示剧情简介。
播放页：集成 ExoPlayer 播放器。

不足与改进

初期版本可能缺乏复杂的动画过渡，后续可引入 AnimatedVisibility 增强体验。

第四章进阶主题

1. 导航系统

使用 Jetpack Navigation Compose 管理页面跳转。

NavHost(navController, startDestination = "home") {
    composable("home") { HomeScreen() }
    composable("detail/{id}") { backStackEntry ->
        val id = backStackEntry.arguments?.getString("id")
        DetailScreen(id!!)
    }
}

2. 协程与异步

Compose 天然支持 Kotlin 协程，结合 Flow 实现响应式数据流。

3. 性能优化

避免在 @Composable 中创建不必要的对象。
使用 derivedStateOf 优化计算密集型状态。
合理使用 remember 缓存计算结果。

结语

Jetpack Compose 代表了 Android UI 开发的未来方向。虽然学习曲线较陡，涉及渲染机制、布局算法等新概念，但一旦掌握，将极大提升开发效率与代码质量。希望本手册能帮助开发者快速上手，构建出优秀的现代化 Android 应用。

Jetpack Compose 完全开发手册：从入门到精通