Jetpack Compose 用于 Kotlin：完整指南及示例

什么是 Jetpack Compose，为什么需要它？

Jetpack Compose 是一套用于创建 Android 用户界面 (UI) 的现代工具集，由 Google 开发。与基于 XML 布局和 View 系统的传统方法不同，Compose 采用声明式方法。这意味着您描述 UI 在每个数据状态下应如何显示，而不是描述更改它的步骤序列。

Jetpack Compose 的主要优势：

• 声明式：您将 UI 描述为状态的函数。当状态改变时，Compose 会自动仅重新绘制发生变化的 UI 部分。
• 更少的代码：与 XML + View 相比，Compose 代码通常更短且更易读。
• 直观性：使用 Kotlin 语言，使代码对 Android 开发者来说更自然。
• 性能：Compose 针对新的 Android 架构进行了优化，并最大限度地减少了重绘。
• 兼容性：Compose 可以逐步引入到现有项目中，与传统的 View 一起使用。

Jetpack Compose 不仅仅是一个库，而是一个完整的生态系统，包括用于处理动画、导航、测试等的工具。它是 Android 开发的未来，Google 积极推荐迁移到它。

安装 Jetpack Compose

由于 Jetpack Compose 是 Android 的库，它不能通过 pip (Python) 或 npm (JavaScript) 安装。相反，它通过 Gradle 构建系统添加到 Android 项目中。以下是分步说明：

1. 在 Android Studio 中配置项目

创建一个新的 Android 项目，选择 "Empty Compose Activity" 模板。Android Studio 会自动配置所有必要的依赖项。

2. 手动配置（如果项目已存在）

打开 build.gradle.kts 文件（项目级别），并确保在 plugins 块中有：

plugins {    id("com.android.application") version "8.2.0" apply false    id("org.jetbrains.kotlin.android") version "1.9.20" apply false}

然后打开 build.gradle.kts 文件（模块级别，通常是 app）并添加：

plugins {    id("com.android.application")    id("org.jetbrains.kotlin.android")}

android {    namespace = "com.example.myapp"    compileSdk = 34

    defaultConfig {        applicationId = "com.example.myapp"        minSdk = 24        targetSdk = 34        versionCode = 1        versionName = "1.0"    }

    buildFeatures {        compose = true    }

    composeOptions {        kotlinCompilerExtensionVersion = "1.5.5"    }

    kotlinOptions {        jvmTarget = "17"    }}

dependencies {    implementation(platform("androidx.compose:compose-bom:2024.01.00"))    implementation("androidx.compose.ui:ui")    implementation("androidx.compose.ui:ui-graphics")    implementation("androidx.compose.ui:ui-tooling-preview")    implementation("androidx.compose.material3:material3")    implementation("androidx.activity:activity-compose:1.8.2")    debugImplementation("androidx.compose.ui:ui-tooling")    debugImplementation("androidx.compose.ui:ui-test-manifest")}

同步 Gradle 后，您就可以开始使用 Jetpack Compose 了。

快速入门及代码示例

最简单的入门方法是创建一个显示 "Hello, World!" 文本的屏幕。为此，在您的 Activity 中（或在任何使用 Compose 的地方）调用 setContent 函数：

import android.os.Bundleimport androidx.activity.ComponentActivityimport androidx.activity.compose.