Jetpack Compose 入门：从 View 到 Composable 的思维转变

什么是 Jetpack Compose？

Jetpack Compose 是 Google 推出的现代化 Android UI 工具包，采用声明式编程范式。与传统的 XML + View 不同，Compose 让你用 Kotlin 代码直接描述 UI 应该是什么样子。

声明式 vs 命令式

传统 View 系统是命令式的：你先创建一个 TextView，然后在某个时机调用 setText() 来修改它。这个过程中状态和 UI 是分离的，你需要手动保持同步。

Compose 是声明式的：你只需描述 UI 在给定状态下应该是什么样子。当状态变化时，框架会自动重新渲染受影响的部分。

// 传统 View 方式
val textView = findViewById(R.id.greeting)
textView.text = "Hello"
// 之后某处...
textView.text = "World"

// Compose 方式
@Composable
fun Greeting(name: String) {
    Text(text = "Hello ")
}

核心概念

Composable 函数

带有 @Composable 注解的普通 Kotlin 函数。它接收参数，描述界面的一部分：

@Composable
fun UserCard(user: User) {
    Column(modifier = Modifier.padding(16.dp)) {
        Text(text = user.name, style = MaterialTheme.typography.h6)
        Text(text = user.email, style = MaterialTheme.typography.body2)
    }
}

状态管理

Compose 使用 remember 和 mutableStateOf 来管理组件内部状态：

@Composable
fun Counter() {
    var count by remember { mutableStateOf(0) }
    Button(onClick = { count++ }) {
        Text("Clicked  times")
    }
}

Modifier

Modifier 用于修饰 Composable 的外观和行为——大小、边距、点击事件等：

Text(
    text = "Hello",
    modifier = Modifier
        .padding(8.dp)
        .clickable { /* do something */ }
        .background(Color.Blue)
)

从 View 迁移的要点

1. 布局：LinearLayout → Column/Row，FrameLayout → Box，ConstraintLayout 仍可用
2. 列表：RecyclerView → LazyColumn / LazyRow
3. 导航：Fragment + NavGraph → Compose Navigation
4. 数据绑定：不再需要，状态驱动 UI 自动更新

建议

不要一次性重写整个项目。从新功能或独立页面开始尝试 Compose，逐步迁移。Compose 与 View 可以共存于同一个项目中。