Compose中如何用ConstraintLayout对齐元素并实现等高？

你的问题核心有两个：一是BasicTextField未开启多行支持，二是Button未配置填充约束高度的规则。按以下方案修改即可实现需求：

关键修改点 #

• 给BasicTextField添加多行支持，让它能根据输入内容自动调整高度
• 给Button的约束添加height = Dimension.fillToConstraints，强制Button填充上下约束之间的空间
• 清理冗余的padding配置，避免布局偏移

修改后的完整代码 #

ConstraintLayout(
    modifier = Modifier
        .fillMaxWidth()
        .padding(16.dp)
        .background(
            color = colorScheme.onBackground,
            shape = RoundedCornerShape(8.dp)
        )
) {
    val (input, submit) = createRefs()
    BasicTextField(
        value = message,
        onValueChange = { message = it },
        // 开启多行支持，允许自动换行和高度变化
        maxLines = Int.MAX_VALUE,
        textStyle = TextStyle(
            wrapWidth = Wrap.Word
        ),
        modifier = Modifier
            .fillMaxWidth(0.7f)
            .padding(1.dp)
            .background(
                color = colorScheme.background,
                shape = RoundedCornerShape(7.dp, 0.dp, 0.dp, 7.dp)
            )
            .padding(20.dp)
            .constrainAs(input) {
                top.linkTo(parent.top)
                bottom.linkTo(parent.bottom)
                start.linkTo(parent.start)
            }
    )
    Button(
        onClick = { /*TODO*/ },
        shape = RoundedCornerShape(0.dp, 7.dp, 7.dp, 0.dp),
        modifier = Modifier
            .fillMaxWidth(0.3f)
            .constrainAs(submit) {
                start.linkTo(input.end)
                top.linkTo(input.top)
                bottom.linkTo(input.bottom)
                // 关键：让Button高度填充上下约束的空间
                height = Dimension.fillToConstraints
            }
    ) {
        Text(text = "SEND", color = colorScheme.onPrimary, fontSize = 16.sp)
    }
}

改动说明 #

1. BasicTextField多行配置：添加maxLines = Int.MAX_VALUE允许无限换行，textStyle设置自动换行，输入多行文本时TextField会自动增高。
2. Button约束调整：新增height = Dimension.fillToConstraints，让Button的高度完全匹配上下对齐的input的高度，解决按钮无法填满背景的问题。
3. 布局优化：清理了ConstraintLayout和Button上冗余的padding(0.dp)，简化代码的同时避免不必要的布局偏移。

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