Jetpack Compose 入门：从默认工程到实战开发

Android Jetpack Compose 是 Google 推出的声明式 UI 框架，旨在简化 Android 应用的开发流程。本文将基于 Android Studio 生成的默认工程代码，结合 Compose 的核心特性（如 enableEdgeToEdge、Scaffold 等），快速上手 Jetpack Compose 开发。

---

一、默认工程结构解析

当在 Android Studio 中创建一个新的 Compose 项目时，系统会自动生成以下代码结构：

1. MainActivity.kt

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            ComposeApplicationTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    Greeting(
                        name = "Android",
                        modifier = Modifier.padding(innerPadding)
                    )
                }
            }
        }
    }
}

2. Greeting 函数

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

3. Preview 预览函数

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

---

二、核心概念与新特性详解

1. enableEdgeToEdge()：沉浸式全屏体验

enableEdgeToEdge() 是 Android 14 引入的新 API，允许应用内容扩展到屏幕边缘（包括状态栏和导航栏），实现真正的沉浸式体验。

• 原理：

  • 通过调用 WindowInsetsControllerCompat 的 setSystemBarsBehavior() 和 setSystemBarsAppearance() 方法，动态调整系统 UI 的显示方式。
  • 应用内容会覆盖系统栏区域，但需通过 Modifier.systemBarsPadding() 或 Scaffold 的 contentPadding 参数避免内容被遮挡。

• 示例代码：

  enableEdgeToEdge()
  setContent {
      ComposeApplicationTheme {
          Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
              Greeting(
                  name = "Android",
                  modifier = Modifier.padding(innerPadding)
              )
          }
      }
  }

---

2. Scaffold：Material Design 布局骨架

Scaffold 是 Material Design 的基础布局组件，提供了一种统一的方式来构建包含顶部栏、底部导航栏、抽屉等标准 UI 元素的界面。

2.1 核心参数

• modifier ：用于设置整个 Scaffold 的修饰符（如 fillMaxSize()）。
• topBar ：顶部栏（如 TopAppBar）。
• bottomBar ：底部栏（如 BottomAppBar）。
• floatingActionButton：悬浮操作按钮。
• content ：主内容区域，需传入 PaddingValues 以适配系统栏和组件的内边距。

2.2 示例代码

Scaffold(
    topBar = {
        TopAppBar(title = { Text("Compose Demo") })
    },
    floatingActionButton = {
        FloatingActionButton(onClick = { /* 操作逻辑 */ }) {
            Icon(Icons.Filled.Add, contentDescription = "Add")
        }
    }
) { innerPadding ->
    // 主内容区域
    Greeting(name = "Android", modifier = Modifier.padding(innerPadding))
}

---

3. @Preview：实时预览 UI

@Preview 注解允许开发者在 Android Studio 的预览面板中直接查看 Composable 函数的 UI 效果，无需运行应用。

3.1 使用方法

• 在 Composable 函数上添加 @Preview 注解。
• 可通过 showBackground、device 等参数自定义预览效果。

3.2 示例代码

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

---

三、关键组件与交互实践

1. Text：文本显示

Text 是 Compose 中最基础的组件，用于显示静态或动态文本。

1.1 常用参数

• text：显示的文本内容。
• color ：文字颜色（支持 Color 类或十六进制值）。
• fontSize ：字体大小（单位为 sp）。
• modifier ：修饰符（如 padding、clickable 等）。

1.2 示例代码

Text(
    text = "Hello Android!",
    color = Color.Blue,
    fontSize = 24.sp,
    modifier = Modifier.padding(16.dp)
)

---

2. Button：用户交互

Button 是 Compose 中的交互组件，用于触发用户操作。

2.1 常用参数

• onClick：点击事件回调。
• enabled ：是否启用按钮（默认为 true）。
• modifier ：修饰符（如 padding、size）。

2.2 示例代码

Button(
    onClick = { /* 点击逻辑 */ },
    modifier = Modifier.padding(16.dp)
) {
    Text("Click Me")
}

---

3. Column 与 Row：布局组合

Column 和 Row 是 Compose 中的布局组件，分别用于纵向和横向排列子组件。

3.1 示例代码

Column(
    modifier = Modifier.fillMaxSize(),
    horizontalAlignment = Alignment.CenterHorizontally,
    verticalArrangement = Arrangement.SpaceEvenly
) {
    Text("Top")
    Text("Center")
    Text("Bottom")
}

Row(
    modifier = Modifier.fillMaxWidth(),
    horizontalArrangement = Arrangement.SpaceAround
) {
    Text("Left")
    Text("Center")
    Text("Right")
}

---

四、状态管理与副作用处理

1. mutableStateOf 与 remember

Compose 通过 mutableStateOf 和 remember 实现状态管理，确保 UI 随数据变化而更新。

1.1 示例代码

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

---

2. LaunchedEffect：执行副作用

LaunchedEffect 用于在 Composable 函数中执行一次性操作（如初始化、网络请求）。

2.1 示例代码

@Composable
fun Initialize() {
    LaunchedEffect(Unit) {
        // 执行初始化操作
        delay(1000)
        Log.d("Compose", "Initialization complete")
    }
}

---

五、性能优化与最佳实践

1. 避免过度绘制（Overdraw）

• 使用 Modifier.graphicsLayer(alpha = 0.5f) 替代透明背景，减少图层叠加。
• 避免嵌套过多 Box 或 Column，优先使用 Scaffold 提供的标准布局。

2. 状态管理优化

• 使用 derivedStateOf 计算衍生状态，减少不必要的重组。
• 对于复杂状态，结合 ViewModel 和 LiveData 实现数据持久化。

3. 资源适配

• 图片资源建议使用 ImageBitmap.imageResource 加载本地资源。
• 网络图片推荐使用 Coil 或 Glide 库。

---

六、实战示例：构建一个简单登录界面

1. 代码实现

@Composable
fun LoginScreen() {
    var username by remember { mutableStateOf("") }
    var password by remember { mutableStateOf("") }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        verticalArrangement = Arrangement.Center
    ) {
        TextField(
            value = username,
            onValueChange = { username = it },
            label = { Text("Username") }
        )
        Spacer(modifier = Modifier.height(16.dp))
        TextField(
            value = password,
            onValueChange = { password = it },
            label = { Text("Password") },
            visualTransformation = PasswordVisualTransformation()
        )
        Spacer(modifier = Modifier.height(24.dp))
        Button(onClick = { /* 登录逻辑 */ }) {
            Text("Login")
        }
    }
}

---

七、总结

通过本文，您已经掌握了 Jetpack Compose 的核心概念和实践技巧，包括：

1. 沉浸式全屏体验 ：通过 enableEdgeToEdge() 实现内容扩展到屏幕边缘。
2. 标准布局结构 ：使用 Scaffold 快速搭建符合 Material Design 的界面。
3. 核心组件使用 ：掌握 Text、Button、Column 等基础组件的用法。
4. 性能优化策略：减少过度绘制、优化状态管理。

Jetpack Compose 的声明式编程模式让 UI 开发更加直观和高效。随着对 Compose 的深入学习，您将能够构建出更复杂、更流畅的 Android 应用。

---

参考资料

• Jetpack Compose 官方文档
• Android 14 新特性：Edge-to-Edge 支持
• Coil 图片加载库