一、前言
伴随着2026年5月Android官方宣布Android UI开发进入"Compose优先 "时代，传统的手写XML方式在现代Android开发中不再是首选或唯一的方案。现代 Android UI开发的趋势是使用 声明式UI框架 ，即Jetpack Compose。
在上一篇文章里，我们介绍了Compose 的背景和基本概念【参考第一篇：Jetpack Compose前探】。本篇将带领读者从零开始，创建并运行第一个Compose程序。
二、环境准备
2.1 搭建开发环境
开发Android项目，我们首选IDE就是使用Android 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.kt IDE显示内容如下，里面有熟悉也有很多陌生的词，我们拣陌生的给大家解释。
| 代码片段 | 解释说明 |
|---|---|
| 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（界面）：最终屏幕上显示的内容。