Jetpack Compose 约束布局 ConstraintLayout 入门与实战指南

之前一直在做 Jetpack Compose 系列的中文讲解，前面几篇把布局基础、状态管理、常用组件都过了一遍。这次我们来看系列的第 9 篇：约束布局 ConstraintLayout。在传统 View 体系里，ConstraintLayout 几乎是复杂页面绕不开的选择，它用「约束」替代「嵌套」，能有效减少布局层级。到了 Compose 声明式 UI 时代，官方也提供了对应的 Compose 版本，用法从 XML 文件变成了一段 Kotlin DSL，思路不同，但解决的问题一致。

这篇文章会从概念说起，然后带你配置依赖、拆解核心 API，最后用一个完整案例串一遍。无论你是刚开始学 Compose，还是已经在项目里使用传统 ConstraintLayout，想迁移到声明式写法，都可以跟着跑一遍。学完之后，你应该能独立用 Compose 写出扁平化、可维护的复杂布局，并且知道什么时候该用它、什么时候不该用它。

1. 背景与核心概念

1.1 什么是约束布局

先用一句通俗的话解释：约束布局就是「通过描述子组件与父组件、子组件与子组件之间的相对关系，来决定每个组件最终位置」的布局容器。

在传统安卓开发里，我们通常会写一个 XML 文件：

<androidx.constraintlayout.widget.ConstraintLayout android:layout_width="match_parent" android:layout_height="match_parent"> <Button android:id="@+id/btnLogin" android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout>

这里的layout_constraintTop_toTopOf表示「按钮的顶部对齐父容器的顶部」，layout_constraintStart_toStartOf表示「按钮的起始边对齐父容器的起始边」，再加上End_toEndOf，就能让按钮水平居中。

传统布局里实现同样的效果，你可能需要多层嵌套 LinearLayout 或者 RelativeLayout，而 ConstraintLayout 可以在一个扁平的容器里完成全部定位。这是它最核心的价值：减少布局层级，提升测量和绘制性能。

到了 Compose 时代，布局方式从 XML 变成了 Kotlin 代码。我们依然可以用 Column、Row、Box 这些基础容器组合出界面，但如果是比较复杂的相对定位，嵌套层级会很深，阅读和维护都比较痛苦。这时候，Compose 版本的 ConstraintLayout 就派上了用场。

1.2 Compose 中为什么还需要 ConstraintLayout

有人可能会问：Compose 里已经有 Column、Row、Box 了，为什么还要引入一个看似更复杂的布局容器？

答案是：基础容器适合处理线性排列和简单叠放，但处理「组件 A 要在组件 B 的右边，同时底部对齐组件 C 的顶部」这类复杂关系时，嵌套会变得非常深。

举一个例子，假设我们要实现一个卡片布局：

• 头像在左上角
• 用户名在头像右侧
• 描述文字在用户名下方
• 关注按钮在卡片右侧，垂直方向居中于头像
• 底部分隔线下面还有一排操作按钮

如果只用 Row、Column、Box，很可能会写出这样的结构：

Box (整个卡片) ├── Column (左侧信息区) │ ├── Row (头像 + 用户名) │ │ ├── Box (头像) │ │ └── Column (用户名 + 描述) │ └── 底部操作栏 └── Box (右侧关注按钮，位置需要特殊处理)

这还是比较简单的情况。真实项目里，多个组件之间互相约束，嵌套层级很容易超过 4 到 5 层。层级越深，Compose 在重组时的遍历成本越高，代码也越难阅读。

ConstraintLayout 解决的就是这个问题。它把所有组件放在同一个「平面」里，通过约束关系描述相对位置。页面上不再有层层嵌套的容器，组件之间的位置关系一目了然。

1.3 ConstraintLayout 的适用场景

根据官方文档和实际项目经验，Compose 中的 ConstraintLayout 适合以下场景：

但要注意一点：不要为了用而用。如果 Column 或 Row 两行代码就能搞定，就不需要引入 ConstraintLayout。后面第七节会具体讲工程选型。

2. 环境准备与版本说明

2.1 创建 Compose 项目

如果你还没有 Compose 项目，最简单的方式是通过 Android Studio 新建工程：

1. 打开 Android Studio，选择 New Project。
2. 选择 Empty Activity。
3. 在语言选项里选择 Kotlin。
4. 在 Minimum SDK 选项里选择 API 21 或更高版本。

创建完成后，项目会自动生成一个带 Compose 依赖的模板工程。

如果你的项目是从传统 View 体系迁移过来的，需要在模块的build.gradle.kts中手动开启 Compose 支持，并添加相应依赖。这里以一个常见配置为例：

// 文件路径：app/build.gradle.kts android { namespace = "com.example.composeconstraintlayout" compileSdk = 34 defaultConfig { applicationId = "com.example.composeconstraintlayout" minSdk = 21 targetSdk = 34 versionCode = 1 versionName = "1.0" } buildFeatures { compose = true } composeOptions { kotlinCompilerExtensionVersion = "1.5.10" } } dependencies { implementation(platform("androidx.compose:compose-bom:2024.06.00")) implementation("androidx.compose.ui:ui") implementation("androidx.compose.material3:material3") implementation("androidx.compose.ui:ui-tooling-preview") implementation("androidx.constraintlayout:constraintlayout-compose:1.0.1") }

2.2 添加 ConstraintLayout 依赖

上面配置中的关键依赖是：

implementation("androidx.constraintlayout:constraintlayout-compose:1.0.1")

注意，这里的包名和传统 View 的 ConstraintLayout 不同。Compose 版本使用androidx.constraintlayout.compose.ConstraintLayout，不再依赖 XML 文件。

版本方面，1.0.1是一个比较稳定、资料较多的版本。官方后续也推出了更高版本，API 大体一致，但可能有一些细节差异。实际开发时建议去 Maven 仓库或者 Android Studio 的依赖提示里查看最新版本，根据项目实际情况调整，本文示例以常见稳定版本为参考。

2.3 项目结构

本文最终会实现一个登录页面示例。目录结构如下：

app/src/main/java/com/example/composeconstraintlayout/ ├── MainActivity.kt └── ui/ ├── LoginScreen.kt └── theme/ └── Theme.kt

其中MainActivity.kt负责加载LoginScreen，LoginScreen.kt里存放具体的约束布局实现。为了专注演示 ConstraintLayout，我们可以直接使用默认主题，不额外修改Theme.kt。

3. 核心 API 拆解与基本用法

3.1 ConstraintSet 与 createRefFor

在 Compose 中，使用 ConstraintLayout 的第一步是创建约束集。传统写法是：

@Composable fun BasicConstraintLayout() { ConstraintLayout(modifier = Modifier.fillMaxSize()) { val text = createRef() Text( text = "Hello ConstraintLayout", modifier = Modifier.constrainAs(text) { top.linkTo(parent.top, margin = 16.dp) start.linkTo(parent.start, margin = 16.dp) } ) } }

这里有几个要点需要理解：

• createRef()用来创建当前ConstraintLayout内部的一个引用。可以简单理解成给这个组件起了一个唯一的名字。
• Modifier.constrainAs(reference) { ... }是约束布局的关键扩展函数。它把某个子组件与对应的引用绑定，并在代码块内描述这个组件的约束关系。
• 在约束代码块里，parent指代当前ConstraintLayout容器本身。
• top.linkTo(...)表示顶部约束到某个参照物，start.linkTo(...)表示起始边约束到某个参照物。

新版 API 也支持使用ConstraintSet和createRefFor的方式：

@Composable fun ConstraintSetDemo() { val constraint = ConstraintSet { val text = createRefFor("text") } // 通过 layoutId 绑定引用 }

这种写法更接近传统 View 中使用@id/text的感觉，适合在动态修改约束的场景下使用。不过大部分静态布局场景，直接使用createRef()就够了，代码更简洁。

3.2 constrainAs 代码块中能配置什么

constrainAs中的 DSL 代码块是 ConstraintLayout 的核心配置区。常见的配置项包括：

其中Dimension是一个比较重要的概念。默认情况下，Compose 子组件会按照自身的Modifier.size()、Modifier.width()等修饰符测量尺寸，但如果你希望在约束布局中让组件「填充」到两个约束边界之间，就需要使用Dimension.fillToConstraints。

Button( onClick = { }, modifier = Modifier.constrainAs(loginButton) { top.linkTo(passwordInput.bottom, margin = 24.dp) start.linkTo(startGuideline) end.linkTo(endGuideline) width = Dimension.fillToConstraints } ) { Text("登录") }

这里如果不设置width = Dimension.fillToConstraints，按钮宽度会按照内容自适应，而不是填满左右两条边线之间的空间。

3.3 Guideline 辅助线

Guideline 是 ConstraintLayout 中非常实用的辅助工具。它本身不参与布局显示，只提供一条坐标参考线。在传统 XML 中，你可以设置layout_constraintGuide_begin、layout_constraintGuide_end或layout_constraintGuide_percent。在 Compose 中对应 API 是：

ConstraintLayout(modifier = Modifier.fillMaxSize()) { val startGuideline = createGuidelineFromStart(24.dp) val topGuideline = createGuidelineFromTop(0.1f) }

• createGuidelineFromStart(24.dp)：创建一条距离起始边 24dp 的垂直参考线。
• createGuidelineFromTop(0.1f)：创建一条距离顶部 10% 高度的水平参考线。
• 同样还有createGuidelineFromEnd()、createGuidelineFromBottom()。

Guideline 最常见的用途是统一页面左右边距。假设页面所有内容左边都对齐到 24dp，我们就可以创建一个startGuideline，然后让每个组件都start.linkTo(startGuideline)，避免在多个地方写死同一个 margin。

3.4 Barrier 屏障

Barrier 是约束布局中另一个高频工具。它解决的是「多个组件长度不一致，希望新组件对齐到它们中最长/最短的边缘」的问题。

举个例子，页面中有一个用户名标签和一个手机号标签，它们的文字长度不同，右侧边缘位置也不同。现在需要让编辑框的左边缘统一对齐到这两个标签中较宽的那个，就可以使用 Barrier：

val usernameLabel = createRef() val phoneLabel = createRef() val inputBarrier = createEndBarrier(usernameLabel, phoneLabel) TextField( value = "", onValueChange = {}, modifier = Modifier.constrainAs(usernameInput) { start.linkTo(inputBarrier) top.linkTo(usernameLabel.top) } )

createEndBarrier(usernameLabel, phoneLabel)会创建一个「结束边屏障」，位置取两个标签结束边中更大的那一个（即更靠右的边）。所有约束到这个屏障的组件，都会对齐到较长的标签边缘。

Barrier 的优点是自动适应内容长度变化，不需要手动计算 margin。

3.5 链式布局 Chain

链式布局用于描述多个组件在一条轴线上如何分布。常见需求是三个按钮水平均匀排列，或者两个组件一个靠左一个靠右。

在 Compose 中创建链的方式如下：

@Composable fun ChainDemo() { ConstraintLayout(modifier = Modifier.fillMaxWidth()) { val button1 = createRef() val button2 = createRef() val button3 = createRef() createHorizontalChain(button1, button2, button3) Button( onClick = { }, modifier = Modifier .constrainAs(button1) { top.linkTo(parent.top) } .width(80.dp) ) { Text("A") } Button( onClick = { }, modifier = Modifier .constrainAs(button2) { top.linkTo(parent.top) } .width(80.dp) ) { Text("B") } Button( onClick = { }, modifier = Modifier .constrainAs(button3) { top.linkTo(parent.top) } .width(80.dp) ) { Text("C") } } }

createHorizontalChain(button1, button2, button3)将三个引用组成水平链。默认情况下，链会按重量或权重分配空间，让三个按钮水平均匀分布。

常见的链模式有以下几种：

• 打包链（Packed）：子组件靠在一起，整体居中。
• 展开链（Spread）：子组件之间均匀分布。
• 加权展开链（SpreadInside）：两端的组件靠边，中间组件均匀分布。

如果要指定链模式，可以在createHorizontalChain中传入chainStyle：

import androidx.constraintlayout.compose.ChainStyle createHorizontalChain(button1, button2, button3, chainStyle = ChainStyle.Spread)

3.6 理解测量机制

用 Compose 的 ConstraintLayout 时，有一点和传统 View 差异很大：传统 XML 中宽度和高度的match_parent、wrap_content可以直接写在布局文件里，而 Compose 中组件的尺寸更多由Modifier控制，约束布局中的Dimension只负责描述约束对尺寸的贡献。

这意味着，如果你想实现「填充到父容器剩余空间」的效果，一般有两种方式：

1. 在Modifier中使用fillMaxWidth()等修饰符。
2. 在constrainAs中使用Dimension.fillToConstraints。

但两者不要同时滥用。如果Modifier中设置了fillMaxWidth()，又在约束中设置了start.linkTo和end.linkTo，可能会产生冲突。推荐的做法是：在约束布局内部，优先通过Dimension.fillToConstraints控制宽度/高度，让约束布局的尺寸计算更加统一。

4. 完整实战案例：登录页面

这一节我们通过一个完整的登录页面案例，把前面讲到的 API 全部串联起来。

4.1 功能拆解

登录页面包含以下元素：

• 页面标题「欢迎登录」
• 用户名输入框
• 密码输入框
• 登录按钮
• 注册账号文字链接
• 忘记密码文字链接

我们需要实现的效果：

1. 所有内容左右两侧都对齐到同等边距，使用 Guideline 实现。
2. 用户名输入框和密码输入框左边缘对齐到用户名标签右侧的 Barrier。
3. 登录按钮宽度填满左右 Guideline 之间的范围。
4. 注册账号和忘记密码分布在按钮下方，形成链式分布。

4.2 创建文件

新建LoginScreen.kt，代码如下：

// 文件路径：app/src/main/java/com/example/composeconstraintlayout/ui/LoginScreen.kt package com.example.composeconstraintlayout.ui import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.padding import androidx.compose.material3.MaterialTheme import androidx.compose.material3.OutlinedTextField import androidx.compose.material3.Text import androidx.compose.material3.TextButton import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.setValue import androidx.compose.ui.Modifier import androidx.compose.ui.unit.dp import androidx.compose.ui.Alignment import androidx.compose.ui.unit.sp import androidx.constraintlayout.compose.ChainStyle import androidx.constraintlayout.compose.ConstraintLayout import androidx.constraintlayout.compose.Dimension import androidx.constraintlayout.compose.createRefs @Composable fun LoginScreen() { val startGuideline = createGuidelineFromStart(24.dp) val endGuideline = createGuidelineFromEnd(24.dp) var username by remember { mutableStateOf("") } var password by remember { mutableStateOf("") } val title = createRefs() val usernameLabel = createRefs() val usernameInput = createRefs() val passwordLabel = createRefs() val passwordInput = createRefs() val loginButton = createRefs() val footerLink1 = createRefs() val footerLink2 = createRefs() val inputBarrier = createEndBarrier(usernameLabel, passwordLabel) ConstraintLayout( modifier = Modifier .fillMaxSize() .padding(horizontal = 0.dp) ) { // 标题 Text( text = "欢迎登录", fontSize = 28.sp, style = MaterialTheme.typography.headlineMedium, modifier = Modifier.constrainAs(title) { top.linkTo(parent.top, margin = 64.dp) start.linkTo(startGuideline) } ) // 用户名标签 Text( text = "用户名", style = MaterialTheme.typography.bodyLarge, modifier = Modifier.constrainAs(usernameLabel) { top.linkTo(title.bottom, margin = 32.dp) start.linkTo(startGuideline) } ) // 用户名输入框 OutlinedTextField( value = username, onValueChange = { username = it }, label = { Text("请输入用户名") }, modifier = Modifier.constrainAs(usernameInput) { top.linkTo(usernameLabel.top) start.linkTo(inputBarrier) end.linkTo(endGuideline) width = Dimension.fillToConstraints } ) // 密码标签 Text( text = "密码", style = MaterialTheme.typography.bodyLarge, modifier = Modifier.constrainAs(passwordLabel) { top.linkTo(usernameInput.bottom, margin = 24.dp) start.linkTo(startGuideline) } ) // 密码输入框 OutlinedTextField( value = password, onValueChange = { password = it }, label = { Text("请输入密码") }, modifier = Modifier.constrainAs(passwordInput) { top.linkTo(passwordLabel.top) start.linkTo(inputBarrier) end.linkTo(endGuideline) width = Dimension.fillToConstraints } ) // 登录按钮 TextButton( onClick = { }, modifier = Modifier.constrainAs(loginButton) { top.linkTo(passwordInput.bottom, margin = 40.dp) start.linkTo(startGuideline) end.linkTo(endGuideline) width = Dimension.fillToConstraints } ) { Text("登录", fontSize = 18.sp) } // 页脚：注册与忘记密码 TextButton( onClick = { }, modifier = Modifier.constrainAs(footerLink1) { top.linkTo(loginButton.bottom, margin = 16.dp) start.linkTo(startGuideline) } ) { Text("注册账号") } TextButton( onClick = { }, modifier = Modifier.constrainAs(footerLink2) { top.linkTo(loginButton.bottom, margin = 16.dp) end.linkTo(endGuideline) } ) { Text("忘记密码") } createHorizontalChain( footerLink1, footerLink2, chainStyle = ChainStyle.Spread ) } }

4.3 配置 MainActivity

接下来修改MainActivity.kt，让它加载LoginScreen：

// 文件路径：app/src/main/java/com/example/composeconstraintlayout/MainActivity.kt package com.example.composeconstraintlayout import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Surface import androidx.compose.ui.Modifier import com.example.composeconstraintlayout.ui.LoginScreen import com.example.composeconstraintlayout.ui.theme.YourAppTheme class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { YourAppTheme { Surface( modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background ) { LoginScreen() } } } } }

如果你的项目没有自定义主题，也可以直接把YourAppTheme换成MaterialTheme。

4.4 运行效果说明

运行项目后，你会看到：

1. 标题位于页面左上角，距离顶部 64dp，左边对齐 24dp。
2. 用户名标签和密码标签都对齐到左侧 24dp 的 Guideline。
3. 用户名输入框和密码输入框的左边缘，对齐到两个标签中较宽的边缘——这里用户名标签宽度更大，因此输入框会对齐到用户名标签的右侧。
4. 两个输入框的宽度自动填充到右侧 24dp 的 Guideline，看起来像铺满了内容区域。
5. 登录按钮宽度同样填满左右边距，视觉上更突出。
6. 底部「注册账号」和「忘记密码」形成水平链，一个靠左一个靠右。

到这里，一个包含 Guideline、Barrier、Dimension、链式布局的典型登录页就完成了。

4.5 修改约束的进阶用法

有些页面需要根据状态动态修改约束，比如密码输入错误时，输入框下方出现错误提示文案，其余内容整体下移。这时可以使用Modifier.constrainAs+ 状态变量实现：

var showError by remember { mutableStateOf(false) } OutlinedTextField( value = password, onValueChange = { password = it }, modifier = Modifier.constrainAs(passwordInput) { top.linkTo(passwordLabel.top) start.linkTo(inputBarrier) end.linkTo(endGuideline) width = Dimension.fillToConstraints } ) if (showError) { Text( text = "密码不能为空", color = MaterialTheme.colorScheme.error, modifier = Modifier.constrainAs(errorText) { top.linkTo(passwordInput.bottom, margin = 8.dp) start.linkTo(inputBarrier) } ) }

不过在实际项目中，这种动态区域更推荐使用AnimatedVisibility配合 Column 实现，约束布局更适合描述静态或不频繁变化的相对关系。

5. 常见问题与排查思路

下面是使用 Compose ConstraintLayout 时经常遇到的问题汇总。

5.1 一个典型的排查步骤

当布局表现和预期不符时，建议按以下顺序排查：

1. 先确认组件是否在ConstraintLayout { }内部。
2. 确认每个引用是否通过constrainAs绑定到了对应组件。
3. 检查constrainAs是否放在Modifier链的最前面。
4. 检查所有约束方向是否完整。比如一个组件的start和end都约束了，但top和bottom都没有约束，那么它在垂直方向上的位置可能取决于测量结果，而不是你期望的位置。
5. 如果是宽度/高度异常，检查是否有Dimension.fillToConstraints与Modifier.size()冲突。
6. 将复杂布局拆分后逐个组件排查，确认每个组件单独显示的约束是否正确。

6. 最佳实践与工程建议

6.1 不要为了用而用

在 Compose 中，ConstraintLayout 并不是万能的。官方推荐的原则是：优先使用 Column、Row、Box 等基础布局，只有在嵌套层级过深或者需要复杂相对定位时才改用 ConstraintLayout。

判断标准很简单：

• 如果布局可以用「一个水平排列 + 一个垂直排列」描述，就用 Row 和 Column。
• 如果只有一层重叠，用 Box 更合适。
• 如果多个组件互相依赖，嵌套超过 2 到 3 层，考虑用 ConstraintLayout 拍平。

盲目使用 ConstraintLayout，反而会增加代码理解成本，因为它的 DSL 可读性不如 Column / Row 直观。

6.2 引用命名要有意义

createRef()创建引用时，尽量避免使用ref1、ref2这样的命名。一个可维护的约束布局，引用名应该能直接反映对应的组件：

val avatar = createRef() val userName = createRef() val description = createRef() val followButton = createRef()

当约束关系复杂时，有意义的命名会让整个布局逻辑清晰很多，别人接手代码时不需要逐个查找引用对应的是哪个组件。

6.3 利用 Guideline 统一边距

页面左右边距这类「全局规范」，不要在每个组件里写死margin = 16.dp，而是创建一个startGuideline和endGuideline，然后让所有组件统一约束到这两条线。

这样做的好处是：当设计稿调整边距时，只需要改 Guideline 的定义，所有组件自动同步变化，避免遗漏。

6.4 复杂布局拆分为子组件

ConstraintLayout 虽然减少了嵌套层级，但一个页面如果所有组件都放在一个巨大的 ConstraintLayout 中，代码依然会很臃肿。比较推荐的做法是：把约束布局拆成多个小组件，每个组件内部只维护一部分约束关系。

比如登录页可以拆成：

@Composable fun LoginScreen() { ConstraintLayout { val header = createRef() val form = createRef() val footer = createRef() // 只在这里描述大的块级关系 } } @Composable fun LoginHeader(modifier: Modifier = Modifier) { // 标题的实现 } @Composable fun LoginForm(modifier: Modifier = Modifier) { // 输入框和按钮的实现 }

这样大的约束关系清晰，子组件的内部实现也容易复用和测试。

6.5 注意与 Modifier 的配合

constrainAs是一个 Modifier 扩展函数，它会在Layout阶段读取约束关系。实际书写时，推荐把它放在 Modifier 链的最前面：

Modifier .constrainAs(ref) { ... } .padding(8.dp) .background(Color.White)

如果先写padding再写constrainAs，约束计算的位置是基于 padding 之后的尺寸，可能会导致位置偏差。

6.6 性能层面的建议

Compose 中 ConstraintLayout 的性能整体优于传统 View 版本，因为不再有 XML 解析和 ConstraintSet 传递的开销。但在高频重组场景下，需要注意：

• 不要在constrainAs代码块中执行耗时计算。
• 不要在ConstraintLayout内部放置过多动态变化的子组件。
• 如果组件数量很多，考虑使用LazyColumn或者自定义布局，而不是把所有内容塞进一个 ConstraintLayout。

7. 总结与学习路线

这一篇文章从传统 ConstraintLayout 的背景讲到了 Compose 版本的核心 API，内容包括createRef、constrainAs、Guideline、Barrier、Dimension 和链式布局，最后用一个登录页完整演示了这些知识的组合用法。

如果你能把登录页的例子默写出来，并且能解释每一行约束的作用，说明你已经基本掌握了 Compose 中的 ConstraintLayout。

接下来建议按这个顺序继续深入：

1. 阅读官方文档中关于Dimension和ConstraintSet的详细说明。
2. 尝试把传统项目中的一个复杂 XML 布局改写成 Compose ConstraintLayout。
3. 学习Modifier.onGloballyPositioned和自定义布局，了解布局阶段更深层的测量机制。
4. 尝试用AnimatedVisibility配合 ConstraintLayout 实现交互动画。

在实际项目中，优先关注布局的可读性和可维护性。ConstraintLayout 是一个强大工具，但只有用对场景才能真正提升开发效率。如果这篇文章对你有帮助，可以收藏备用，后续我也会继续更新这个系列的其他主题。