如何在Jetpack Compose中实现规整的表单布局？

不用自定义布局，这几个方案就能搞定你的需求：

方案一：Row + Modifier.weight()（最简洁） #

这是最直接的实现方式，让文本占满第一列剩余空间，开关保持自身宽度，同时保证每个项内的文本和开关垂直居中对齐。

代码示例：

Column(modifier = Modifier.fillMaxWidth()) {
    // 单个设置项
    Row(
        modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp, vertical = 12.dp),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.SpaceBetween
    ) {
        Text(
            text = "自动同步数据",
            modifier = Modifier.weight(1f).padding(end = 16.dp),
            fontSize = 16.sp
        )
        Switch(
            checked = true,
            onCheckedChange = { /* 切换逻辑 */ }
        )
    }

    Row(
        modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp, vertical = 12.dp),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.SpaceBetween
    ) {
        Text(
            text = "允许通知推送",
            modifier = Modifier.weight(1f).padding(end = 16.dp),
            fontSize = 16.sp
        )
        Switch(
            checked = false,
            onCheckedChange = { /* 切换逻辑 */ }
        )
    }
}

• 核心是给Text加上Modifier.weight(1f)，让它占据Row里除了Switch之外的所有可用宽度
• verticalAlignment = Alignment.CenterVertically保证文本和开关上下对齐，解决你之前两Column嵌套的对齐问题
• Arrangement.SpaceBetween让文本靠左、开关靠右，自动对齐所有开关的位置

方案二：ConstraintLayout（适合复杂布局扩展） #

如果以后要加图标、辅助文本等元素，用ConstraintLayout能更精准地控制所有元素的对齐规则，确保所有开关在同一竖直线上。

代码示例：

Column(modifier = Modifier.fillMaxWidth()) {
    ConstraintLayout(
        modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp, vertical = 12.dp)
    ) {
        val (text, switch) = createRefs()

        Text(
            text = "自动同步数据",
            fontSize = 16.sp,
            modifier = Modifier.constrainAs(text) {
                start.linkTo(parent.start)
                centerVerticallyTo(parent)
            }
        )

        Switch(
            checked = true,
            onCheckedChange = { /* 切换逻辑 */ },
            modifier = Modifier.constrainAs(switch) {
                end.linkTo(parent.end)
                centerVerticallyTo(parent)
                // 可以给文本和开关之间留固定间距
                start.linkTo(text.end, margin = 16.dp)
            }
        )
    }

    // 第二个设置项复用同样的约束逻辑
    ConstraintLayout(
        modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp, vertical = 12.dp)
    ) {
        val (text, switch) = createRefs()

        Text(
            text = "允许通知推送",
            fontSize = 16.sp,
            modifier = Modifier.constrainAs(text) {
                start.linkTo(parent.start)
                centerVerticallyTo(parent)
            }
        )

        Switch(
            checked = false,
            onCheckedChange = { /* 切换逻辑 */ },
            modifier = Modifier.constrainAs(switch) {
                end.linkTo(parent.end)
                centerVerticallyTo(parent)
                start.linkTo(text.end, margin = 16.dp)
            }
        )
    }
}

• 通过约束让所有开关的end都对齐父布局的end，自然就能保证竖线对齐
• 每个设置项的文本和开关都居中对齐，解决上下错位问题

为什么你之前的方案有问题？ #

• 直接嵌套Row没对齐：因为每个文本长度不一样，Row的宽度是wrap内容，导致开关位置跟着文本长度变
• 两Column嵌套Row：每个Column里的元素高度可能不一致，而且Column默认是顶部对齐，所以会出现上下错位
• LazyVerticalGrid：Grid的列宽是均分或者固定比例，没法实现第一列占剩余空间、第二列自适应的需求，所以不适合这种场景

内容的提问来源于stack exchange，提问作者Hakanai