Jetpack Compose 基础

1. Jetpack Compose 简介

Jetpack Compose 是 Google 推出的现代 Android UI 工具包，完全基于 Kotlin 构建，采用声明式编程范式。它彻底改变了传统 Android 的 XML 布局方式，具有以下核心优势：

  • 声明式 UI：通过描述 UI 应该呈现的状态来构建界面
  • 完全用 Kotlin 编写：与 Kotlin 语言特性深度集成
  • 实时预览：支持 IDE 中的交互式预览
  • 高性能：通过智能重组机制优化渲染

2. 基本组件与布局

可组合函数

使用 @Composable 注解定义 UI 组件：

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

常用基础组件

  • Text：显示文本
  • Button：可点击按钮
  • Image：显示图片
  • TextField：文本输入框
  • Column/Row：垂直/水平布局
  • Box：层叠布局

示例：

@Composable
fun ProfileCard() {
    Column {
        Image(painter = painterResource(R.drawable.profile), contentDescription = "Profile")
        Text("John Doe")
        Button(onClick = { /* 处理点击 */ }) {
            Text("Follow")
        }
    }
}

3. 状态管理

状态与重组

Compose 通过状态变化驱动 UI 更新：

@Composable
fun Counter() {
    var count by remember { mutableStateOf(0) }
    Button(onClick = { count++ }) {
        Text("Clicked $count times")
    }
}

状态提升

将状态移到可组合函数的调用方：

@Composable
fun Counter(count: Int, onIncrement: () -> Unit) {
    Button(onClick = onIncrement) {
        Text("Clicked $count times")
    }
}

4. 主题与样式

Material Design 支持

MaterialTheme(
    colors = darkColors(),
    typography = Typography(),
    shapes = Shapes()
) {
    // 应用内容
}

自定义主题

val MyTheme = darkColors(
    primary = Purple200,
    secondary = Teal200
)

MaterialTheme(colors = MyTheme) {
    // 应用内容
}

5. 导航处理

使用 navigation-compose 库：

val navController = rememberNavController()

NavHost(navController, startDestination = "home") {
    composable("home") { HomeScreen(navController) }
    composable("details") { DetailsScreen() }
}

6. 与 View 系统的互操作

在 Compose 中使用传统 View

AndroidView(
    factory = { context ->
        TextView(context).apply {
            text = "传统 View"
        }
    }
)

在 View 系统中使用 Compose

setContent {
    MaterialTheme {
        // Compose 内容
    }
}

7. 性能优化技巧

  1. 避免在重组中执行昂贵操作：使用 remember 缓存计算结果
  2. 使用 LazyColumn/LazyRow 处理长列表
  3. 合理使用 key 参数：帮助 Compose 正确识别项目
  4. 避免反向数据流：保持单向数据流架构

8. 实战示例：构建一个简单的微博列表

data class Post(val author: String, val content: String, val likes: Int)

@Composable
fun PostCard(post: Post, onLike: () -> Unit) {
    Card(elevation = 4.dp) {
        Column(modifier = Modifier.padding(16.dp)) {
            Text(post.author, fontWeight = FontWeight.Bold)
            Spacer(Modifier.height(8.dp))
            Text(post.content)
            Spacer(Modifier.height(8.dp))
            Button(onClick = onLike) {
                Text("Like (${post.likes})")
            }
        }
    }
}

@Composable
fun PostList(posts: List<Post>) {
    LazyColumn {
        items(posts) { post ->
            var likedPost by remember(post.id) { mutableStateOf(post) }
            PostCard(
                post = likedPost,
                onLike = { likedPost = likedPost.copy(likes = likedPost.likes + 1) }
            )
        }
    }
}

9. 学习资源推荐

  1. 官方 Compose 文档
  2. Compose 示例代码库
  3. Jetpack Compose 之路

这个章节内容涵盖了 Jetpack Compose 的核心概念和实践要点，从基础组件到状态管理，再到实际应用示例，适合已经掌握 Kotlin 基础并想进入 Android 现代 UI 开发的读者。
Last Updated::