此页面由 Cloud Translation API 翻译。

快速入门

为了在使用 Compose 进行开发时获得最佳体验，请下载并安装 Android Studio。它包含许多智能编辑器功能，例如新项目模板以及立即预览 Compose 界面和动画的功能。

获取 Android Studio

请按照下列说明创建新的 Compose 应用项目，为现有应用项目设置 Compose，或导入使用 Compose 编写的示例应用。

创建支持 Compose 的新应用

如果您想要创建一个默认支持 Compose 的新项目，Android Studio 提供了新项目模板来帮助您入手。如需创建正确设置了 Compose 的新项目，请按以下步骤操作：

如果您位于 Welcome to Android Studio 窗口中，请点击 Start a new Android Studio project。如果您已打开 Android Studio 项目，请从菜单栏中依次选择 File > New > New Project。
在 Select a Project Template 窗口中，选择 Empty Activity，然后点击 Next。
在 Configure your project 窗口中，执行以下操作：
1. 按照常规方法设置 Name、Package name 和 Save location。请注意，在 Language 下拉菜单中，Kotlin 是唯一可用的选项，因为 Jetpack Compose 仅适用于使用 Kotlin 编写的类。
2. 在 Minimum API level dropdown 菜单中，选择 API 级别 21 或更高级别。
点击 Finish。

现在，您可以开始使用 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:2024.09.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.9.2'
    // 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:2024.09.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.9.2")
    // 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 示例应用

如要试用 Jetpack Compose 功能，最快的方法是尝试在 GitHub 上托管的 Jetpack Compose 示例应用。如需从 Android Studio 导入示例应用项目，请按以下步骤操作：

如果您位于 Welcome to Android Studio 窗口中，请选择 Import an Android code sample。如果您已打开 Android Studio 项目，请从菜单栏中依次选择 File > New > Import Sample。
在 Browse Samples 向导顶部附近的搜索栏中，输入“compose”。
从搜索结果中选择一个 Jetpack Compose 示例应用，然后点击 Next。
您可以更改 Application name 和 Project location，也可以保留默认值。
点击 Finish。

Android Studio 会将示例应用下载到您指定的路径并打开项目。然后，您可以在 IDE 预览界面中检查每个示例中的 MainActivity.kt，以查看各种 Jetpack Compose API 的效果，例如，交叉淡入淡出动画、自定义组件、使用字体排版以及显示浅色和深色。

如需使用适用于 Wear OS 的 Jetpack Compose，请参阅在 Wear OS 上设置 Jetpack Compose。

为您推荐

注意：当 JavaScript 处于关闭状态时，系统会显示链接文字
使用 Compose 进行导航
测试 Compose 布局
以应对焦点