分类: Jetpack Compose

  • 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 可以共存于同一个项目中。

沪ICP备2026038898号-1