Android基础教程进阶：JetpackCompose入门，告别传统XML布局

写 XML 布局时总遇到这种情况吧？改个控件位置得在 XML 文件里调半天参数，预览窗口还老跟不上；想动态改个文字颜色，得在 Java 代码里 findViewById 再 setTextColor，前后端分离得手动关联；布局层级一多就卡，还容易出嵌套过深的问题。其实啊，谷歌早就推出了新方案 ——Jetpack Compose，用代码写布局，告别 XML 的繁琐。今天兔子哥就带大家入门 Compose，看看它怎么让布局开发变简单，新手也能跟着上手。

先搞明白：Jetpack Compose 到底是啥？和 XML 布局有啥不一样？

有朋友可能听说过 Compose，但不清楚它和传统 XML 的区别。简单说，Jetpack Compose 是用 Kotlin 代码写 UI 的工具，不用再单独写 XML 文件，布局和逻辑都在一个文件里，改起来特别方便。
传统 XML 布局的问题其实挺多的：

1. 分离麻烦：XML 写布局，Java/Kotlin 写逻辑，改个小功能得切两个文件；

2. 预览慢：改完 XML 点预览，半天出不来效果，尤其布局复杂时；

3. 动态性差：想根据数据动态改布局，得写一堆 findViewById 和 set 方法，代码冗余；

4. 嵌套深：复杂界面 XML 层级能到七八层，性能差还难维护。

而 Compose 就不一样了，它用函数定义 UI，布局就是代码，代码就是布局。比如写个按钮，直接在代码里定义样式、点击事件，写完立马预览，改起来也不用切换文件。用习惯了你会发现，开发效率比 XML 高多了。

为什么要学 Compose？现在学会不会太早？

有新手担心：“我刚学会 XML 布局，现在学 Compose 会不会白费劲？” 其实完全不用担心。谷歌早就说过，Compose 是 Android UI 开发的未来，现在新出的官方文档、示例项目几乎都用 Compose，很多公司的新项目也开始转向 Compose。
而且 Compose 对新手更友好：它用 Kotlin 写，语法比 XML 灵活；没有那么多属性要记，函数名一看就知道作用，比如 Text () 就是文本，Button () 就是按钮；实时预览功能超强，写一行代码，预览窗口立马变，不用等编译。兔子哥带的几个新手，学 Compose 比学 XML 还快，因为逻辑和布局在一起，思路更连贯。

第一步：搭环境，让 Compose 能跑起来

学 Compose 得先把环境弄好，Android Studio 版本得够新，不然不支持。
准备步骤很简单：

1. 确保 Android Studio 是 Arctic Fox（2020.3.1）及以上版本，老版本得升级，官网能下最新版；

2. 新建项目时，选 “Empty Compose Activity” 模板，这是专门为 Compose 准备的；

3. 项目配置不用改，默认会加好 Compose 的依赖，等着创建完成就行；

4. 第一次创建可能会下载依赖，耐心等进度条走完，创建完就能看到默认的 Compose 界面。

有个小细节：新建项目时 Language 选 Kotlin，因为 Compose 只支持 Kotlin，不支持 Java。之前有个朋友选错成 Java，结果项目报错，重新建项目才解决，这点要注意。

第二步：认识 Compose 基本组件，写个简单界面试试

Compose 的核心是 “组件函数”，每个 UI 元素都是一个函数，组合这些函数就能搭出界面。先从最基础的组件学起。

第一个 Compose 程序：显示文本和按钮

打开新建项目里的 MainActivity.kt，默认代码长这样：
kotlin

class MainActivity : ComponentActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContent {MyApplicationTheme {// 表面容器，背景色用主题色Surface(modifier = Modifier.fillMaxSize(),color = MaterialTheme.colorScheme.background) {Greeting("Android")}}}}}// 自定义的Greeting组件@Composablefun Greeting(name: String, modifier: Modifier = Modifier) {Text(text = "Hello $name!",modifier = modifier)}// 预览函数，能在IDE里看到效果@Preview(showBackground = true)@Composablefun GreetingPreview() {MyApplicationTheme {Greeting("Android")}}

这段代码实现了显示 “Hello Android!” 的文本。重点看这几个部分：

• @Composable 注解：带这个注解的函数就是 Compose 组件，能用来构建 UI；

• setContent：Activity 里的方法，用来设置 Compose 内容；

• @Preview 注解：带这个注解的函数能在预览窗口显示，不用运行 APP 就能看效果。

试试改改代码，加个按钮

在 Greeting 函数里加个 Button，让界面更丰富：
kotlin

@Composablefun Greeting(name: String, modifier: Modifier = Modifier) {// 用Column垂直排列文本和按钮Column(modifier = modifier.padding(16.dp)) {Text(text = "Hello $name!",fontSize = 24.sp // 字体大小)Button(onClick = { /* 点击事件 */ }) {Text("点我试试")}}}

改完看看预览窗口，是不是立马出现了文本和按钮？这就是实时预览的好处，不用运行 APP 就能看到效果。点击事件现在是空的，后面我们再加功能。

第三步：掌握布局组件，让控件按规矩排列

和 XML 里的 LinearLayout、RelativeLayout 一样，Compose 也有布局组件，用来控制控件的排列方式。常用的有这几个：

Column：垂直排列控件

就像 LinearLayout 的 vertical orientation，控件从上到下排：
kotlin

Column(modifier = Modifier.fillMaxSize(), // 占满全屏horizontalAlignment = Alignment.CenterHorizontally, // 水平居中verticalArrangement = Arrangement.Center // 垂直居中) {Text("第一行文本")Text("第二行文本")Button(onClick = {}) { Text("按钮") }}

这样文本和按钮就会在屏幕中间垂直排列，对齐方式用参数控制，比 XML 的属性直观多了。

Row：水平排列控件

类似 LinearLayout 的 horizontal orientation，控件从左到右排：
kotlin

Row(modifier = Modifier.fillMaxWidth(), // 占满宽度horizontalArrangement = Arrangement.SpaceBetween // 控件间留空隙) {Text("左侧文本")Button(onClick = {}) { Text("右侧按钮") }}

这段代码会让文本在左边，按钮在右边，中间有空隙，做标题栏很方便。

Box：层叠排列控件

像 RelativeLayout，控件可以叠在一起，比如给文本加个背景：
kotlin

Box(modifier = Modifier.fillMaxSize()) {Text(text = "背景文本",fontSize = 40.sp,color = Color.LightGray)Text(text = "前景文本",modifier = Modifier.align(Alignment.Center) // 居中对齐)}

前景文本会叠在背景文本上面，用 align 控制位置，比 XML 的相对布局简单。

第四步：加交互功能，让界面 “动” 起来

Compose 里加交互特别简单，不用 findViewById，直接在组件里写事件。

给按钮加点击事件，动态改文本

我们来做个小功能：点按钮，文本内容变了。用 remember 和 mutableStateOf 保存状态：
kotlin

@Composablefun InteractiveExample() {// 用remember保存状态，mutableStateOf让状态变化时界面刷新var text by remember { mutableStateOf("还没点击按钮") }Column(modifier = Modifier.padding(16.dp)) {Text(text = text,fontSize = 18.sp)Button(onClick = {text = "按钮被点击啦！" // 点击时改状态，界面会自动刷新}) {Text("点击我")}}}

运行这段代码，点按钮试试，文本是不是立马变了？这就是 Compose 的 “状态驱动 UI”，状态变了，界面自动更新，不用手动调用 setText，比传统方式简洁太多。

新手学 Compose 常踩的坑，提前避开

刚开始学 Compose 容易犯这些错，兔子哥提前提醒你：

1. 忘了加 @Composable 注解：自定义组件函数必须加这个注解，不然会报错，新手常漏这个；

2. 在 Composable 函数里做耗时操作：比如网络请求、数据库操作，这些得放协程里，直接写会卡死界面；

3. 状态管理不当：不用 remember 保存的状态，界面刷新后会重置，比如上面的 text 变量，不加 remember，点按钮文本不会变；

4. 预览函数没加 @Preview：想在预览窗口看效果，函数必须加 @Preview 注解，不然看不到。

遇到问题别慌，Compose 的报错信息挺清楚的，比如 “Function is not marked with @Composable”，一看就知道是漏了注解，改过来就行。

兔子哥的学习心得

学 Compose 不用怕，它比 XML 更直观，逻辑更连贯。刚开始可以对照官方文档的示例代码敲，熟悉基本组件和布局方式；然后试着把之前用 XML 写的小界面，用 Compose 重写一遍，对比两种方式的区别，很快就能上手。
实时预览功能一定要用好，写一点看一点，有问题及时改，别等全部写完再调试。状态管理是 Compose 的核心，刚开始可能有点绕，但多练几个小例子（比如计数器、开关按钮），慢慢就理解了。
现在 Android 开发趋势明显在向 Compose 倾斜，早点学会肯定不吃亏。它不仅能提高开发效率，还能让你写出更简洁、更易维护的代码。别担心学不会，新手入门 Compose 的门槛其实比 XML 低，跟着教程动手试试，你会发现布局开发原来可以这么轻松！

标签： findViewById setTextColor