一、Compose 到底是什么？

Jetpack Compose 是 Google 推出的全新 UI 框架。它彻底抛弃了传统的 XML 布局方式。

说白了，你用 Kotlin 代码直接写界面。没有 findViewById，没有布局文件。

我第一次接触 Compose 时，心里也犯嘀咕：这玩意儿靠谱吗？

但用了两周后，我就回不去了。为什么？因为开发效率提升太明显了。

核心思想：Compose 是声明式 UI。你描述界面「应该长什么样」，框架负责「怎么画出来」。

传统方式叫「命令式」——你要一步步告诉系统：先创建 TextView，再设置文字，再添加到布局里。

Compose 的方式是：直接说「这里有个文本，内容是 Hello」。

你想想看，哪种更接近人类的思维方式？

二、@Composable 函数——一切界面的起点

在 Compose 里，所有界面元素都是函数。但这些函数有个特殊标记：@Composable。

@Composable
fun Greeting(name: String) {
    Text(text = "Hello, $name!")
}

这个注解告诉编译器：这个函数会生成 UI。它可以在其他 Composable 函数里被调用。

2.1 函数的特点

  • 没有返回值：它不返回 View 对象，而是直接描述 UI
  • 可组合：你可以把小函数拼成大函数
  • 可重执行：数据变化时，Compose 会重新调用函数

我在项目中遇到过一个问题：刚开始写 Compose 时，总想着「这个函数返回什么类型」。后来才意识到，你根本不需要关心返回值。你只需要关心「数据进来，UI 出去」。

个人习惯：我一般把 Composable 函数按功能拆分。一个函数只做一件事。比如一个函数负责标题，另一个负责列表。这样调试起来特别方便。

三、Modifier——控制外观和行为的瑞士军刀

Modifier 是 Compose 里最强大的概念之一。它用来装饰、修改你的 UI 组件。

@Composable
fun StyledText() {
    Text(
        text = "Hello Compose",
        modifier = Modifier
            .padding(16.dp)
            .background(Color.Blue)
            .clickable { /* 点击事件 */ }
    )
}

你可以把 Modifier 想象成一个链条。每个方法调用都会返回一个新的 Modifier，然后你可以继续链式调用。

3.1 常用 Modifier 一览

Modifier 作用 示例
padding 设置内边距 Modifier.padding(8.dp)
background 设置背景色 Modifier.background(Color.Red)
clickable 添加点击事件 Modifier.clickable { doSomething() }
size 设置宽高 Modifier.size(48.dp)
fillMaxWidth 撑满父容器宽度 Modifier.fillMaxWidth()

我曾经踩过的坑：Modifier 的顺序很重要！比如先 padding 再 background，和先 background 再 padding，效果完全不同。前者是「先留白再涂色」，后者是「先涂色再留白」。嗯，这个细节坑了我一下午。

四、状态管理——让 UI 活起来

静态的 UI 没什么用。真正的应用需要响应用户操作、网络数据变化。

Compose 的状态管理，核心就是一句话：状态变了，UI 自动更新。

4.1 最简单的状态：remember + mutableStateOf

@Composable
fun Counter() {
    var count by remember { mutableStateOf(0) }

    Button(onClick = { count++ }) {
        Text("点击次数: $count")
    }
}

这里 remember 保证状态在重组时不被重置。mutableStateOf 创建一个可观察的状态。

当 count 变化时，Compose 会自动找到依赖 count 的 UI 部分，只更新那部分。

4.2 状态提升

实际项目中，状态往往需要被多个组件共享。这时候就要把状态「提升」到共同的父组件里。

@Composable
fun Parent() {
    var text by remember { mutableStateOf("") }

    ChildInput(text = text, onTextChange = { text = it })
    ChildDisplay(text = text)
}

@Composable
fun ChildInput(text: String, onTextChange: (String) -> Unit) {
    TextField(value = text, onValueChange = onTextChange)
}

@Composable
fun ChildDisplay(text: String) {
    Text("你输入的是: $text")
}

这种模式叫「单向数据流」。状态向下传递，事件向上回调。

核心原则：谁拥有状态，谁修改状态。子组件只负责展示和通知。

五、知识体系总览

下面这张图，帮你理清 Compose 入门的核心脉络：

Jetpack Compose @Composable 函数 Modifier 链 状态管理 无返回值 可组合嵌套 链式调用 顺序敏感 remember 状态提升 声明式 UI：描述「是什么」，而非「怎么做」

六、实战小技巧

最后分享几个我自己的经验：

  • 善用预览：@Preview 注解可以让你在 Android Studio 里实时看到 UI 效果，不用跑模拟器
  • 少用 remember：只在需要的时候用。滥用会导致不必要的重组
  • Modifier 提取：如果一段 Modifier 链在多个地方重复，提取成一个变量或函数

我的建议：刚开始学 Compose，别急着看高级特性。先把 @Composable、Modifier、remember 这三个概念吃透。它们能解决 80% 的日常需求。

嗯，Compose 入门其实没那么难。关键是转变思维——从「怎么画」到「画什么」。一旦你习惯了这种声明式写法，再回头看 XML，你会觉得那简直是上个时代的产物。

公众号:蓝海资料掘金营，微信deep3321

← 上一章 📖 返回目录 下一章 →