为了获得最佳的 Compose 开发体验,请下载并安装 Android Studio。它包含许多智能编辑器功能,例如新的项目模板以及立即预览 Compose 界面和动画的功能。
按照以下说明创建新的 Compose 应用项目、为现有应用项目设置 Compose,或导入用 Compose 编写的示例应用。
创建支持 Compose 的新应用
如果您想默认支持 Compose 来启动新项目,Android Studio 提供了各种项目模板来帮助您入门。要正确设置 Compose 以创建新项目,请按以下步骤操作:
- 如果您在 欢迎使用 Android Studio 窗口中,请点击 启动新的 Android Studio 项目。如果您已打开 Android Studio 项目,请从菜单栏中选择 文件 > 新建 > 新建项目。
- 在选择项目模板窗口中,选择空 Activity,然后点击下一步。
- 在配置您的项目窗口中,执行以下操作:
- 照常设置名称、软件包名称和保存位置。请注意,在语言下拉菜单中,Kotlin 是唯一可用的选项,因为 Jetpack Compose 仅适用于用 Kotlin 编写的类。
- 在最低 API 级别下拉菜单中,选择 API 级别 21 或更高版本。
- 点击完成。
现在,您已准备好使用 Jetpack Compose 开发应用。为了帮助您入门并了解该工具包的功能,请尝试Jetpack Compose 教程。
为现有应用设置 Compose
首先,使用Compose 编译器 Gradle 插件配置 Compose 编译器。
然后,将以下定义添加到应用的 build.gradle
文件中:
Groovy
android {
buildFeatures {
compose true
}
}
Kotlin
android {
buildFeatures {
compose = true
}
}
在 Android BuildFeatures
块内将 compose
标志设置为 true
即可在 Android Studio 中启用Compose 功能。
最后,将 Compose BOM 和您需要的 Compose 库依赖项子集添加到以下代码块中的依赖项中:
Groovy
dependencies {
def composeBom = platform('androidx.compose:compose-bom:2025.05.00')
implementation composeBom
androidTestImplementation composeBom
// Choose one of the following:
// Material Design 3
implementation 'androidx.compose.material3:material3'
// or Material Design 2
implementation 'androidx.compose.material:material'
// or skip Material Design and build directly on top of foundational components
implementation 'androidx.compose.foundation:foundation'
// or only import the main APIs for the underlying toolkit systems,
// such as input and measurement/layout
implementation 'androidx.compose.ui:ui'
// Android Studio Preview support
implementation 'androidx.compose.ui:ui-tooling-preview'
debugImplementation 'androidx.compose.ui:ui-tooling'
// UI Tests
androidTestImplementation 'androidx.compose.ui:ui-test-junit4'
debugImplementation 'androidx.compose.ui:ui-test-manifest'
// Optional - Included automatically by material, only add when you need
// the icons but not the material library (e.g. when using Material3 or a
// custom design system based on Foundation)
implementation 'androidx.compose.material:material-icons-core'
// Optional - Add full set of material icons
implementation 'androidx.compose.material:material-icons-extended'
// Optional - Add window size utils
implementation 'androidx.compose.material3.adaptive:adaptive'
// Optional - Integration with activities
implementation 'androidx.activity:activity-compose:1.10.1'
// Optional - Integration with ViewModels
implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.8.5'
// Optional - Integration with LiveData
implementation 'androidx.compose.runtime:runtime-livedata'
// Optional - Integration with RxJava
implementation 'androidx.compose.runtime:runtime-rxjava2'
}
Kotlin
dependencies {
val composeBom = platform("androidx.compose:compose-bom:2025.05.00")
implementation(composeBom)
androidTestImplementation(composeBom)
// Choose one of the following:
// Material Design 3
implementation("androidx.compose.material3:material3")
// or Material Design 2
implementation("androidx.compose.material:material")
// or skip Material Design and build directly on top of foundational components
implementation("androidx.compose.foundation:foundation")
// or only import the main APIs for the underlying toolkit systems,
// such as input and measurement/layout
implementation("androidx.compose.ui:ui")
// Android Studio Preview support
implementation("androidx.compose.ui:ui-tooling-preview")
debugImplementation("androidx.compose.ui:ui-tooling")
// UI Tests
androidTestImplementation("androidx.compose.ui:ui-test-junit4")
debugImplementation("androidx.compose.ui:ui-test-manifest")
// Optional - Included automatically by material, only add when you need
// the icons but not the material library (e.g. when using Material3 or a
// custom design system based on Foundation)
implementation("androidx.compose.material:material-icons-core")
// Optional - Add full set of material icons
implementation("androidx.compose.material:material-icons-extended")
// Optional - Add window size utils
implementation("androidx.compose.material3.adaptive:adaptive")
// Optional - Integration with activities
implementation("androidx.activity:activity-compose:1.10.1")
// Optional - Integration with ViewModels
implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.8.5")
// Optional - Integration with LiveData
implementation("androidx.compose.runtime:runtime-livedata")
// Optional - Integration with RxJava
implementation("androidx.compose.runtime:runtime-rxjava2")
}
试用 Jetpack Compose 示例应用
试用 GitHub 上托管的Jetpack Compose 示例应用是体验 Jetpack Compose 功能的最快方式。要从 Android Studio 导入示例应用项目,请按以下步骤操作:
- 如果您在欢迎使用 Android Studio 窗口中,请选择导入 Android 代码示例。如果您已打开 Android Studio 项目,请从菜单栏中选择文件 > 新建 > 导入示例。
- 在浏览示例向导顶部的搜索栏中,输入“compose”。
- 从搜索结果中选择一个 Jetpack Compose 示例应用,然后点击下一步。
- 更改应用名称和项目位置,或保留默认值。
- 点击完成。
Android Studio 会将示例应用下载到您指定的路径并打开项目。然后,您可以检查每个示例中的 MainActivity.kt
,以在 IDE 内预览中查看 Jetpack Compose API,例如交叉淡入淡出动画、自定义组件、使用排版以及显示浅色和深色。
如需将 Jetpack Compose 用于 Wear OS,请参阅在 Wear OS 上设置 Jetpack Compose。
为您推荐
- 注意:禁用 JavaScript 后会显示链接文本
- 使用 Compose 导航
- 测试您的 Compose 布局
- 响应焦点