一、前言
伴随着2026年5月Android官方宣布Android UI开发进入“Compose优先”时代，传统的手写XML方式在现代Android开发中不再是首选或唯一的方案。现代 Android UI开发的趋势是使用声明式UI框架，即Jetpack Compose。
在上一篇文章里，我们介绍了Compose 的背景和基本概念【参考第一篇：Jetpack Compose前探】。本篇将带领读者从零开始，创建并运行第一个Compose程序。
二、环境准备
2.1 搭建开发环境
开发Android项目，我们首选IDE就是使用Android Studio，官网下载地址：
- https://developer.android.google.cn/studio
根据你的操作系统选择对应的平台下载安装。具体安装细节可咨询AI助手，本文不做展开。
本文案例使用的 Android Studio 版本是 Panda 4：
三、第一个Compose程序
3.1 创建项目
打开已安装好的 Android Studio，选择【New Project】，进入项目模板页面，设备类型我们选择Phone and Tablet，模板选择Empty Activity。
点击Next，进入项目信息配置页面。
- Name：表示项目名称，同时也是APP名称
- Package Name：表示包名，每个APP都有唯一的包名标识
- save location：表示项目在本地设备的存储路径
- Minimum SDK：表示项目支持的最小Android版本
- Build configuration language：表示 Gradle 构建脚本的语言，Android支持Kotlin DSL和Groovy DSL
点击Finish，等待 Android Studio 自动生成项目，首次生成可能需要一些时间下载依赖。完成后的IDE内容如下图所示。
3.2 运行项目
项目生成后，可以使用模拟器或真机运行刚刚创建的项目。
应用成功安装并启动后，界面默认显示"Hello Android"。我们试着去修改代码，将显示内容修改为"Hello World"。
再次运行，界面成功显示了"Hello World"。
到此为止，我们已经成功创建并运行了一个Compose项目。
3.3 分析演示程序
有过传统 Android 开发经验的小伙伴，第一次接触Compose可能会很不习惯——下意识地去查找/res/layout目录下的activity_main.xml，却发现该目录并不存在。这也是Compose UI编程和传统Android View UI编程不一样的地方。
那么，我们来分析下 Android Studio 使用模板自动生成的这些代码都是什么意思？
和传统方式创建的项目一样，我们一眼可以看到一个叫MainActivity.kt的文件——依旧作为APP的第一个界面。打开MainActivity.ktIDE显示内容如下，里面有熟悉也有很多陌生的词，我们拣陌生的给大家解释。
| 代码片段 | 解释说明 |
|---|---|
| ComponentActivity | Compose项目默认使用的不是AppCompatActivity，而是androidx.activity.ComponentActivity，它专为 Jetpack架构组件和Compose设计，提供了更好的生命周期支持。 |
| enableEdgeToEdge | 启用“边缘到边缘（Edge-to-Edge）”显示模式，UI 内容可以延伸到屏幕顶部状态栏和底部导航栏区域，更好实现沉浸式布局效果。 |
| setContent {…} | 替代了传统的setContentView(R.layout.xxx)，它将Compose UI内容注入到Activity中，是 Compose 应用的入口。 |
| MyApplicationTheme {…} | 自定义主题Composable函数，类似于XML中的android:theme="@style/AppTheme"。默认命名规则是【项目名】+ Theme。 |
| Scaffold | Material 3 设计规范提供的一个帮助规范页面布局的组件，可以把TopAppBar、NavigationBar、ExtendedFloatingActionButton等直接摆放到Scaffold预留的位置上。 |
| Modifier | 修饰符，官方描述是“一个有序的、不可变的修饰元素集合”，用于给Compose UI元素添加装饰或者行为，如设置边距、大小、点击事件等。 |
| Greeting(…) | 自定义的一个可组合函数，参数name=World、modifier = Modifier.padding(innerPadding) |
| @Composable | Compose 的核心注解，标记一个函数为可组合函数。只有标记了@Composable的函数才可以被setContent{}或其他 Composable 中调用。 |
| Text() | Jetpack Compose 的基础文本显示组件，功能相当于Android View 中的TextView。 |
| @Preview | Compose Preview 预览注解，有了它可以在AndroidStudio中直接预览UI效果，无需运行APP，相当于Android View时 XML 中的Split预览功能。showBackground=true，表示显示背景色。 |
3.4 预览Compose
上面的表格里解释了@Preview的作用，本小节来详细看看@Preview的演示效果。
除了运行APP查看界面UI效果，Compose还提供了更高效的UI调试方式——@Preview预览。在可组合函数上添加@Preview注解，Android Studio 便会直接在编辑器中渲染UI预览，无需启动模拟器或真机，极大提升了UI开发效率。
Gif 示例如下所示：
四、声明式UI的核心思想
声明式UI的核心思想概况为UI是状态的函数：
U I = f ( s t a t e ) UI = f(state)UI=f(state)
它不是Compose 独有的，而是借鉴于React等前端生态。Flutter、SwiftUI等现代跨平台UI框架均遵循这一范式。它代表了UI开发从“命令式”到“声明式”的根本性范式转移。
💡为什么放弃命令式UI？不是盲目追随技术潮流，而是为了解决“状态与界面同步”这一困扰开发者多年的基础性问题。
4.1 命令式UI VS 声明式UI
命令式UI的核心是“如何做”。开发者手动控制UI的每个细节：通过findViewById获取视图对象，然后调用setText()、setVisibility()等方法一步步驱动UI变更。简单页面还好控制，但随着界面复杂度上升，状态同步的难度也呈指数级增长。
声明式UI的核心是“要什么”。开发者只需要根据当前状态描述UI“应该是什么样子”，框架会自动完成UI渲染与更新。当状态发生变化时，Compose会自动重新执行可组合函数，生成新的UI——这个就是重组。
4.2 理解 UI = f(State)
- State（状态）：应用的数据，是随着时间变化的任何值。如网络请求结果、数据库数据、用户输入内容等等。
- f（函数）：开发者写的Compose UI代码，即
@Composable标记的可组合函数。这些函数接受状态作为参数，描述UI应该是什么样。 - UI（界面）：最终屏幕上显示的内容。
五、参考资料
- https://developer.android.google.cn/studio?hl=zh-cn
- https://developer.android.google.cn/develop/ui/compose/documentation?hl=zh-cn
- https://developer.android.google.cn/develop/ui/compose/tutorial?hl=zh-cn