Jetpack Compose TextField设置32dp高度时Label无法居中如何解决

问题原因 #

你遇到的布局异常有两个核心诱因：

• 混淆了label和placeholder的作用：label是Material设计规范中的浮动标签，默认自带聚焦上浮的交互动画，本身的布局位置就不是固定居中在输入框内；你需要的无输入时居中显示的提示文本，应该用placeholder参数实现。
• 原生TextField默认携带内置上下内边距、最小高度限制，强制设置32dp高度时会挤压内部内容，导致位置偏移。

修正方案 #

完整可运行的修正代码如下：

TextField(
    modifier = Modifier
        .defaultMinSize(minHeight = 1.dp) // 取消TextField默认的最小高度限制
        .height(32.dp)
        .border(1.dp, colorResource(id = R.color.mono4), RoundedCornerShape(32.dp))
        .constrainAs(commentBox) {
            top.linkTo(parent.top)
            bottom.linkTo(parent.bottom)
            start.linkTo(profilePhoto.end)
            end.linkTo(postText.start)
            width = Dimension.fillToConstraints
            height = Dimension.fillToConstraints
        },
    // 用placeholder替换label实现输入框内居中提示
    placeholder = {
        Text(
            text = "Comment on workout...",
            style = TextStyle(
                fontSize = 14.sp,
                color = colorResource(id = R.color.mono4),
                fontFamily = FontFamily(Font(R.font.josefin_san_regular))
            )
        )
    },
    singleLine = true, // 设为单行避免多行适配导致的内容偏移
    // 自定义内边距让文字完全居中，可根据实际字体大小微调vertical的数值
    contentPadding = PaddingValues(horizontal = 8.dp, vertical = 4.dp),
    colors = TextFieldDefaults.textFieldColors(
        backgroundColor = Color.Transparent,
        focusedIndicatorColor = Color.Transparent,
        unfocusedIndicatorColor = Color.Transparent
    ),
    value = commentText,
    onValueChange = { commentText = it }
)

如果确实需要保留浮动标签label的交互效果，可以给label参数内的Text外层套一层Box，添加Modifier.align(Alignment.Center)调整位置，同时微调contentPadding的数值适配即可。

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