Jetpack Compose中OutlinedTextField的expandedHintEnabled等效功能实现问询

可以实现，对应XML中TextInputLayout的expandedHintEnabled效果，核心是通过自定义装饰盒强制让标签始终处于展开状态，同时保留占位符显示。

实现代码示例 #

@Composable
fun FixedLabelOutlinedTextField() {
    var text by remember { mutableStateOf("") }
    val interactionSource = remember { MutableInteractionSource() }

    OutlinedTextField(
        value = text,
        onValueChange = { text = it },
        interactionSource = interactionSource,
        singleLine = true,
        colors = TextFieldDefaults.outlinedTextFieldColors(
            unfocusedLabelColor = MaterialTheme.colors.onSurface.copy(alpha = ContentAlpha.medium),
            focusedLabelColor = MaterialTheme.colors.primary
        ),
        // 自定义装饰盒，强制展开标签
        decorationBox = { innerTextField ->
            TextFieldDefaults.outlinedTextFieldDecorationBox(
                value = text,
                innerTextField = innerTextField,
                label = { Text("固定顶部标签") },
                placeholder = { Text("请输入内容") },
                interactionSource = interactionSource,
                enabled = true,
                singleLine = true,
                // 关键参数：强制标签保持展开（顶部）状态
                expandedHint = true
            )
        }
    )
}

关键说明 #

• expandedHint = true：这个参数会强制让标签（Label）始终处于输入框顶部的展开状态，无论输入框是否获得焦点、是否有输入内容。
• 占位符（Placeholder）会正常显示在输入框内，当输入内容不为空时自动隐藏，和默认行为一致。
• 通过TextFieldDefaults.outlinedTextFieldColors可以调整未聚焦/聚焦状态下标签的颜色，保持视觉一致性。

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