Android Jetpack Compose 入门教程

一、什么是 Jetpack Compose？

Jetpack Compose 是 Android 官方推出的现代化 UI 工具包，它使用声明式的方式来构建用户界面。与传统的 XML 布局相比，Compose 具有以下优势：

• 声明式 UI：描述 UI 应该是什么样子，而不是如何构建
• 更少的代码：相比 XML 布局，代码量减少约 50%
• 实时预览：在 Android Studio 中可以实时预览 UI 效果
• Kotlin 原生：完全使用 Kotlin 编写，与 Kotlin 语言特性完美结合

二、Compose 基础概念

2.1 @Composable 注解

@Composable 是 Compose 中最核心的注解，它标记一个函数为「可组合函数」。可组合函数用于构建 UI 组件。

// 这是一个最简单的可组合函数
@Composable
fun Greeting(name: String) {
    Text(text = "Hello, $name!")
}

解析：

• @Composable 注解告诉编译器这是一个 UI 组件函数
• 函数名使用帕斯卡命名法（首字母大写）
• 函数可以接收参数，用于动态显示内容

2.2 Modifier 修饰符

Modifier 是 Compose 中用于修改组件样式、布局和行为的核心工具。

@Composable
fun ModifierExample() {
    Text(
        text = "Hello World",
        modifier = Modifier
            .padding(16.dp)           // 内边距
            .background(Color.Green)   // 背景颜色
            .fillMaxWidth()           // 填充最大宽度
            .height(50.dp)             // 固定高度
            .border(2.dp, Color.White) // 边框
    )
}

常用 Modifier 方法：

• .padding() - 设置内边距
• .background() - 设置背景颜色
• .fillMaxWidth() - 填充父容器宽度
• .size() - 设置固定尺寸
• .border() - 设置边框
• .clickable() - 添加点击事件

三、基础布局组件

3.1 Column - 垂直布局

Column 用于垂直排列子组件（从上到下）。

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

3.2 Row - 水平布局

Row 用于水平排列子组件（从左到右）。

@Composable
fun RowExample() {
    Row(
        modifier = Modifier.padding(16.dp),
        horizontalArrangement = Arrangement.SpaceEvenly // 均匀分布
    ) {
        Text("左")
        Text("中")
        Text("右")
    }
}

3.3 Box - 层叠布局

Box 用于层叠排列子组件，后面的组件会覆盖在前面的组件之上。

@Composable
fun BoxExample() {
    Box(
        modifier = Modifier
            .size(200.dp)
            .background(Color.LightGray)
    ) {
        Text(
            "底层文本",
            modifier = Modifier.align(Alignment.BottomStart)
        )
        Text(
            "顶层文本", 
            modifier = Modifier.align(Alignment.TopEnd)
        )
    }
}

四、常用 UI 组件

4.1 Text 文本组件

@Composable
fun TextExample() {
    Text(
        text = "Hello Android",
        color = Color.White,                    // 文字颜色
        fontSize = 24.sp,                       // 字体大小
        fontWeight = FontWeight.Bold,           // 字体粗细
        textAlign = TextAlign.Center,           // 文字对齐
        modifier = Modifier
            .padding(16.dp)
            .background(Color.Blue)
            .fillMaxWidth()
    )
}

4.2 Button 按钮组件

@Composable
fun ButtonExample() {
    // 使用 remember 保存按钮状态
    val buttonEnabled = remember { mutableStateOf(true) }
    
    Button(
        onClick = { 
            // 点击事件处理
            buttonEnabled.value = false
            println("按钮被点击了！")
        },
        modifier = Modifier
            .padding(16.dp)
            .fillMaxWidth(),
        enabled = buttonEnabled.value,          // 按钮是否可用
        colors = ButtonDefaults.buttonColors(
            backgroundColor = Color.Green,      // 背景颜色
            contentColor = Color.White           // 文字颜色
        ),
        shape = RoundedCornerShape(8.dp),       // 圆角形状
        elevation = ButtonDefaults.elevation(
            defaultElevation = 4.dp,            // 默认阴影
            pressedElevation = 8.dp             // 按下时的阴影
        )
    ) {
        Text("点击我")
    }
}

4.3 Image 图片组件

@Composable
fun ImageExample() {
    Image(
        painter = painterResource(id = R.drawable.ic_launcher_foreground),
        contentDescription = "应用图标",         // 无障碍描述（必填）
        modifier = Modifier
            .size(100.dp)                       // 图片尺寸
            .clip(RoundedCornerShape(16.dp))    // 圆角裁剪
            .border(2.dp, Color.Black),        // 边框
        contentScale = ContentScale.Crop        // 图片缩放模式
    )
}

4.4 Surface 表面组件

Surface 是一个带有材质设计效果的容器。

@Composable
fun SurfaceExample() {
    Surface(
        modifier = Modifier
            .padding(16.dp)
            .fillMaxWidth()
            .height(100.dp),
        elevation = 8.dp,                       // 阴影高度
        shape = RoundedCornerShape(16.dp),      // 圆角
        color = MaterialTheme.colors.primary    // 使用主题颜色
    ) {
        Column(
            modifier = Modifier.padding(16.dp),
            verticalArrangement = Arrangement.Center
        ) {
            Text("Surface 示例", style = MaterialTheme.typography.h6)
            Text("这是一个带有阴影的容器")
        }
    }
}

五、列表和滚动

5.1 LazyColumn - 垂直懒加载列表

LazyColumn 用于显示大量数据，只会渲染可见区域的内容，性能高效。

@Composable
fun LazyColumnExample() {
    val items = List(100) { "Item $it" }
    
    LazyColumn {
        items(items) { item ->
            Text(
                text = item,
                modifier = Modifier
                    .padding(16.dp)
                    .fillMaxWidth()
                    .background(Color.LightGray)
            )
        }
    }
}

5.2 Spacer - 间距组件

Spacer 用于在布局中创建空白间距。

@Composable
fun SpacerExample() {
    Column {
        Text("上面的文本")
        Spacer(modifier = Modifier.height(16.dp)) // 16dp 的垂直间距
        Text("下面的文本")
        Spacer(modifier = Modifier.width(32.dp))  // 32dp 的水平间距
    }
}

六、状态管理

6.1 remember 和 mutableStateOf

在 Compose 中，使用 remember 和 mutableStateOf 来管理组件的状态。

@Composable
fun CounterExample() {
    // 使用 remember 记住计数器的值
    val count = remember { mutableStateOf(0) }
    
    Column(
        modifier = Modifier.padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text("计数器: ${count.value}", fontSize = 24.sp)
        
        Button(
            onClick = { count.value++ } // 点击时计数器加1
        ) {
            Text("增加")
        }
        
        Button(
            onClick = { count.value = 0 } // 点击时重置
        ) {
            Text("重置")
        }
    }
}

七、主题和样式

7.1 使用 MaterialTheme

MaterialTheme 提供了统一的主题配置。

@Composable
fun MyApp() {
    MaterialTheme {
        // 整个应用使用 Material 主题
        Surface(
            modifier = Modifier.fillMaxSize(),
            color = MaterialTheme.colors.background
        ) {
            Column(
                modifier = Modifier.padding(16.dp)
            ) {
                Text(
                    "标题",
                    style = MaterialTheme.typography.h4,
                    color = MaterialTheme.colors.primary
                )
                Text(
                    "正文",
                    style = MaterialTheme.typography.body1
                )
            }
        }
    }
}

八、完整示例

8.1 简单的待办事项应用

@Composable
fun TodoApp() {
    // 待办事项列表
    val todos = remember { mutableStateListOf("学习 Compose", "写代码", "测试应用") }
    // 新事项输入框文本
    val newTodo = remember { mutableStateOf("") }
    
    Column(
        modifier = Modifier.padding(16.dp)
    ) {
        // 标题
        Text(
            "待办事项",
            style = MaterialTheme.typography.h4,
            modifier = Modifier.padding(bottom = 16.dp)
        )
        
        // 输入框和添加按钮
        Row {
            TextField(
                value = newTodo.value,
                onValueChange = { newTodo.value = it },
                placeholder = { Text("输入新事项") },
                modifier = Modifier.weight(1f)
            )
            
            Button(
                onClick = {
                    if (newTodo.value.isNotBlank()) {
                        todos.add(newTodo.value)
                        newTodo.value = ""
                    }
                },
                modifier = Modifier.padding(start = 8.dp)
            ) {
                Text("添加")
            }
        }
        
        Spacer(modifier = Modifier.height(16.dp))
        
        // 待办事项列表
        LazyColumn {
            items(todos) { todo ->
                Card(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(vertical = 4.dp),
                    elevation = 2.dp
                ) {
                    Row(
                        modifier = Modifier.padding(16.dp),
                        horizontalArrangement = Arrangement.SpaceBetween
                    ) {
                        Text(todo)
                        IconButton(
                            onClick = { todos.remove(todo) }
                        ) {
                            Icon(Icons.Default.Delete, "删除")
                        }
                    }
                }
            }
        }
    }
}

九、开发技巧

9.1 代码格式化

在 Android Studio 中，可以使用 Ctrl + Alt + L（Windows/Linux）或 Cmd + Option + L（Mac）来格式化代码。

9.2 实时预览

在函数上方添加 @Preview 注解，可以在 Android Studio 中实时预览 UI 效果：

@Preview(showBackground = true)
@Composable
fun PreviewExample() {
    Text("这是预览文本")
}

9.3 调试技巧

• 使用 println() 在 Logcat 中输出调试信息
• 使用 Modifier.background(Color.Red) 临时添加背景色来查看组件边界
• 使用 Android Studio 的 Layout Inspector 查看组件层次结构

十、学习路径建议

对于初学者，建议按照以下顺序学习：

1. 基础概念：理解 @Composable、Modifier、状态管理
2. 布局组件：掌握 Column、Row、Box 的使用
3. 常用组件：学习 Text、Button、Image 等基础组件
4. 列表和滚动：掌握 LazyColumn 的使用
5. 主题和样式：学习 MaterialTheme 的应用
6. 高级特性：学习动画、导航、架构等

总结

Jetpack Compose 是 Android 开发的未来趋势，它让 UI 开发变得更加简单、直观。通过本教程，你应该已经掌握了 Compose 的基础知识。继续练习和探索，你会发现 Compose 的强大之处！

记住：实践是最好的学习方式！