Android Jetpack Compose 从 0 到 1 —— 新手最快入门指南

告别 XML 写布局的年代！Compose 是 Android 未来的 UI 开发方式。这篇指南用最直白的方式，带你从安装到写出第一个完整页面。

什么是 Jetpack Compose？

一句话

用 Kotlin 代码直接写 UI，不再需要 XML。

过去写 Android 页面要两个文件配合：activity_main.xml（画界面）+ MainActivity.kt（写逻辑）。Compose 把两者合二为一，全部用 Kotlin 搞定。

为什么学 Compose？

对比维度	传统 XML	Compose
语言	XML + Kotlin/Java	纯 Kotlin
文件数	1 个页面 ≥ 2 个文件	1 个文件搞定
UI 更新	findViewById + 手动设值	自动重组（数据变了界面自动刷新）
学习曲线	平缓但写起来累	稍陡但写起来爽
嵌套性能	嵌套越深越卡	无嵌套问题
Google 态度	维护但不再主推	⭐ 官方主推，全力投入

结论：现在开始学 Android，直接从 Compose 起步，不需要学 XML。

环境搭建

下载安装

1. 去 Android Studio 下载页 下载最新版（Hedgehog 以上）
2. 一路 Next 安装，SDK 按默认勾选即可
3. 首次启动可能会下载 SDK，等它完成

创建第一个 Compose 项目

1. 打开 Android Studio → New Project
2. 选择 「Empty Activity」（不是 Empty Views Activity！）
3. 填写：
   • Name：MyFirstApp
   • Package name：com.example.myfirstapp
   • Language：Kotlin
   • Minimum SDK：API 24（Android 7.0）
4. 点击 Finish，等待 Gradle 同步完成

⚠️ 关键区分：Empty Activity 是 Compose 项目，Empty Views Activity 是传统 XML 项目。选错了你就回到旧时代了。

项目长什么样？

创建完成后，你看到的 MainActivity.kt 大概是这样的：

package com.example.myfirstapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.example.myfirstapp.ui.theme.MyFirstAppTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyFirstAppTheme {
                Surface(modifier = Modifier.fillMaxSize()) {
                    Greeting("Android")
                }
            }
        }
    }
}

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

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    MyFirstAppTheme {
        Greeting("Android")
    }
}

各部分解释：

代码	作用
setContent { }	Compose 的入口，替代了 setContentView(R.layout.xxx)
@Composable	标记函数是一个 UI 组件（这是 Compose 的核心注解）
@Preview	让函数可以在 Android Studio 右侧预览，不需要跑模拟器
MaterialTheme	应用 Material Design 3 主题

纯 Kotlin写UI和 XML 的对应关系

XML 方式	Compose (Kotlin)
FrameLayout	Box
LinearLayout(vertical)	Column
LinearLayout(horizontal)	Row
RecyclerView	LazyColumn / LazyRow
android:layout_width="match_parent"	Modifier.fillMaxWidth()
android:layout_height="match_parent"	Modifier.fillMaxHeight() / fillMaxSize()
android:layout_margin / padding	Modifier.padding()
android:background	Modifier.background()
android:gravity	Modifier.align() / Arrangement