🧩 从零开始学 Compose

声明式UI · 第2课
📚 开发环境搭建 🛠️ Android Studio · Kotlin · Compose 编译器 ⭐ 中小学生色系 轻松上手

🚀 工欲善其事,必先利其器。跟着小火箭一起搭建稳定、高效的 Compose 开发环境吧!

📌 1. Android Studio 版本要求 稳定版优先
版本代号版本号Compose 支持推荐指数
Hedgehog 🦔2023.1.1✅ 完整支持 Compose 1.5+⭐ 推荐
Iguana 🦎2023.2.1✅ 内置 Compose 1.6+ 模板⭐ 最新稳定
Jellyfish 🪸2024.1+ (预览)✅ 支持 K2 编译器 & Compose 1.7🔄 尝鲜
Ladybug 🐞2024.2+ (Canary)✅ 最新 Compose 2.0 实验🧪 实验
⚙️ 2. Kotlin & Compose 编译器插件配置

在项目级 build.gradle.kts 或 build.gradle 中声明:

// 项目级 build.gradle.kts
plugins {
    id("com.android.application") version "8.3.0" apply false
    id("org.jetbrains.kotlin.android") version "1.9.22" apply false
    // Compose 编译器插件 (Kotlin 1.9+ 内置, 但可显式指定)
    id("org.jetbrains.kotlin.plugin.compose") version "1.9.22" apply false
}

// 模块级 build.gradle.kts
plugins {
    id("com.android.application")
    id("org.jetbrains.kotlin.android")
    id("org.jetbrains.kotlin.plugin.compose")  // 启用 Compose 编译器插件
}

android {
    compileSdk = 34

    buildFeatures {
        compose = true
    }
}

dependencies {
    // BOM 统一管理 Compose 版本
    val composeBom = platform("androidx.compose:compose-bom:2024.02.00")
    implementation(composeBom)

    implementation("androidx.compose.ui:ui")
    implementation("androidx.compose.material3:material3")
    implementation("androidx.compose.ui:ui-tooling-preview")
    debugImplementation("androidx.compose.ui:ui-tooling")
}
        
Kotlin 源码 .kt + @Composable Compose 编译器插件 kotlin.plugin.compose 生成 Composer 代码 APK / App Bundle 运行时 Compose 运行时 🚀
🧩 Compose 编译流程:Kotlin 源码 → 编译器插件 → 优化字节码 → 运行
🆕 3. 创建第一个 Compose 项目
  • Step 1 打开 Android Studio → 新建项目 → 选择 “Empty Activity” (Compose)。
  • Step 2 项目名:HelloCompose,包名:com.example.hellocompose,语言选择 Kotlin,最低 SDK 24+。
  • Step 3 等待 Gradle 同步完成,确保 Compose 依赖已自动添加。
  • Step 4 打开 MainActivity.kt,你会看到类似下面的代码:
📱 预览
👋 Hello Compose!
package com.example.hellocompose

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Greeting("Compose")
        }
    }
}

@Composable
fun Greeting(name: String) {
    Text(text = "Hello, $name! 🎉")
}
        
✅ 点击运行按钮(▶),选择模拟器或真机,即可看到 “Hello, Compose! 🎉” 显示在屏幕上。
📌 课程小贴士
  • 如果遇到 Gradle 同步失败,检查网络或使用 --no-daemon 重试。
  • Compose BOM 版本可查询 d.android.com (本地离线文档)。
  • 建议开启 UI 工具预览:@Preview 注解实时查看 Composable。