Jetpack Compose中OutlinedTextField DecorationBox聚焦颜色不生效问题

你的代码存在两个核心问题导致样式不生效：

• 文本颜色未通过BasicTextField的textStyle显式指定，仅在装饰框颜色配置中设置focusedTextColor无法覆盖默认文本色
• 未配置非聚焦状态的边框颜色，且装饰框与容器框的颜色配置重复且未关联正确状态

以下提供两种可行的修复方案：

方案一：基于BasicTextField+DecorationBox的自定义实现 #

这种方式适合需要高度定制文本框装饰逻辑的场景：

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MyTextField(
    value: String,
    interactionSource: InteractionSource = remember { MutableInteractionSource() },
    onValueChange: (String) -> Unit
) {
    BasicTextField(
        value = value,
        singleLine = true,
        onValueChange = onValueChange,
        // 强制设置文本颜色为青色
        textStyle = TextStyle(color = Color.Cyan),
        // 设置光标颜色
        cursorBrush = SolidColor(Color.Cyan),
        decorationBox = { innerTextField ->
            OutlinedTextFieldDefaults.DecorationBox(
                value = value,
                innerTextField = innerTextField,
                enabled = true,
                singleLine = true,
                interactionSource = interactionSource,
                visualTransformation = VisualTransformation.None,
                // 统一配置所有状态的颜色
                colors = OutlinedTextFieldDefaults.colors(
                    focusedBorderColor = Color.Cyan,
                    unfocusedBorderColor = Color.Cyan.copy(alpha = 0.6f), // 非聚焦可稍浅，也可直接用Color.Cyan
                    focusedTextColor = Color.Cyan,
                    unfocusedTextColor = Color.Cyan,
                    cursorColor = Color.Cyan
                ),
                container = {
                    OutlinedTextFieldDefaults.ContainerBox(
                        enabled = true,
                        isError = false,
                        interactionSource = interactionSource,
                        colors = it.colors, // 复用装饰框的颜色配置，无需重复设置
                        shape = RoundedCornerShape(10.dp),
                        focusedBorderThickness = 1.dp,
                        unfocusedBorderThickness = 1.dp
                    )
                }
            )
        }
    )
}

关键修改点：

• 通过BasicTextField的textStyle直接指定文本颜色，确保所有状态下文本都是青色
• 在颜色配置中补充unfocusedBorderColor，解决非聚焦状态边框无变化的问题
• 容器框复用装饰框的颜色配置，避免重复代码
• 通过cursorBrush设置光标颜色，确保光标与文本风格统一

方案二：直接使用OutlinedTextField（更简洁） #

如果不需要复杂的装饰逻辑，直接使用OutlinedTextField更简单：

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MySimpleTextField(
    value: String,
    onValueChange: (String) -> Unit
) {
    val focusManager = LocalFocusManager.current
    OutlinedTextField(
        value = value,
        onValueChange = onValueChange,
        singleLine = true,
        textStyle = TextStyle(color = Color.Cyan),
        colors = OutlinedTextFieldDefaults.colors(
            cursorColor = Color.Cyan
        ),
        shape = RoundedCornerShape(10.dp),
        // 自定义边框：控制厚度和聚焦/非聚焦状态颜色
        border = {
            val borderColor = if (focusManager.hasFocus) Color.Cyan else Color.Cyan.copy(alpha = 0.6f)
            BorderStroke(1.dp, borderColor)
        }
    )
}

说明：

• Material3的OutlinedTextField没有直接暴露边框厚度参数，需通过border自定义BorderStroke实现1dp厚度
• 通过LocalFocusManager判断聚焦状态，动态切换边框颜色
• 文本颜色通过textStyle直接设置，简单高效

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