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

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 应用。