Jetpack Compose

这一课你将能做到

1. 用 @Composable 函数构建声明式 UI，理解重组（Recomposition）的触发机制
2. 使用 remember、mutableStateOf、StateFlow 管理 UI 状态，区分 Stateless 与 Stateful 组件
3. 用 LazyColumn/LazyRow 构建高性能列表，实现 Navigation Compose 页面导航

为什么要学

Jetpack Compose 是 Android UI 的未来，Google 已停止对传统 View 体系的大规模投入。Compose 用 Kotlin 代码替代 XML，用状态驱动替代命令式调用，与 React 的函数组件 + Hooks 思维几乎同构。对于 Web 前端背景的开发者，这是最低成本的迁移路径。

人话：Compose 就是「Android 版的 React」。@Composable 函数 ≈ React 组件，remember ≈ useState，LaunchedEffect ≈ useEffect，LazyColumn ≈ react-window。你不需要学新的心智模型，只需要学新的 API 名字。

面试中，「Compose 重组原理」、「State 管理」、「与 View 的互操作」是高频考点。

先建立图像

传统 View 体系（命令式）：
┌─────────────┐     findViewById      ┌─────────────┐
│   Activity  │ ────────────────────→ │   TextView   │
│             │     setText("Hello")  │   (实例)     │
└─────────────┘                       └─────────────┘
       ↑ 手动同步状态，容易遗漏

Compose 体系（声明式）：
┌─────────────┐     状态变化自动重组     ┌─────────────┐
│  ViewModel  │ ────────────────────→ │  Compose 树  │
│  (StateFlow)│     框架自动 diff      │  (描述)      │
└─────────────┘                       └─────────────┘
       ↑ 状态唯一来源，UI 是状态的函数

跟着做

步骤 1：第一个 Compose 页面

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            CodeRoadMapTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    TrackListScreen()
                }
            }
        }
    }
}

@Composable
fun TrackListScreen() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp)
    ) {
        Text(
            text = "学习路线",
            style = MaterialTheme.typography.headlineLarge,
            fontWeight = FontWeight.Bold
        )
        Spacer(modifier = Modifier.height(16.dp))
        TrackCard(
            title = "Android 基础",
            lessonCount = 12,
            isCompleted = true
        )
        Spacer(modifier = Modifier.height(8.dp))
        TrackCard(
            title = "Kotlin 入门",
            lessonCount = 10,
            isCompleted = false
        )
    }
}

@Composable
fun TrackCard(
    title: String,
    lessonCount: Int,
    isCompleted: Boolean,
    modifier: Modifier = Modifier
) {
    Card(
        modifier = modifier.fillMaxWidth(),
        shape = RoundedCornerShape(12.dp),
        elevation = CardDefaults.cardElevation(defaultElevation = 4.dp)
    ) {
        Row(
            modifier = Modifier
                .padding(16.dp)
                .fillMaxWidth(),
            verticalAlignment = Alignment.CenterVertically
        ) {
            Icon(
                imageVector = if (isCompleted) Icons.Filled.CheckCircle else Icons.Outlined.Circle,
                contentDescription = null,
                tint = if (isCompleted) MaterialTheme.colorScheme.primary else MaterialTheme.colorScheme.outline
            )
            Spacer(modifier = Modifier.width(12.dp))
            Column {
                Text(
                    text = title,
                    style = MaterialTheme.typography.titleMedium,
                    fontWeight = FontWeight.Bold
                )
                Text(
                    text = "$lessonCount 节课",
                    style = MaterialTheme.typography.bodyMedium,
                    color = MaterialTheme.colorScheme.onSurfaceVariant
                )
            }
        }
    }
}