说实话，Ru果你现在还在用 XML 一点点去画布局，或者还在用 findViewById 这种老掉牙的方式去找控件，那你可Neng真的需要停下来喝杯咖啡，好好思考一下未来的路了。2021年 Google 正式把 Jetpack Compose 扶正，这不仅仅是一个新库的发布，geng像是一场 Android 开发界的“文艺复兴”。它标志着我们正式告别了命令式 UI 的繁琐，一头扎进了声明式 UI 的怀抱。

这系列文章，我不想写成那种枯燥的官方文档翻译。我的目标是带你真正从“只会写 Hello World”到“Neng撸出像样的复杂界面”。今天这篇，作为我们先不谈那些高深的状态管理，而是先把地基打牢。我们要搞清楚 Compose 到底是个什么鬼，以及怎么把环境搭起来让代码跑起来。

一、为什么我们需要 Compose？告别过去的痛

在开始敲代码之前，我们得先聊聊“为什么”。以前我们写 Android 界面是不是经常遇到这种抓狂的情况？

你想改一个简单的文本颜色，得先改 XML，然后去 Java/Kotlin 代码里 findViewById，再 setText，Zui后还得 setTextColor。Ru果界面稍微复杂点，RecyclerView 的适配器Neng写到你手软，geng别提那些乱七八糟的 ViewGroup 嵌套，性Neng差得一塌糊涂，维护起来简直是灾难。

这就是传统 View 系统 的痛点：你不仅要告诉程序“界面长什么样”，还得手把手教它“怎么去画”。一旦数据变了你又得手动去geng新 View。

而 Compose 的哲学完全不同。你只需要告诉程序“当前数据下界面应该长什么样”，剩下的绘制工作，交给 Compose 自己。数据变了？界面自动刷新。就这么简单。

让我们kan一段代码对比，感受一下这种“降维打击”：

// 以前的Zuo法
// XML 布局文件
<TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
// Kotlin 代码
val textView = findViewById<TextView>
textView.text = "Hello World"
textView.setTextColor
textView.setOnClickListener {
    // 处理点击
}

再kankan Compose 的写法，是不是感觉空气dou清新了？

// Compose 的Zuo法
@Composable
fun Greeting {
    Text(
        text = "Hello $name",
        color = Color.Blue,
        modifier = Modifier.clickable {
            // 处理点击
        }
    )
}

kan到了吗？布局和逻辑浑然一体，再也不用在两个文件之间反复横跳。代码量直接减少了一半不止，而且读起来就像读英语句子一样自然。

二、工欲善其事：环境搭建与配置

既然决定要学，那就别磨蹭。现在的 Android Studio 对 Compose 的支持Yi经相当成熟了。

1. 新建项目

打开你的 Android Studio，选择 New Project。在模板列表里你会kan到hen多带有 Compose 字样的模板。这里我们选Zui简单的 Empty Activity。

💡 小贴士在配置界面时确保勾选了 "Use Compose" 选项。虽然新版 IDE 默认就勾了但万一手滑没选，后面还得手动配一堆 Gradle 脚本，那可就太头大了。

2. kankan自动生成的配置

项目创建好后IDE 会自动帮我们生成一堆代码。我们不需要去记每一行配置，但至少得知道它们在哪。打开 build.gradle.kts ，你会kan到类似这样的配置：

android {
    buildFeatures {
        compose = true
    }
    composeOptions {
        kotlinCompilerExtensionVersion = "1.5.3" // 版本号可Neng会随时间变化
    }
    kotlinOptions {
        jvmTarget = "1.8"
    }
}
dependencies {
    // 引入 Compose BOM，统一管理版本
    val composeBom = platform
    implementation
    // 基础 UI 库
    implementation
    implementation
    // 预览工具
    implementation
    debugImplementation
    // Material Design 3 库
    implementation
    // 测试相关
    androidTestImplementation
}

Ru果你是在一个老项目里想尝试 Compose，那你就得手动把上面这些 buildFeatures 和 dependencies 拷贝进去。不过说实话，为了省事，新建个 Compose 项目练手可Neng是geng好的选择。

三、初窥门径：第一个 Compose 应用

配置搞定后我们来kankan MainActivity.kt。IDE Yi经帮我们写好了一个“Hello World”。

class MainActivity : ComponentActivity {
    override fun onCreate {
        super.onCreate
        setContent {
            ComposeDemoTheme {
                Surface(
                    modifier = Modifier.fillMaxSize,
                    color = MaterialTheme.colorScheme.background
                ) {
                    Greeting
                }
            }
        }
    }
}
@Composable
fun Greeting {
    Text(
        text = "Hello $name!",
        modifier = modifier
    )
}
@Preview
@Composable
fun GreetingPreview {
    ComposeDemoTheme {
        Greeting
    }
}

这里有几个关键点值得注意：

1. setContent： 这就像以前我们在 onCreate 里调用 setContentView 一样。它是 Compose 的入口，告诉 Activity：接下来的 UI 内容dou由这里面的 Composable 函数来定义。

2. @Composable 注解： 这是 Compose 的灵魂。任何用这个注解标记的函数，dou是一个 UI 组件。你Ke以把它想象成乐高积木，小积木拼成大积木，Zui后拼成整个城堡。

3. 预览功Neng： 注意kan GreetingPreview 函数。有了 @Preview 注解，你根本不需要运行模拟器，直接在 IDE 右侧的预览窗口就Nengkan到 UI 效果。这对于开发效率的提升简直是毁灭性的。

点击那个绿色的 Run 按钮，或者直接点预览窗口上角的刷新，你就Neng在屏幕上kan到 "Hello Android!" 了。恭喜你，Yi经迈出了第一步！

四、核心基石：Composable 函数与 Modifier

在 Compose 的世界里一切皆函数。我们来kankan怎么写好自己的组件。

1. 命名规范

虽然 Kotlin 对命名没强制要求，但在 Compose 里我们约定俗成地使用大驼峰命名法。而且，函数名Zui好是名词，描述它是个什么东西，而不是动词。

// ✅ 推荐写法
@Composable
fun UserProfile { }
@Composable
fun LoginButton { }
// ❌ 不推荐写法
@Composable
fun userProfile { }  // 小写开头，容易混淆
@Composable
fun showButton { }   // 动词开头，不像个组件名

2. 参数传递：数据驱动 UI

Composable 函数Ke以接受参数，这正是“数据驱动”的体现。你传进去什么数据，界面就显示什么样子。

@Composable
fun Greeting {
    Text
}
// 使用时
Greeting

3. Modifier：万金油修饰符

Modifier 是你在 Compose 里打交道Zui多的东西之一。它用来修饰组件的尺寸、边距、背景、点击事件等等。它就像是一个链式调用的工具箱，你想给 UI 加什么效果，就往后面链式调用什么方法。

@Composable
fun StyledText {
    Text(
        text = "Hello Compose",
        modifier = Modifier
            .padding           // 内边距
            .fillMaxWidth           // 宽度填满父容器
            .height            // 高度固定
            .background // 背景色
            .clickable {              // 添加点击事件
                // 这里处理点击逻辑
            }
    )
}

记住Modifier 的顺序有时候hen重要！比如先 padding 再 background，和先 background 再 padding，出来的视觉效果可Neng完全不同。

五、Material Design 3 组件初探

Google 推出的 Material Design 3和 Compose 简直是天生一对。M3 提供了一堆现成的好kan组件，我们直接拿来用就行，省去了大量自定义的时间。

1. Text

文本是Zui基础的 UI 元素。Compose 的 Text 组件非常灵活。

@Composable
fun TextDemo {
    Column) {
        // Zui基础的文本
        Text
        // 带样式的文本
        Text(
            text = "Styled Text",
            fontSize = 20.sp,
            fontWeight = FontWeight.Bold,
            color = Color.Blue
        )
        // 多行文本处理
        Text(
            text = "这是一段hen长的文本，Ru果不处理可Neng会显示不全，但是加上 overflow 属性就Neng显示省略号了。",
            maxLines = 2,
            overflow = TextOverflow.Ellipsis
        )
    }
}

2. Button

按钮的交互必不可少。M3 里提供了好几种按钮样式。

@Composable
fun ButtonDemo {
    Column(
        modifier = Modifier.padding,
        verticalArrangement = Arrangement.spacedBy
    ) {
        // 标准按钮
        Button {
            Text
        }
        // 带图标的按钮
        Button {
            Icon
            Spacer)
            Text
        }
        // 描边按钮
        OutlinedButton {
            Text
        }
        // 文本按钮
        TextButton {
            Text
        }
    }
}

3. Card

卡片用来包裹一组相关信息，让界面geng有层次感。

@Composable
fun CardDemo {
    Card(
        modifier = Modifier
            .fillMaxWidth
            .padding,
        elevation = CardDefaults.cardElevation
    ) {
        Column) {
            Text(
                text = "卡片标题",
                style = MaterialTheme.typography.titleLarge
            )
            Spacer)
            Text(
                text = "这是卡片的内容描述文本，通常用来放一些简介或者辅助信息。",
                style = MaterialTheme.typography.bodyMedium
            )
        }
    }
}

4. TextField

输入框是用户交互的重灾区。Compose 的 TextField 配合 remember 和状态管理，用起来非常顺手。

@Composable
fun TextFieldDemo {
    var text by remember { mutableStateOf }
    OutlinedTextField(
        value = text,
        onValueChange = { text = it },
        label = { Text },
        placeholder = { Text },
        leadingIcon = {
            Icon
        },
        modifier = Modifier.fillMaxWidth
    )
}

六、布局之道：Column、Row 与 Box

我们用 LinearLayoutRelativeLayoutConstraintLayout。在 Compose 里Zui常用的就这三个：ColumnRow和 Box。

1. Column

相当于 LinearLayout 。

@Composable
fun ColumnDemo {
    Column(
        modifier = Modifier.fillMaxSize,
        verticalArrangement = Arrangement.Center,  // 垂直方向居中
        horizontalAlignment = Alignment.CenterHorizontally  // 水平方向居中
    ) {
        Text
        Text
        Text
    }
}

2. Row

相当于 LinearLayout 。

@Composable
fun RowDemo {
    Row(
        modifier = Modifier.fillMaxWidth,
        horizontalArrangement = Arrangement.SpaceEvenly,  // 水平均匀分布
        verticalAlignment = Alignment.CenterVertically  // 垂直居中
    ) {
        Text
        Text
        Text
    }
}

3. Box

相当于 FrameLayout，Ke以用来Zuo背景覆盖、加载进度条等。

@Composable
fun BoxDemo {
    Box(
        modifier = Modifier.fillMaxSize,
        contentAlignment = Alignment.Center
    ) {
        // 底层显示一个进度圈
        CircularProgressIndicator
        // 上层显示文字
        Text
    }
}

七、实战演练：撸一个登录界面

光说不练假把式。我们把刚才学的组件组合起来写一个常见的登录界面。这Neng让你对 Compose 的“组合”概念有geng深的理解。

@Composable
fun LoginScreen {
    var username by remember { mutableStateOf }
    var password by remember { mutableStateOf }
    Column(
        modifier = Modifier
            .fillMaxSize
            .padding,
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        // 1. 标题
        Text(
            text = "欢迎登录",
            style = MaterialTheme.typography.headlineLarge,
            modifier = Modifier.padding
        )
        // 2. 用户名输入框
        OutlinedTextField(
            value = username,
            onValueChange = { username = it },
            label = { Text },
            leadingIcon = {
                Icon
            },
            modifier = Modifier.fillMaxWidth
        )
        Spacer)
        // 3. 密码输入框
        OutlinedTextField(
            value = password,
            onValueChange = { password = it },
            label = { Text },
            leadingIcon = {
                Icon
            },
            visualTransformation = PasswordVisualTransformation,
            modifier = Modifier.fillMaxWidth
        )
        Spacer)
        // 4. 登录按钮
        Button(
            onClick = { /* TODO: 实现登录逻辑 */ },
            modifier = Modifier.fillMaxWidth
        ) {
            Text
        }
        Spacer)
        // 5. 注册链接
        TextButton {
            Text
        }
    }
}
// 预览效果
@Preview
@Composable
fun LoginScreenPreview {
    MaterialTheme {
        LoginScreen
    }
}

kan，短短几十行代码，一个包含输入、反馈、交互的登录界面就完成了。Ru果用 XML 写，你至少得建两个文件，写好几行 findViewById。

八、进阶技巧：强大的预览功Neng

前面提到了 @Preview，这里再深入一下。预览不仅仅是kan个大概，它还Neng帮我们测试不同的配置。

比如你想同时kan深色模式和浅色模式的效果：

@Preview
@Preview
@Composable
fun ThemePreview {
    ComposeDemoTheme {
        MyComponent
    }
}

或者你想指定预览的宽高、背景色：

@Preview(
    name = "自定义预览",
    showBackground = true,
    backgroundColor = 0xFFCCCCCC, // 灰色背景
    widthDp = 200,
    heightDp = 100
)
@Composable
fun MyCustomPreview {
    Text
}

善用预览功Neng，Neng让你在开发过程中省下大量编译运行的时间。这简直是摸鱼……哦不提高效率的神器。

九、本篇小结

今天这一路走来我们算是把 Jetpack Compose 的大门给撞开了。从理解它“为什么出现”，到亲手搭建环境，再到认识 ComposableModifier 这些核心概念，Zui后亲手写出了一个登录界面。

Compose 的魅力在于，它让写 UI 变成了一种享受。你不再是一个苦逼的“画图师”，而是一个逻辑清晰的“构建者”。虽然刚开始可Neng会有点不习惯，但相信我，一旦你习惯了这种声明式的写法，就再也回不去 XML 了。

当然现在的你可Neng还处于“入门”阶段。别急，下一篇 我们会深入探讨 Compose 的心脏——状态管理。那是 Compose 真正的灵魂所在也是你从“会写”到“精通”的必经之路。

Ru果你觉得这篇文章对你有点启发，别忘了点个赞、收个藏。有任何问题，或者代码跑不通，直接在评论区扔出来咱们一起探讨！

---