Jetpack Compose 从入门到精通（一）：初识 Compose

声明式 UI 的时代来临，让我们一起开启 Compose 学习之旅！

---

前言

如果你还在用 XML 写布局、用 findViewById 查找视图、用 setOnClickListener 设置点击事件，那么你可能已经落后于时代了。

2021 年，Google 正式发布 Jetpack Compose 1.0 稳定版，标志着 Android 开发进入了声明式 UI 的新时代。今天，无论是 Google 官方应用、全新的 Android Studio，还是各大互联网厂的新项目，Compose 已经成为首选方案。

作为 Android 开发者，学习 Compose 不再是"可选项"，而是"必修课"。

本系列文章将带你从入门到精通，系统掌握 Jetpack Compose。今天的第一篇，我们先来打好基础，了解 Compose 是什么，并完成环境搭建。

---

一、Compose 是什么？

1.1 官方定义

Jetpack Compose 是 Google 推出的用于构建 Android 界面的现代声明式 UI 工具包。它基于 Kotlin 语言，采用函数式编程思想，让界面开发变得更加简洁、直观和高效。

1.2 传统方式 vs Compose

让我们用一段代码直观感受两者的区别：

传统 View 系统（命令式）：

// XML 布局文件
<TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

// Kotlin 代码
val textView = findViewById<TextView>(R.id.textView)
textView.text = "Hello World"
textView.setTextColor(Color.BLUE)
textView.setOnClickListener {
    // 处理点击
}

Compose（声明式）：

@Composable
fun Greeting(name: String) {
    Text(
        text = "Hello $name",
        color = Color.Blue,
        modifier = Modifier.clickable {
            // 处理点击
        }
    )
}

可以看到，Compose 的代码更加简洁，布局与逻辑写在一起，无需在 XML 和 Kotlin 之间来回切换。

1.3 核心特性

特性	说明
声明式语法	描述"界面应该是什么样子"，而不是"如何创建界面"
纯 Kotlin 实现	无需 XML，类型安全、智能提示更好
组合而非继承	通过组合小型组件构建复杂界面，符合单一职责原则
智能重组	系统自动跟踪状态变化，只更新必要的部分
实时预览	Android Studio 实时预览，无需运行应用

1.4 为什么要学 Compose？

传统 View 系统的痛点：

1. 命令式编程复杂 - 手动管理视图状态，findViewById 容易出错
2. XML 与代码分离 - 布局在 XML，逻辑在 Kotlin，维护困难
3. 状态管理困难 - 状态分散在各个 View 中，数据流难以追踪
4. 重复代码多 - 自定义 View 需要继承并重写多个方法

Compose 的优势：

• 代码量减少 50%+
• 开发效率大幅提升
• 状态管理更加清晰
• 跨平台支持（Compose Multiplatform）

行业趋势：

• iOS：SwiftUI 已成为推荐方案
• Web：React、Vue 早已普及声明式开发
• Android：Compose 正在快速普及，成为默认选择

---

二、环境搭建

2.1 系统要求

• Android Studio：Arctic Fox (2020.3.1) 或更高版本（推荐最新稳定版）
• Kotlin：1.5.10 或更高版本
• minSdk：API 21 (Android 5.0) 或更高

2.2 创建新项目

步骤 1：新建项目

打开 Android Studio，选择 New Project → Empty Activity（注意选择 Compose 模板）。

步骤 2：配置项目

• Name：ComposeDemo
• Package name：com.example.composedemo
• Minimum SDK：API 21: Android 5.0 (Lollipop)
• Build configuration language：Kotlin DSL (build.gradle.kts)

💡 注意：确保勾选 "Use Compose" 选项（新版 Android Studio 默认启用）。

步骤 3：查看自动生成的配置

项目创建完成后，build.gradle.kts (Module: app) 会自动包含以下配置：

android {
    buildFeatures {
        compose = true
    }

    composeOptions {
        kotlinCompilerExtensionVersion = "1.5.10" // 根据实际版本调整
    }

    kotlinOptions {
        jvmTarget = "1.8"
    }
}

dependencies {
    // Compose BOM（物料清单）
    val composeBom = platform("androidx.compose:compose-bom:2024.02.00")
    implementation(composeBom)
    androidTestImplementation(composeBom)

    // 核心库
    implementation("androidx.compose.ui:ui")
    implementation("androidx.compose.ui:ui-graphics")
    implementation("androidx.compose.ui:ui-tooling-preview")
    
    // Material Design 3
    implementation("androidx.compose.material3:material3")
    
    // 调试工具
    debugImplementation("androidx.compose.ui:ui-tooling")
    debugImplementation("androidx.compose.ui:ui-test-manifest")
}

2.3 现有项目添加 Compose

如果是现有项目，需要手动添加配置：

build.gradle.kts (Module: app)：

android {
    buildFeatures {
        compose = true
    }
    
    composeOptions {
        kotlinCompilerExtensionVersion = "1.5.10"
    }
}

dependencies {
    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")
}

2.4 第一个 Compose 应用

创建项目后，MainActivity.kt 已经自动生成基础代码：

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeDemoTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    Greeting("Android")
                }
            }
        }
    }
}

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Text(
        text = "Hello $name!",
        modifier = modifier
    )
}

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    ComposeDemoTheme {
        Greeting("Android")
    }
}

运行应用：

点击 Android Studio 的 Run 按钮（▶），即可在模拟器或真机上看到 "Hello Android!" 的界面。

实时预览：

在 GreetingPreview 函数右侧，点击 Split 或 Design 模式，即可看到实时预览效果，无需运行应用！

---

三、Composable 函数基础

3.1 什么是 Composable 函数？

Composable 函数是 Compose 的基本构建块，用 @Composable 注解标记。它描述了 UI 的某一部分，类似于传统 View 系统中的自定义 View。

基本结构：

@Composable
fun MyComponent() {
    // UI 描述
}

3.2 命名规范

• Composable 函数名使用大驼峰命名法（PascalCase）
• 名词或名词短语，描述 UI 的功能

// ✅ 正确
@Composable
fun UserProfile() { }

@Composable
fun LoginButton() { }

// ❌ 错误
@Composable
fun userProfile() { }  // 小写开头

@Composable
fun showButton() { }   // 动词开头

3.3 参数传递

Composable 函数可以接受参数，实现数据驱动的 UI：

@Composable
fun Greeting(name: String, age: Int) {
    Text(text = "Hello, $name! You are $age years old.")
}

// 使用
Greeting(name = "张三", age = 25)

3.4 Modifier 基础

Modifier 是 Compose 中用于修饰 UI 元素的重要工具，可以设置尺寸、边距、点击事件等。

@Composable
fun StyledText() {
    Text(
        text = "Hello Compose",
        modifier = Modifier
            .padding(16.dp)           // 内边距
            .fillMaxWidth()           // 宽度填满父容器
            .height(50.dp)            // 高度
            .background(Color.LightGray) // 背景色
            .clickable {              // 点击事件
                // 处理点击
            }
    )
}

常用 Modifier：

Modifier	作用
padding()	设置内边距
fillMaxWidth() / fillMaxHeight()	填满父容器宽度/高度
size() / width() / height()	设置尺寸
background()	设置背景色
clickable()	添加点击事件
border()	添加边框

3.5 预览注解

@Preview 注解用于在 Android Studio 中显示 Composable 的预览效果：

@Preview(
    name = "默认预览",
    showBackground = true,      // 显示背景
    backgroundColor = 0xFFFFFFFF, // 背景颜色（白色）
    widthDp = 360,              // 预览宽度
    heightDp = 640              // 预览高度
)
@Composable
fun MyPreview() {
    MyComponent()
}

多个预览：

@Preview(name = "浅色模式", uiMode = Configuration.UI_MODE_NIGHT_NO)
@Preview(name = "深色模式", uiMode = Configuration.UI_MODE_NIGHT_YES)
@Composable
fun ThemePreview() {
    MyAppTheme {
        MyComponent()
    }
}

---

四、Material Design 3 组件初探

4.1 什么是 Material Design 3？

Material Design 3（简称 M3）是 Google 最新的设计系统，提供了丰富的预构建组件，帮助开发者快速构建美观、一致的界面。

4.2 常用基础组件

Text（文本）

@Composable
fun TextDemo() {
    Column(modifier = Modifier.padding(16.dp)) {
        // 基础文本
        Text("Hello World")
        
        // 样式设置
        Text(
            text = "Styled Text",
            fontSize = 20.sp,
            fontWeight = FontWeight.Bold,
            color = Color.Blue
        )
        
        // 多行文本
        Text(
            text = "这是一段很长的文本，可能会自动换行显示。",
            maxLines = 2,
            overflow = TextOverflow.Ellipsis
        )
    }
}

Button（按钮）

@Composable
fun ButtonDemo() {
    Column(
        modifier = Modifier.padding(16.dp),
        verticalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        // 基础按钮
        Button(onClick = { /* 点击处理 */ }) {
            Text("点击我")
        }
        
        // 带图标的按钮
        Button(onClick = { }) {
            Icon(Icons.Default.Add, contentDescription = "添加")
            Spacer(modifier = Modifier.width(8.dp))
            Text("添加")
        }
        
        // 描边按钮
        OutlinedButton(onClick = { }) {
            Text("描边按钮")
        }
        
        // 文本按钮
        TextButton(onClick = { }) {
            Text("文本按钮")
        }
    }
}

Card（卡片）

@Composable
fun CardDemo() {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp),
        elevation = CardDefaults.cardElevation(defaultElevation = 4.dp)
    ) {
        Column(modifier = Modifier.padding(16.dp)) {
            Text(
                text = "卡片标题",
                style = MaterialTheme.typography.titleLarge
            )
            Spacer(modifier = Modifier.height(8.dp))
            Text(
                text = "这是卡片的内容描述文本。",
                style = MaterialTheme.typography.bodyMedium
            )
        }
    }
}

TextField（输入框）

@Composable
fun TextFieldDemo() {
    var text by remember { mutableStateOf("") }
    
    OutlinedTextField(
        value = text,
        onValueChange = { text = it },
        label = { Text("用户名") },
        placeholder = { Text("请输入用户名") },
        leadingIcon = {
            Icon(Icons.Default.Person, contentDescription = null)
        },
        modifier = Modifier.fillMaxWidth()
    )
}

4.3 基础布局

Column（垂直排列）

@Composable
fun ColumnDemo() {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,  // 垂直居中
        horizontalAlignment = Alignment.CenterHorizontally  // 水平居中
    ) {
        Text("第一行")
        Text("第二行")
        Text("第三行")
    }
}

Row（水平排列）

@Composable
fun RowDemo() {
    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.SpaceEvenly,  // 均匀分布
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text("左侧")
        Text("中间")
        Text("右侧")
    }
}

Box（层叠布局）

@Composable
fun BoxDemo() {
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        // 底层
        CircularProgressIndicator()
        
        // 上层
        Text("加载中...")
    }
}

4.4 完整示例：登录界面

让我们用学到的组件组合一个简单的登录界面：

@Composable
fun LoginScreen() {
    var username by remember { mutableStateOf("") }
    var password by remember { mutableStateOf("") }
    
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(24.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        // 标题
        Text(
            text = "欢迎登录",
            style = MaterialTheme.typography.headlineLarge,
            modifier = Modifier.padding(bottom = 32.dp)
        )
        
        // 用户名输入
        OutlinedTextField(
            value = username,
            onValueChange = { username = it },
            label = { Text("用户名") },
            leadingIcon = {
                Icon(Icons.Default.Person, contentDescription = null)
            },
            modifier = Modifier.fillMaxWidth()
        )
        
        Spacer(modifier = Modifier.height(16.dp))
        
        // 密码输入
        OutlinedTextField(
            value = password,
            onValueChange = { password = it },
            label = { Text("密码") },
            leadingIcon = {
                Icon(Icons.Default.Lock, contentDescription = null)
            },
            visualTransformation = PasswordVisualTransformation(),
            modifier = Modifier.fillMaxWidth()
        )
        
        Spacer(modifier = Modifier.height(24.dp))
        
        // 登录按钮
        Button(
            onClick = { /* 登录逻辑 */ },
            modifier = Modifier.fillMaxWidth()
        ) {
            Text("登录")
        }
        
        Spacer(modifier = Modifier.height(16.dp))
        
        // 注册链接
        TextButton(onClick = { }) {
            Text("还没有账号？立即注册")
        }
    }
}

@Preview(showBackground = true)
@Composable
fun LoginScreenPreview() {
    MaterialTheme {
        LoginScreen()
    }
}

---

五、本篇小结

今天我们完成了 Compose 的入门学习：

1. 了解了 Compose 是什么 - 现代声明式 UI 工具包，代码简洁、开发高效
2. 完成了环境搭建 - 创建项目、配置依赖、运行第一个应用
3. 学习了 Composable 基础 - 函数定义、参数传递、Modifier 使用、预览注解
4. 初探 Material Design 3 组件 - Text、Button、Card、TextField 等常用组件，以及 Column、Row、Box 基础布局

---

下篇预告

第二篇：核心基石 将深入讲解：

• Modifier 修饰符全解析
• Column、Row、Box 布局详解
• LazyColumn 与列表性能优化
• ConstraintLayout in Compose

敬请期待！

---

参考资源

• Jetpack Compose 官方文档
• Material Design 3 组件库
• Compose 示例代码

---

📌 系列文章导航

• 第一篇：初识 Compose（当前）✅
• 第二篇：核心基石
• 第三篇：状态管理
• 第四篇：Material 组件与主题
• 第五篇：动画与交互
• 第六篇：架构与工程化
• 第七篇：高级特性与实战

---

如果这篇文章对你有帮助，欢迎 点赞、收藏、关注！有任何问题可以在评论区留言，我会及时回复。

Generated by Kimi K2.5 Agent