快速入门

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

获取 Android Studio

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

创建一个支持 Compose 的新应用

如果您想启动一个默认包含 Compose 支持的新项目，Android Studio 提供各种项目模板来帮助您入门。要创建一个已正确设置 Compose 的新项目，请按照以下步骤操作：

  1. 如果您在**欢迎使用 Android Studio**窗口中，请点击**启动新的 Android Studio 项目**。如果您已经打开了一个 Android Studio 项目，请从菜单栏中选择**文件 > 新建 > 新建项目**。
  2. 在**选择项目模板**窗口中，选择**空活动**，然后点击**下一步**。
  3. 在**配置您的项目**窗口中，请执行以下操作：
    1. 设置**名称、包名**和**保存位置**，就像平时一样。请注意，在**语言**下拉菜单中，**Kotlin** 是唯一可用的选项，因为 Jetpack Compose 仅适用于用 Kotlin 编写的类。
    2. 在**最低 API 级别下拉**菜单中，选择 API 级别 21 或更高版本。
  4. 点击**完成**。

现在，您可以开始使用 Jetpack Compose 开发应用了。为了帮助您入门并了解您可以使用此工具包执行的操作，请尝试 Jetpack Compose 教程。

为现有应用设置 Compose

首先，使用 Compose Compiler 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.10.01')
    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.10.01")
    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 导入示例应用项目，请按照以下步骤操作：

  1. 如果您在**欢迎使用 Android Studio**窗口中，请选择**导入 Android 代码示例**。如果您已经打开了一个 Android Studio 项目，请从菜单栏中选择**文件 > 新建 > 导入示例**。
  2. 在**浏览示例**向导顶部的搜索栏中，输入“compose”。
  3. 从搜索结果中选择一个 Jetpack Compose 示例应用，然后点击**下一步**。
  4. 更改**应用名称**和**项目位置**，或保留默认值。
  5. 点击**完成**。

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

要将 Jetpack Compose 用于 Wear OS，请参阅 在 Wear OS 上设置 Jetpack Compose。