如何调整Jetpack Compose中OutlinedTextField的标签位置与间距？

直接给label的Text加padding或offset达不到预期，是因为OutlinedTextField内部的装饰布局（DecorationBox）会自动处理标签在聚焦/未聚焦状态下的位移逻辑，单独修改标签属性会和默认逻辑冲突。下面是两种可行的解决思路：

方法一：自定义DecorationBox（推荐） #

通过复用官方的TextFieldDefaults.outlinedTextFieldDecorationBox，可以完全控制标签位置和输入区域内边距，同时保留默认的轮廓样式和交互状态：

var text by remember { mutableStateOf("") }
val interactionSource = remember { MutableInteractionSource() }

OutlinedTextField(
    value = text,
    onValueChange = { text = it },
    shape = RoundedCornerShape(10.dp),
    singleLine = true,
    interactionSource = interactionSource,
    // 核心：替换默认的装饰布局
    decorationBox = { innerTextField ->
        TextFieldDefaults.outlinedTextFieldDecorationBox(
            value = text,
            innerTextField = innerTextField,
            label = {
                // 给标签添加水平偏移，调整到目标位置
                Text(
                    "Test Hint",
                    modifier = Modifier.offset(x = 15.dp)
                )
            },
            enabled = true,
            singleLine = true,
            visualTransformation = VisualTransformation.None,
            interactionSource = interactionSource,
            colors = TextFieldDefaults.outlinedTextFieldColors(),
            // 调整输入区域内边距，让输入内容和标签位置匹配
            contentPadding = TextFieldDefaults.outlinedTextFieldPadding(
                start = 15.dp,
                top = 12.dp,
                bottom = 12.dp
            )
        )
    }
)

关键说明： #

• offset(x = 15.dp)直接调整标签的水平位置，聚焦/未聚焦状态下均生效
• contentPadding同步调整输入区域内边距，确保输入内容和标签对齐
• 保留官方OutlinedTextField的所有交互逻辑（比如聚焦时标签上浮、轮廓高亮等）

方法二：动态调整标签偏移（适配聚焦状态） #

如果不想自定义DecorationBox，可通过监听聚焦状态，动态调整标签偏移，同时配合TextField整体内边距：

var text by remember { mutableStateOf("") }
val isFocused = remember { mutableStateOf(false) }

OutlinedTextField(
    value = text,
    onValueChange = { text = it },
    shape = RoundedCornerShape(10.dp),
    singleLine = true,
    label = {
        Text(
            "Test Hint",
            modifier = Modifier
                // 根据聚焦状态动态调整偏移，避免错位
                .offset(x = if (isFocused.value) 10.dp else 15.dp)
                .padding(horizontal = 5.dp)
        )
    },
    modifier = Modifier
        .padding(start = 10.dp)
        .onFocusChanged { isFocused.value = it.isFocused }
)

这种方式需要手动处理聚焦状态下的标签位移，相对繁琐，稳定性不如方法一。

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