3 基础布局组件与支付场景：Column、Row、Box、ConstraintLayout在输入表单中的典型用法

支付输入表单是移动端最常见的复杂UI场景之一：需要容纳卡号、有效期、CVV、持卡人姓名等多个输入域，同时还要处理错误提示、焦点切换和动态校验状态。Jetpack Compose 提供了 Column、Row、Box 和 ConstraintLayout 四种核心布局组件，每种组件在支付表单中都有不可替代的典型用法。本章将从组件原理出发，结合完整可运行的支付表单示例，讲解如何选择布局容器、管理对齐方式、处理输入域间距，并解决布局嵌套带来的性能问题。

3.1 四种布局组件的核心原理与适用边界

Compose 布局组件本质上都是 Modifier + 测量 + 放置的三步过程。理解每个组件的测量策略，才能在支付表单中做出正确的选择。

3.2 支付表单实现流程：从结构分解到代码落地

以一个标准化的银行卡支付表单为例，布局分解为四个层次：

1. 外层容器（Column）：控制整个表单的垂直排列与间距。
2. 卡号输入行（Column + Box）：输入框下方预留错误提示的层叠区域。
3. 有效期与CVV行（Row）：两个输入域水平并排，宽度比例固定。
4. 提交按钮（Row + Box）：按钮居中且底部对齐。

下面给出完整的可运行代码，包含所有关键布局组合：

@Composable
fun PaymentForm(
    cardNumber: String,
    expiryDate: String,
    cvv: String,
    onCardNumberChange: (String) -> Unit,
    onExpiryChange: (String) -> Unit,
    onCvvChange: (String) -> Unit,
    onSubmit: () -> Unit,
    cardNumberError: String? = null,
    expiryError: String? = null,
    cvvError: String? = null
) {
    // 外层 Column：控制整体垂直排布
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(horizontal = 16.dp, vertical = 24.dp),
        verticalArrangement = Arrangement.spacedBy(20.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        // 1. 卡号输入区域 —— Column 内嵌 Box 用于错误覆盖
        Column(verticalArrangement = Arrangement.spacedBy(4.dp)) {
            OutlinedTextField(
                value = cardNumber,
                onValueChange = onCardNumberChange,
                label = { Text("卡号") },
                modifier = Modifier.fillMaxWidth(),
                keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
                isError = cardNumberError != null
            )
            // Box 层叠：错误消息覆盖在卡号输入框下方
            Box(modifier = Modifier.fillMaxWidth().height(20.dp)) {
                if (cardNumberError != null) {
                    Text(
                        text = cardNumberError,
                        color = MaterialTheme.colorScheme.error,
                        style = MaterialTheme.typography.bodySmall
                    )
                }
            }
        }

        // 2. 有效期和 CVV 并排行 —— Row 控制水平排列
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.spacedBy(12.dp),
            verticalAlignment = Alignment.Top
        ) {
            // 有效期：权重 0.6
            Column(
                modifier = Modifier.weight(0.6f),
                verticalArrangement = Arrangement.spacedBy(4.dp)
            ) {
                OutlinedTextField(
                    value = expiryDate,
                    onValueChange = onExpiryChange,
                    label = { Text("有效期") },
                    modifier = Modifier.fillMaxWidth(),
                    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
                    isError = expiryError != null
                )
                Box(modifier = Modifier.fillMaxWidth().height(20.dp)) {
                    if (expiryError != null) {
                        Text(text = expiryError, color = MaterialTheme.colorScheme.error, style = MaterialTheme.typography.bodySmall)
                    }
                }
            }
            // CVV：权重 0.4
            Column(
                modifier = Modifier.weight(0.4f),
                verticalArrangement = Arrangement.spacedBy(4.dp)
            ) {
                OutlinedTextField(
                    value = cvv,
                    onValueChange = onCvvChange,
                    label = { Text("CVV") },
                    modifier = Modifier.fillMaxWidth(),
                    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
                    visualTransformation = PasswordVisualTransformation(),
                    isError = cvvError != null
                )
                Box(modifier = Modifier.fillMaxWidth().height(20.dp)) {
                    if (cvvError != null) {
                        Text(text = cvvError, color = MaterialTheme.colorScheme.error, style = MaterialTheme.typography.bodySmall)
                    }
                }
            }
        }

        // 3. 提交按钮 —— Row 居中放置
        Row(
            modifier = Modifier.fillMaxWidth().padding(top = 8.dp),
            horizontalArrangement = Arrangement.Center
        ) {
            Button(onClick = onSubmit, modifier = Modifier.fillMaxWidth(0.6f)) {
                Text("提交支付")
            }
        }
    }
}

3.3 内联 SVG：支付表单布局组件层级关系

3.4 调试与布局检查

Compose 提供了 Layout Inspector 和 Compose Layout Inspector 两个工具用于调试布局。在支付表单场景中，主要关注三个维度：

• 测量次数：检查每个 Column 和 Row 是否重复测量了子元素。如果发现同一个 OutlinedTextField 被测量超过 2 次，说明存在不必要的重组，应考虑使用 remember 或 derivedStateOf 缓存输入状态。
• 无效间距：使用 Layout Inspector 分别点击有效期输入框和 CVV 输入框，确认它们的顶部是否对齐。如果不对齐，检查两个 Column 的 verticalArrangement 是否一致。
• 错误消息区域高度：当没有错误时，Box 的高度是否为 20.dp？如果高度坍缩为 0，表单会在运行时跳变。通过 Layout Inspector 的树状视图可以快速定位。

3.5 性能与稳定性优化

支付表单通常需要处理高频的输入变化和实时校验，布局性能直接影响用户体验：

// 性能优化示例：使用 derivedStateOf 避免冗余组合
val cardNumberValid = remember {
    derivedStateOf {
        cardNumber.length >= 16 && cardNumber.all { it.isDigit() }
    }
}

// 在 UI 中直接访问 cardNumberValid.value，只有当 cardNumber 变化时才会重新计算

3.6 常见错误与解决方案

1. 错误消息盒子闪烁

   原因：Box 没有固定高度，错误消息出现后布局高度变化导致整个表单上下跳动。

   解决：使用 Modifier.height(20.dp) 强制占位，错误消息通过 alpha 或 AnimatedVisibility 控制显示，但不改变高度。

2. Row 中子元素不对齐

   原因：两个 Column 的 verticalArrangement 不同（如一个用 Center，一个用 Top）。

   解决：统一设置 verticalAlignment = Alignment.Top 并确保两个输入框的 Modifier.height(IntrinsicSize.Min) 行为一致。

3. ConstraintLayout 过度约束导致布局锁定

   原因：在不需要相对定位时强行使用 ConstraintLayout，导致输入框无法随键盘弹出而滚动。

   解决：仅当需要跨组件对齐（如标签必须与特定输入域左侧对齐）时使用 ConstraintLayout；普通表单优先用 Column + Row 线性布局。

4. 键盘弹出后表单被遮挡

   原因：未在 AndroidManifest.xml 中设置 android:windowSoftInputMode="adjustResize"，或布局未使用 Modifier.imePadding()。

   解决：在外层 Column 添加 Modifier.imePadding()，确保键盘弹出时表单整体上移。