Jetpack Compose自定义布局实现与代码显示异常问题排查

当前代码运行效果和预期不符，核心问题有3个：

• 状态绑定错误：BasicTextField的value参数传入了硬编码常量"Type here..."，没有和声明的text状态绑定，所有输入操作都不会更新显示内容，输入逻辑完全不生效。
• 调用了不存在的API：Compose 原生BasicTextField组件没有label参数，传入的label配置属于无效参数，不会被组件识别渲染，因此看不到设置的"Title"文本。
• 缺少装饰层配置：BasicTextField是最底层的输入组件，默认不提供边框、内边距、标签、占位符等样式与布局能力，没有额外自定义装饰逻辑的情况下，只会渲染裸文本输入区域，和参考设计样式差距极大。

参考设计效果图
当前代码运行预览效果

参考设计是标准的Material 3 轮廓型文本输入框，有两种成熟实现方式：

方式1：直接使用官方封装的OutlinedTextField（优先推荐） #

Material3 组件库已经内置了该样式的全部逻辑，包括边框状态变化、标签悬浮动画、占位符显示逻辑、交互反馈，直接调用即可匹配参考效果，替换原有Greeting组件代码：

// 注意先添加导入
// import androidx.compose.material3.OutlinedTextField
@Composable
fun Greeting() {
    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        var text by remember { mutableStateOf("") }
        OutlinedTextField(
            value = text,
            onValueChange = { newText -> text = newText },
            label = { Text("Title") },
            placeholder = { Text("Type here...") }
        )
    }
}

方式2：基于BasicTextField自定义实现（适合高度定制样式场景） #

如果需要完全自定义输入框样式，可以通过BasicTextField的decorationBox参数自定义装饰层，自行绘制边框、摆放标签和占位符，示例实现：

// 需提前导入对应依赖
// import androidx.compose.foundation.border
// import androidx.compose.foundation.interaction.collectIsFocusedAsState
// import androidx.compose.foundation.interaction.MutableInteractionSource
// import androidx.compose.foundation.layout.offset
// import androidx.compose.foundation.layout.Box
// import androidx.compose.ui.graphics.Color
// import androidx.compose.foundation.shape.RoundedCornerShape
// import androidx.compose.ui.unit.dp

@Composable
fun CustomOutlineTextField(
    value: String,
    onValueChange: (String) -> Unit,
    modifier: Modifier = Modifier,
    label: @Composable (() -> Unit)? = null,
    placeholder: @Composable (() -> Unit)? = null
) {
    val interactionSource = remember { MutableInteractionSource() }
    val isFocused by interactionSource.collectIsFocusedAsState()
    BasicTextField(
        value = value,
        onValueChange = onValueChange,
        modifier = modifier,
        interactionSource = interactionSource,
        decorationBox = { innerTextField ->
            Box(
                modifier = Modifier
                    .border(
                        width = 1.dp,
                        color = if (isFocused) MaterialTheme.colorScheme.primary else Color.Gray,
                        shape = RoundedCornerShape(4.dp)
                    )
                    .padding(horizontal = 12.dp, vertical = 10.dp)
            ) {
                // 悬浮标签
                val showLabel = label != null && (isFocused || value.isNotEmpty())
                if (showLabel) {
                    CompositionLocalProvider(
                        LocalTextStyle provides MaterialTheme.typography.bodySmall.copy(
                            color = if (isFocused) MaterialTheme.colorScheme.primary else Color.Gray
                        )
                    ) {
                        Box(
                            modifier = Modifier
                                .offset(y = (-16).dp)
                                .background(MaterialTheme.colorScheme.background)
                                .padding(horizontal = 4.dp)
                        ) {
                            label?.invoke()
                        }
                    }
                }
                // 输入区+占位符
                Box(modifier = Modifier.padding(top = if (showLabel) 4.dp else 0.dp)) {
                    if (value.isEmpty() && placeholder != null) {
                        CompositionLocalProvider(
                            LocalTextStyle provides LocalTextStyle.current.copy(color = Color.Gray)
                        ) {
                            placeholder()
                        }
                    }
                    innerTextField()
                }
            }
        }
    )
}

调用时直接替换原有BasicTextField即可：

var text by remember { mutableStateOf("") }
CustomOutlineTextField(
    value = text,
    onValueChange = { text = it },
    label = { Text("Title") },
    placeholder = { Text("Type here...") }
)

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