Jetpack Compose 实战指南：声明式 UI 开发核心技巧详解

什么是 Jetpack Compose？

Jetpack Compose 是 Google 于 2021 年正式发布的 Android 原生 UI 开发工具包，基于 Kotlin 构建，采用声明式编程范式彻底革新了传统 View 体系的开发方式。不同于以往的 XML 布局 + Java/Kotlin 代码分离模式，Compose 让 UI 和逻辑融为一体，开发者只需描述"界面应该是什么样子"，框架自动处理 UI 更新。

Compose 的主要优势包括：

• 更少的代码量：声明式 API 大幅减少样板代码，同样功能只需传统方式 1/3 的代码

• 直观易懂：UI 逻辑集中在一处，便于阅读与维护

• 强大的工具支持：Android Studio 提供实时预览、交互式预览等能力

• 完全兼容：可与现有 View 体系混合使用，平滑迁移

核心概念：Composable 函数与重组

Compose 的基础是 @Composable 注解函数。任何带有该注解的函数都可以描述一段 UI，并被其他 Composable 函数调用。

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

@Composable
fun GreetingCard(name: String) {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp),
        elevation = CardDefaults.cardElevation(defaultElevation = 4.dp)
    ) {
        Greeting(name = name)
    }
}

当状态发生变化时，Compose 会自动触发重组（Recomposition）——只有依赖了变化状态的 Composable 才会重新执行，这使得更新非常高效。理解重组的边界和跳过条件是写好 Compose 代码的关键。

状态管理：remember、State 与 ViewModel

Compose 的状态管理是其核心之一。正确地管理状态可以让你的应用既正确又高效。

// 使用 remember 在重组间保持状态
@Composable
fun Counter() {
    var count by remember { mutableStateOf(0) }
    
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier.padding(16.dp)
    ) {
        Text(
            text = "当前计数：$count",
            style = MaterialTheme.typography.displaySmall
        )
        Spacer(modifier = Modifier.height(8.dp))
        Button(onClick = { count++ }) {
            Text("点击 +1")
        }
    }
}

// 配合 ViewModel 管理复杂状态
class MainViewModel : ViewModel() {
    private val _uiState = MutableStateFlow(MainUiState())
    val uiState: StateFlow<MainUiState> = _uiState.asStateFlow()
    
    fun increment() {
        _uiState.update { it.copy(count = it.count + 1) }
    }
}

@Composable
fun MainScreen(viewModel: MainViewModel = viewModel()) {
    val uiState by viewModel.uiState.collectAsState()
    
    Counter2(
        count = uiState.count,
        onIncrement = viewModel::increment
    )
}

状态提升（State Hoisting）是 Compose 的重要设计模式：将状态上移到调用方，让 Composable 函数成为无状态组件，从而提升复用性和可测试性。

性能优化：避免不必要的重组

性能问题往往源于过度重组。以下是几个常见的优化技巧：

• 使用 key()：在列表中为每个元素指定稳定的 key，帮助 Compose 识别哪些元素发生了变化

• 使用 derivedStateOf：当需要从多个状态派生出新状态时，使用 derivedStateOf 避免不必要的重组

• 避免在 Composable 中创建 lambda：每次重组都会创建新的 lambda 对象，应将其提取到外部或使用 remember 缓存

• 使用稳定类型：确保传入 Composable 的数据类型是稳定的（加 @Stable 或 @Immutable 注解）

// 使用 derivedStateOf 优化
@Composable
fun TodoList(todos: List<TodoItem>) {
    val completedCount by remember(todos) {
        derivedStateOf { todos.count { it.isCompleted } }
    }
    
    Text("已完成：$completedCount / ${todos.size}")
    
    LazyColumn {
        items(todos, key = { it.id }) { todo ->
            TodoItemRow(todo = todo)
        }
    }
}

实战：构建一个完整的列表页面

综合运用上述知识，来看一个完整的用户列表页面示例：

data class User(val id: Int, val name: String, val email: String)

@Composable
fun UserListScreen(viewModel: UserListViewModel = viewModel()) {
    val users by viewModel.users.collectAsState()
    val isLoading by viewModel.isLoading.collectAsState()
    
    Scaffold(
        topBar = {
            TopAppBar(title = { Text("用户列表") })
        }
    ) { paddingValues ->
        Box(modifier = Modifier
            .fillMaxSize()
            .padding(paddingValues)
        ) {
            if (isLoading) {
                CircularProgressIndicator(modifier = Modifier.align(Alignment.Center))
            } else {
                LazyColumn {
                    items(users, key = { it.id }) { user ->
                        UserItem(user = user, onClick = { viewModel.selectUser(user) })
                        HorizontalDivider()
                    }
                }
            }
        }
    }
}

@Composable
fun UserItem(user: User, onClick: () -> Unit) {
    ListItem(
        headlineContent = { Text(user.name) },
        supportingContent = { Text(user.email) },
        leadingContent = {
            Icon(Icons.Default.Person, contentDescription = null)
        },
        modifier = Modifier.clickable(onClick = onClick)
    )
}

这个示例展示了 Scaffold、LazyColumn、状态收集等常用模式，是日常开发中非常典型的页面结构。掌握这些后，你可以快速搭建出功能完整的 Android 界面。

Jetpack Compose 的学习曲线并不陡峭，但要真正用好它，需要理解其背后的状态驱动思想。建议在新项目中直接采用 Compose，或在旧项目中逐步迁移局部页面，积累实战经验后你会发现它真的让 Android 开发变得更有趣。