Jetpack Compose中两个TextField宽度不一致问题求助

我正在学习Jetpack Compose中的TextField组件，为了复用该组件封装了相关逻辑。但当给两个TextField设置不同的start内边距时，发现第二个TextField的宽度没能达到设置的88.dp。

相关代码 #

// 自定义复用的TextField组件
@Composable
fun ReusableTextField(
    text: String,
    onTextChange: (String) -> Unit,
    startPadding: Dp,
    modifier: Modifier = Modifier
) {
    TextField(
        value = text,
        onValueChange = onTextChange,
        modifier = modifier
            .width(88.dp)
            .padding(start = startPadding),
        // 其他配置项
    )
}

// 调用代码
Column(spacing = 16.dp) {
    ReusableTextField(
        text = "",
        onTextChange = {},
        startPadding = 16.dp
    )
    ReusableTextField(
        text = "",
        onTextChange = {},
        startPadding = 24.dp
    )
}

效果截图 #

希望有人能帮忙定位问题原因。

问题根源在于Modifier的执行顺序：你先设置了width(88.dp)，再添加padding(start = startPadding)，这会让padding成为宽度之外的额外空间，导致TextField的实际总宽度变成88.dp + startPadding，而当startPadding更大时，视觉上会觉得内容区域的宽度被压缩，达不到预期的88.dp。

修复方式有两种：

• 调整Modifier顺序
  把padding放在width之前，这样padding会被包含在指定的宽度范围内，总宽度保持88.dp：

@Composable
fun ReusableTextField(
    text: String,
    onTextChange: (String) -> Unit,
    startPadding: Dp,
    modifier: Modifier = Modifier
) {
    TextField(
        value = text,
        onValueChange = onTextChange,
        modifier = modifier
            .padding(start = startPadding)
            .width(88.dp),
        // 其他配置项
    )
}

• 使用TextField内置的contentPadding参数
  如果是要调整输入框内部的内容内边距，更推荐使用TextField自带的contentPadding，而非外层的Modifier.padding，这样能精准控制输入区域的间距，同时保证TextField的总宽度稳定：

@Composable
fun ReusableTextField(
    text: String,
    onTextChange: (String) -> Unit,
    startPadding: Dp,
    modifier: Modifier = Modifier
) {
    TextField(
        value = text,
        onValueChange = onTextChange,
        modifier = modifier.width(88.dp),
        contentPadding = PaddingValues(
            start = startPadding,
            top = 12.dp,
            bottom = 12.dp,
            end = 16.dp
        )
    )
}

两种方式都能解决宽度不达预期的问题，第二种更贴合Compose中TextField的设计规范。

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