如何让Text自动与TextField内容对齐？避免硬编码内边距

方法1：复用TextField默认水平内边距 #

TextField内部输入区域遵循Material Design规范有默认的水平内边距，直接调用TextFieldDefaults.textFieldHorizontalPadding给下方Text组件设置水平padding，就能实现和输入内容的对齐，完全不用硬编码数值。

修改后的代码：

@Preview
@Composable
fun Demo() {
    Dialog(onDismissRequest = {}) {
        MaterialTheme {
            Card(
                shape = RoundedCornerShape(5.dp),
                modifier = Modifier.padding(10.dp, 5.dp, 10.dp, 10.dp),
                elevation = 8.dp
            ) {
                Column(
                    verticalArrangement = Arrangement.spacedBy(3.dp),
                    modifier = Modifier
                        .fillMaxSize()
                        .padding(5.dp)
                ) {
                    TextField(
                        label = { Text("Hallo Text!") },
                        value = "",
                        onValueChange = { },
                        modifier = Modifier.fillMaxWidth()
                    )
                    Text(
                        "Hallo below!",
                        modifier = Modifier.padding(horizontal = TextFieldDefaults.textFieldHorizontalPadding),
                        color = MaterialTheme.colorScheme.error
                    )
                }
            }
        }
    }
}

方法2：使用TextField内置的错误提示（更规范） #

如果这个Text是用来显示输入错误提示，推荐直接用TextField自带的supportingText和isError参数——这是Material Design官方推荐的错误提示方案，不仅能自动对齐内容，还能联动TextField的错误状态（比如边框变色），无需手动处理布局对齐。

示例代码：

@Preview
@Composable
fun Demo() {
    val inputValue = remember { mutableStateOf("") }
    val isInputInvalid = remember { mutableStateOf(false) }

    // 模拟输入校验逻辑，比如输入为空时标记错误
    LaunchedEffect(inputValue.value) {
        isInputInvalid.value = inputValue.value.isBlank()
    }

    Dialog(onDismissRequest = {}) {
        MaterialTheme {
            Card(
                shape = RoundedCornerShape(5.dp),
                modifier = Modifier.padding(10.dp, 5.dp, 10.dp, 10.dp),
                elevation = 8.dp
            ) {
                Column(
                    verticalArrangement = Arrangement.spacedBy(3.dp),
                    modifier = Modifier
                        .fillMaxSize()
                        .padding(5.dp)
                ) {
                    TextField(
                        label = { Text("Hallo Text!") },
                        value = inputValue.value,
                        onValueChange = { inputValue.value = it },
                        modifier = Modifier.fillMaxWidth(),
                        isError = isInputInvalid.value,
                        supportingText = {
                            if (isInputInvalid.value) {
                                Text("输入内容不符合规则！")
                            }
                        }
                    )
                }
            }
        }
    }
}

这个方案的优势：

• 错误提示自动与输入内容对齐，无需额外padding设置
• 自动联动TextField的错误状态，视觉一致性更好
• 无错误时提示文本自动隐藏，无需额外控制逻辑

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