Jetpack Compose 【一】入门：拥抱现代 Andro

• Jetpack Compose 【一】入门：拥抱现代 Android UI 开发
• Jetpack Compose 【二】状态管理详解
• Jetpack Compose 【三】附带效应、协程与异步
• Jetpack Compose 【四】动画
• Jetpack Compose【五】 高级布局与绘制技巧
• Jetpack Compose【六】终极：声明式 UI 如何重塑开发者的思维

一、什么是 Jetpack Compose？

Jetpack Compose 是 Google 推出的现代 Android UI 开发框架，它基于 声明式 UI 编程范式，旨在简化界面开发流程，让开发者能够更直观、高效地构建 UI。

声明式 UI vs 传统 View

传统 Android UI 采用的是 命令式 方式，开发者需要在 XML 中定义界面结构，并在 Activity 或 Fragment 里手动操作 View 的属性来更新 UI。而 声明式 UI（Declarative UI）模式下，我们只需描述 最终的界面状态，Compose 会自动处理界面更新。

**Jetpack Compose 的特点：

• ✅ 纯 Kotlin 编写 UI：不再需要 XML，UI 与逻辑统一管理，提升开发效率。
• ✅ 基于组件组合：通过可组合函数 (@Composable) 复用 UI 代码，提高可维护性。
• ✅ 自动 UI 更新：状态变化时，Compose 只会重新绘制受影响的组件，避免不必要的计算，提高性能。
• ✅ 与传统 View 兼容：支持与现有 View 系统混合使用，渐进式迁移更简单。

声明式 UI 代表技术： Jetpack Compose（Android）、SwiftUI（iOS）、Flutter（跨平台）。

---

二、为什么要选择 Compose？

Jetpack Compose 具备多方面的优势，使其成为未来 Android UI 开发的首选。

1️⃣ 更少的代码量

Compose 允许我们使用更少的代码完成相同的 UI 任务。例如，传统 XML + ViewBinding 需要大量模板代码，而 Compose 直接用 Kotlin 代码描述 UI 结构，代码更简洁。

示例：一个简单的按钮

XML + ViewBinding：

<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Click Me" />

val button = findViewById<Button>(R.id.button)
button.setOnClickListener { 
    Toast.makeText(context, "Clicked", Toast.LENGTH_SHORT).show()
}

Compose 实现：

Button(onClick = { 
    Toast.makeText(context, "Clicked", Toast.LENGTH_SHORT).show()
}) {
    Text("Click Me")
}

Compose 代码更直观，省去了 findViewById 以及 ViewBinding 的繁琐逻辑。

2️⃣ 高性能渲染

Compose状态发生变化时，只有受影响的可组合函数会重新执行，避免了不必要的计算和渲染，从而提高了性能。

3️⃣ 强大的开发工具支持

Compose 提供了一系列现代化工具：

• ✅ 实时预览（@Preview）：无需运行 App，直接在 Android Studio 预览 UI。
• ✅ 动画编辑器：可视化调整 Compose 动画，提升开发体验。
• ✅ Layout Inspector：检查 UI 组件层级，调试界面更方便。

---

三、Compose 基础 UI 组件详解

1️⃣ Text 组件

Text 组件用于显示文本内容，可以通过 fontSize、color、fontWeight 等属性进行样式定制。除了基本的样式，你还可以添加 maxLines 来控制最大行数，overflow 来定义文本溢出的行为。

Text(
    text = "Hello, Jetpack Compose!",
    fontSize = 20.sp,
    color = Color.Blue,
    fontWeight = FontWeight.Bold,
    maxLines = 1,
    overflow = TextOverflow.Ellipsis
)

Text 组件常用于显示标题、段落或任何需要呈现的文本内容。你还可以结合 Modifier 来调整文本的对齐方式和位置。

2️⃣ Button 组件

Button 组件用于触发用户交互事件，可以包裹任何子组件。通常，按钮内会包含一个 Text 或图标，按钮的样式（如背景色、形状等）可以通过 Modifier 来定制。

Button(
    onClick = { /* 执行操作 */ },
    shape = RoundedCornerShape(8.dp),
    colors = ButtonDefaults.buttonColors(backgroundColor = Color.Blue)
) {
    Text("Click Me", color = Color.White)
}

如果需要更复杂的交互，比如禁用按钮或根据条件变更按钮的样式，可以在 onClick 事件中添加逻辑。

3️⃣ Image 组件

Image 组件用于显示图片，可以通过 painterResource 加载资源图片，或者使用 rememberImagePainter 来加载网络图片。contentDescription 是辅助功能的重要属性，便于屏幕阅读器识别图片内容。

Image(
    painter = painterResource(id = R.drawable.ic_launcher_foreground),
    contentDescription = "App Icon",
    modifier = Modifier.size(80.dp).clip(CircleShape)
)

这里我们对 Image 进行了裁剪，变成了圆形的图标， modifier 可以进一步用于调整图片的大小、形状和布局。

4️⃣ Column & Row 组件（布局容器）

Column 和 Row 用于垂直和水平排列组件。你可以通过 horizontalAlignment 和 verticalArrangement 来控制布局内的对齐方式。

Column(
    verticalArrangement = Arrangement.spacedBy(10.dp),
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Text("Item 1")
    Text("Item 2")
    Text("Item 3")
}

Row(
    horizontalArrangement = Arrangement.spacedBy(15.dp),
    verticalAlignment = Alignment.CenterVertically
) {
    Text("Left")
    Text("Right")
}

这两个布局容器非常适合用于排版列表项、按钮组等常见布局。

5️⃣ Box 组件（类似Framelayout）

Box 组件非常适合用于重叠视图的情况。你可以在 Box 中放置多个组件，它们会按层叠的方式排列。

Box(
    modifier = Modifier.size(100.dp).background(Color.Gray)
) {
    Text(
        text = "Overlay Text",
        modifier = Modifier.align(Alignment.Center),
        color = Color.White
    )
}

通过 Modifier.align() 可以精确控制子组件的对齐方式。在图像和文本重叠显示时，Box 非常实用。

四、Modifier 使用指南

Modifier 是 Compose 中的一个重要工具，它允许你控制组件的样式、行为和布局。可以用于修改组件的大小、间距、背景、对齐方式等。

1️⃣ 基本用法

Modifier 可用于调整 UI 组件的外观和行为。例如，你可以通过 padding、fillMaxSize 等方法来改变布局。

Text(
    "Hello, Compose!",
    modifier = Modifier
        .padding(16.dp)
        .background(Color.LightGray)
        .fillMaxWidth()
)

上面的代码会给 Text 组件添加一个 16dp 的内边距，背景色为浅灰色，宽度充满父容器。

2️⃣ 高级用法

Modifier 还可以用于处理更复杂的布局需求，比如响应点击事件、拖动等：

Box(
    modifier = Modifier
        .size(100.dp)
        .background(Color.Red)
        .clickable { /* 响应点击事件 */ }
)

在这里，我们为 Box 添加了点击事件，点击时会触发某个操作。

---

三、Compose 基础 UI 组件详解

1️⃣ Text 组件（文本）

Text 组件用于显示文本内容，可以通过 fontSize、color、fontWeight 等属性进行样式定制。你还可以使用 maxLines 来控制最大行数，overflow 来定义文本溢出的行为。

Text(
    text = "Hello, Jetpack Compose!",
    fontSize = 20.sp,
    color = Color.Blue,
    fontWeight = FontWeight.Bold,
    maxLines = 1,
    overflow = TextOverflow.Ellipsis
)

• fontSize：设置字体大小。
• color：设置文本颜色。
• fontWeight：设置文本粗细。
• maxLines：限制文本最大显示行数。
• overflow：控制文本超出部分的显示方式，如 TextOverflow.Ellipsis 表示溢出部分显示省略号。

2️⃣ Button 组件（按钮）

Button 组件用于触发用户交互事件。你可以通过 onClick 设置按钮的点击事件，并通过 Modifier 调整按钮的样式（如背景色、形状等）。

Button(
    onClick = { /* 执行操作 */ },
    shape = RoundedCornerShape(8.dp),
    colors = ButtonDefaults.buttonColors(backgroundColor = Color.Blue)
) {
    Text("Click Me", color = Color.White)
}

• onClick：按钮点击时触发的事件。
• shape：设置按钮的形状，这里使用了圆角形状。
• colors：设置按钮的背景色和其他颜色属性。
• Text：按钮内的文本。

3️⃣ Image 组件（图片）

Image 组件用于显示图片，可以通过 painterResource 加载资源图片，或者使用 rememberImagePainter 来加载网络图片。contentDescription 便于辅助功能的使用。

Image(
    painter = painterResource(id = R.drawable.ic_launcher_foreground),
    contentDescription = "App Icon",
    modifier = Modifier.size(80.dp).clip(CircleShape)
)

• painter：加载图片的来源。
• contentDescription：辅助功能描述，帮助屏幕阅读器识别图片。
• modifier：用于控制图片的大小、形状等样式。

4️⃣ Column & Row 组件（布局容器）

Column 和 Row 是常用的布局容器。Column 用于垂直排列，Row 用于水平排列。你可以通过 horizontalAlignment 和 verticalArrangement 来控制组件对齐方式。

Column(
    verticalArrangement = Arrangement.spacedBy(10.dp),
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Text("Item 1")
    Text("Item 2")
    Text("Item 3")
}

Row(
    horizontalArrangement = Arrangement.spacedBy(15.dp),
    verticalAlignment = Alignment.CenterVertically
) {
    Text("Left")
    Text("Right")
}

• verticalArrangement：设置竖直方向的排列方式。
• horizontalArrangement：设置水平方向的排列方式。
• verticalAlignment 和 horizontalAlignment：控制子组件的对齐方式。

5️⃣ Box 组件（层叠布局）

Box 组件用于重叠视图，通常用于显示叠加元素。通过 Modifier.align() 可以精确控制子组件的位置。

Box(
    modifier = Modifier.size(100.dp).background(Color.Gray)
) {
    Text(
        text = "Overlay Text",
        modifier = Modifier.align(Alignment.Center),
        color = Color.White
    )
}

• modifier：设置 Box 组件的样式，例如大小、背景色。
• align：设置子组件的对齐方式，在此示例中为居中对齐。

---

四、Modifier 使用指南

Modifier 是 Compose 中非常核心的概念，它允许你对 UI 组件进行样式、布局、行为等方面的修改。通过 Modifier，你可以调整组件的大小、间距、背景、对齐、状态等特性。

1️⃣ 基本用法

Modifier 最常见的用法是设置组件的外观和布局属性。常用的属性包括 padding、background、fillMaxSize、size 等。

Text(
    "Hello, Compose!",
    modifier = Modifier
        .padding(16.dp)
        .background(Color.LightGray)
        .fillMaxWidth()
)

• padding：为组件设置内边距。你可以指定四个方向的内边距，或者统一设置。
• background：设置组件的背景色，可以使用 Color 或者 Brush 来定义渐变色背景。
• fillMaxWidth：让组件的宽度充满父容器。类似的属性还有 fillMaxHeight、fillMaxSize 等。

2️⃣ 布局相关

Modifier 可以与布局容器（如 Column、Row、Box 等）结合使用，以控制组件的对齐和排列方式。

• fillMaxWidth 和 fillMaxHeight：使组件填充父容器的宽度或高度。
• wrapContentSize：使组件的大小包裹其内容。
• align：通过 Modifier.align() 可以控制组件在父容器中的对齐方式。

Box(
    modifier = Modifier
        .size(100.dp)
        .background(Color.Gray)
) {
    Text(
        text = "Center",
        modifier = Modifier.align(Alignment.Center),
        color = Color.White
    )
}

• align：用于设置子组件在 Box 内的对齐方式，这里是居中对齐。

3️⃣ 状态与交互

Modifier 还可以用来处理交互事件，例如响应点击、拖动、滑动等。

• clickable：使组件变得可点击，并触发点击事件。
• indication：用于显示点击、焦点等状态的视觉效果。

Box(
    modifier = Modifier
        .size(100.dp)
        .background(Color.Red)
        .clickable { /* 点击事件 */ }
)

• clickable：将组件变为可点击，点击时触发相应事件。你可以传递 onClick Lambda 作为点击事件的响应。
• indication：与点击效果结合，提供可视化反馈，例如点击时的阴影效果。

4️⃣ 变换与动画

Modifier 还支持常见的变换操作，如旋转、缩放、平移等，常用于动画和动态效果。

• graphicsLayer：控制旋转、缩放、透明度等变换。
• rotate：旋转组件。
• scale：缩放组件。
• offset：偏移组件的位置。

Box(
    modifier = Modifier
        .size(100.dp)
        .background(Color.Blue)
        .graphicsLayer(rotationZ = 45f) // 旋转组件
)

• graphicsLayer：用于对组件应用变换，如旋转、缩放、透明度等。
• rotationZ：旋转角度。
• scaleX、scaleY：设置水平和垂直缩放比例。

5️⃣ 圆形、圆角和裁剪

Modifier 允许你轻松将组件裁剪成圆形或圆角矩形，这对于实现现代 UI 效果非常有用。

• clip：裁剪组件的形状，例如圆形、圆角矩形等。
• RoundedCornerShape：用于定义圆角的大小。
• CircleShape：将组件裁剪为圆形。

Box(
    modifier = Modifier
        .size(100.dp)
        .background(Color.Green)
        .clip(CircleShape) // 裁剪为圆形
        .border(2.dp, Color.Black) // 添加边框
)

• clip(CircleShape) ：将组件裁剪为圆形。
• clip(RoundedCornerShape(16.dp)) ：将组件裁剪为圆角矩形，圆角半径为 16.dp。
• border：为组件添加边框，可以与 clip 配合使用，确保圆角或圆形边框效果。

Box(
    modifier = Modifier
        .size(100.dp)
        .background(Color.Red)
        .clip(RoundedCornerShape(16.dp)) // 圆角裁剪
        .border(2.dp, Color.Black) // 添加边框
)

6️⃣ 阴影效果

Modifier 也可以为组件添加阴影效果，这通常与 clip 和 background 配合使用，以增加层次感和视觉效果。

• shadow：为组件添加阴影，可以设置阴影的半径、颜色等。

Box(
    modifier = Modifier
        .size(100.dp)
        .background(Color.Yellow)
        .clip(RoundedCornerShape(16.dp)) // 圆角裁剪
        .shadow(8.dp, RoundedCornerShape(16.dp)) // 添加阴影
)

• shadow：设置阴影的半径，通常与 clip 配合使用来确保阴影与组件的形状一致。

---

五、使用 LazyColumn 构建高效列表

LazyColumn 用于高效渲染大列表，按需加载数据，避免一次性创建所有子项，提高性能。

val items = listOf("Item1", "Item2", "Item3", "Item4")

LazyColumn {
    items(items.size) { index ->
        Text(items[index], modifier = Modifier.padding(16.dp))
    }
}

相比 RecyclerView，LazyColumn 省去了 Adapter 和 ViewHolder 逻辑，代码更简洁。同样，它通过懒加载的方式仅渲染当前屏幕内可见的列表项，从而提升性能

---

结语

Jetpack Compose 作为 Android UI 未来的发展方向，不仅简化了 UI 开发流程，还提供了更强的性能优化和更现代化的工具支持。本篇文章介绍了 Compose 的核心概念、基础组件、Modifier 使用以及高效列表构建。下一步，我们将深入学习 Compose 的状态管理，理解 remember、mutableStateOf 以及 ViewModel 结合方式，敬请期待！ 🚀