




# 概述

Jetpack Compose 是 Google 推出的现代化 Android 声明式 UI 工具包，使用 Kotlin 语言构建，彻底改变了传统基于 XML 的 UI 开发方式。它以 **声明式**、**函数式** 和 **响应式** 的方式编写界面，让 UI 开发更简洁、高效、可组合。

本教程带你从零开始，系统掌握 Compose 的核心概念与高级技巧。

---

# 一、为什么选择 Jetpack Compose？

### 传统 View 系统的痛点

- XML 与 Java/Kotlin 分离，维护困难
- 布局嵌套深，性能差
- 代码冗长，难以复用
- 动画实现复杂

## Compose 的优势

 **声明式 UI**：描述“UI 应该是什么样”，而非“如何构建 UI”  
 **Kotlin First**：纯 Kotlin 编写，充分利用语言特性  
 **可组合函数**：小部件自由组合，高度可复用  
 **实时预览**：Android Studio 支持 `@Preview` 注解，无需运行 App  
 **响应式**：状态变化自动更新 UI  
 **性能优秀**：智能重组（Recomposition），减少不必要的绘制  

---

# 二、核心概念

## 1. 可组合函数（@Composable）

所有 UI 组件都是用 `@Composable` 注解的函数。

```kotlin
@Composable
fun Greeting(name: String) {
    Text(text = "Hello, $name!")
}
```
## 2. 声明式 UI
传统方式（命令式）：

```Kotlin

val textView = findViewById<TextView>(R.id.text)
textView.text = "Hello"
```
Compose 方式（声明式）：

```Kotlin

Text(text = "Hello")
```
你声明 UI 的状态，Compose 负责更新。

## 3. 状态与重组（State & Recomposition）
当状态变化时，Compose 会自动重新调用可组合函数（重组）。

```Kotlin

@Composable
fun Counter() {
    var count by remember { mutableStateOf(0) }

    Button(onClick = { count++ }) {
        Text("Clicked $count times")
    }
}
```
remember：在重组期间保留状态
mutableStateOf：创建可观察状态，变化时触发重组
 推荐使用 ViewModel 管理 UI 状态：

```Kotlin

@Composable
fun Counter(viewModel: CounterViewModel) {
    val count by viewModel.count.collectAsState()

    Button(onClick = { viewModel.increment() }) {
        Text("Clicked $count times")
    }
}
```
# 三、基础 UI 组件
## 1. Text
```Kotlin

Text(
    text = "Hello Compose",
    fontSize = 24.sp,
    fontWeight = FontWeight.Bold,
    color = Color.Blue
)
```
## 2. Image
```Kotlin

Image(
    painter = painterResource(R.drawable.ic_logo),
    contentDescription = "Logo",
    contentScale = ContentScale.Fit
)
```
## 3. Button
```Kotlin

Button(onClick = { /* handle click */ }) {
    Text("Click Me")
}
```
## 4. TextField
```Kotlin

var text by remember { mutableStateOf("") }
TextField(
    value = text,
    onValueChange = { text = it },
    label = { Text("Enter text") }
)
```
# 四、布局系统（Layouts）
Compose 提供了强大的布局容器。

## 1. Column（垂直排列）
```Kotlin

Column(
    modifier = Modifier.padding(16.dp),
    verticalArrangement = Arrangement.Center,
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Text("Item 1")
    Text("Item 2")
    Button(onClick = {}) { Text("OK") }
}
```
## 2. Row（水平排列）
```Kotlin

Row(
    horizontalArrangement = Arrangement.SpaceBetween,
    verticalAlignment = Alignment.CenterVertically
) {
    Text("Left")
    Text("Right")
}
```
## 3. Box（层叠布局）
```Kotlin

Box {
    Image(painter = ..., contentDescription = null)
    Text("Overlay Text", modifier = Modifier.align(Alignment.Center))
}
```
## 4. ConstraintLayout（高级约束）
```Kotlin

ConstraintLayout {
    val (text, button) = createRefs()

    Text(
        "Hello",
        modifier = Modifier.constrainAs(text) {
            top.linkTo(parent.top)
            start.linkTo(parent.start)
        }
    )

    Button(
        onClick = { },
        modifier = Modifier.constrainAs(button) {
            bottom.linkTo(parent.bottom)
            end.linkTo(parent.end)
        }
    ) {
        Text("Click")
    }
}
```
需添加依赖：implementation "androidx.constraintlayout:constraintlayout-compose:1.0.1"

# 五、Modifier（修饰符）
## 1.用法
Modifier 是 Compose 的核心设计模式，用于修饰组件的外观和行为。

```Kotlin

Text(
    "Hello",
    modifier = Modifier
        .padding(16.dp)
        .fillMaxWidth()
        .background(Color.Gray)
        .clickable { /* handle click */ }
        .border(2.dp, Color.Black)
)
```
## 2.常用 Modifier

| Modifier | 作用 |
| ---- | ---- |
| padding() | 内边距 |
| fillMaxWidth() / fillMaxHeight() | 填充父容器 |
| size(width, height) | 设置大小 |
| background() | 背景颜色或形状 |
| clickable { } | 点击事件 |
| border() | 边框 |
| clip() | 裁剪形状（如 RoundedCornerShape(8.dp)） |

 顺序很重要！padding().background() 与 background().padding() 效果不同。

# 六、列表与滚动
## 1. LazyColumn（垂直滚动列表）
```Kotlin

@Composable
fun MessageList(messages: List<String>) {
    LazyColumn {
        items(messages) { message ->
            MessageItem(message)
        }
    }
}
```
## 2. LazyRow（水平滚动）
```Kotlin

LazyRow {
    items(10) { index ->
        Chip(text = "Item $index")
    }
}
```
 Lazy 前缀表示“懒加载”，只渲染可见项，性能优秀。

# 七、主题与样式
## 1.Compose 内置 Material Design 3 主题。

```Kotlin

MaterialTheme(
    colorScheme = ColorScheme.Light(
        primary = Color.Blue,
        secondary = Color.Green
    ),
    typography = Typography(
        bodyLarge = TextStyle(fontSize = 18.sp)
    ),
    shapes = Shapes(
        medium = RoundedCornerShape(8.dp)
    )
) {
    // Your UI here
    Greeting("Android")
}
```
## 2.使用主题属性：

```Kotlin

Text(
    "Themed Text",
    style = MaterialTheme.typography.headlineMedium,
    color = MaterialTheme.colorScheme.primary
)
```
# 八、导航（Navigation）
使用 Navigation Component + Compose。

## 1. 添加依赖
```Kotlin

implementation "androidx.navigation:navigation-compose:2.7.6"
```
## 2. 定义导航图
```Kotlin

@Composable
fun NavGraph() {
    val navController = rememberNavController()

    NavHost(navController = navController, startDestination = "home") {
        composable("home") { HomeScreen() }
        composable("profile") { ProfileScreen() }
        composable("detail/{id}") { backStackEntry ->
            val id = backStackEntry.arguments?.getString("id")
            DetailScreen(id)
        }
    }
}
```
## 3. 导航跳转
```Kotlin

// 前进
navController.navigate("profile")

// 带参数
navController.navigate("detail/123")

// 返回
navController.popBackStack()
```
# 九、副作用（Side Effects）
处理生命周期、数据加载等副作用。
| Effect               | 用途                         |
|----------------------|------------------------------|
| LaunchedEffect       | 在作用域内启动协程           |
| DisposableEffect     | 资源释放（如订阅）           |
| rememberCoroutineScope | 获取协程作用域               |
| SideEffect           | 将状态同步到非 Compose 代码  |

```Kotlin

@Composable
fun MyScreen(viewModel: MyViewModel) {
    val coroutineScope = rememberCoroutineScope()

    LaunchedEffect(Unit) {
        viewModel.loadData()
    }

    DisposableEffect(key1 = "connection") {
        val connection = connect()
        onDispose { connection.disconnect() }
    }
}
```
# 十、高级技巧
## 1. 自定义布局（Custom Layout）
```Kotlin

@Composable
fun MyCustomLayout(
    modifier: Modifier = Modifier,
    content: @Composable () -> Unit
) {
    Layout(
        content = content,
        modifier = modifier
    ) { measurables, constraints ->
        // 手动测量和布局子项
        layout(width, height) {
            // 放置子项
        }
    }
}
```
## 2. 动画（Animation）
```Kotlin

var enabled by remember { mutableStateOf(true) }
val backgroundColor by animateColorAsState(
    targetValue = if (enabled) Color.Green else Color.Red,
    tween(durationMillis = 300)
)

Box(
    modifier = Modifier
        .size(100.dp)
        .background(backgroundColor)
        .clickable { enabled = !enabled }
)
```
## 3. 互操作（Interop）
在 Compose 中使用 View：

```Kotlin

AndroidView(
    factory = { context ->
        WebView(context).apply {
            loadUrl("https://example.com")
        }
    }
)
```
在 Activity 中使用 Compose：

```Kotlin

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyAppTheme {
                Greeting("Android")
            }
        }
    }
}
```
# 十一、最佳实践
 **必须做：**

 - 使用 ViewModel 管理 UI 状态
 - 为可组合函数添加 @Preview
 - 使用 remember 缓存计算结果
 - 避免在可组合函数中执行耗时操作
 - 合理使用 Modifier 顺序
 
 **避免：**

 - 过度嵌套布局
 - 在 @Composable 中创建对象（除非 remember）
 - 忽略 key 参数（在 items 中）

Jetpack Compose 是 Google 推出的现代化 Android 声明式 UI 工具包，使用 Kotlin 语言构建，彻底改变了传统基于 XML 的 UI 开发方式。它以 声明式、函数式 和 响应式 的方式编写界面，让 UI 开发更简洁、高效、可组合。

Android Jetpack Compose 从入门到精通

客户端

编程语言

前端

Jetpack Compose是Google推出的现代化Android UI工具包，采用Kotlin声明式编程，简化UI开发流程。本教程涵盖核心概念、布局系统、状态管理、主题样式和高级技巧，帮助开发者快速构建高效、可维护的Android应用界面。

Android

容器

Kotlin

Java

AI驱动 智领未来

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

Android Jetpack Compose 从入门到精通-腾讯云开发者社区-腾讯云

Android Jetpack Compose 从入门到精通

Android Jetpack Compose 从入门到精通

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐