当前位置：首页 > news >正文

Jetpack Compose 入门指南

news 2026/6/29 19:08:11

一、前言

伴随着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开发从“命令式”到“声明式”的根本性范式转移。