Jetpack Compose TextField聚焦/失焦时SupportingText颜色不更新问题

核心原因 #

TextFieldDefaults.colors() 中的 focusedSupportingTextColor 和 unfocusedSupportingTextColor 仅对TextField默认的supportingText文本样式生效。你在supportingText参数中传入了自定义的RegularText组件，且该组件未继承TextField提供的颜色配置，因此TextField的颜色设置无法自动覆盖自定义Text的颜色。

解决方案 #

需要手动监听TextField的焦点状态，结合LocalTextFieldColors提供的配置，为自定义RegularText动态设置对应颜色。具体实现如下：

1. 添加焦点状态监听，跟踪TextField的聚焦/失焦状态
2. 通过LocalTextFieldColors.current获取你在TextFieldDefaults.colors()中定义的颜色值
3. 根据焦点状态、组件启用状态，为RegularText分配对应颜色

修改后的代码示例 #

@Composable
fun CounterTextInput(
    modifier: Modifier = Modifier,
    hint: String,
    counterText: String,
    maxCount: Int,
    presetText: String = "",
    onValueChange: ((String) -> Unit)? = null,
    enabled: Boolean = true,
    keyboardActions: KeyboardActions = KeyboardActions.Default,
    visualTransformation: VisualTransformation = VisualTransformation.None
) {
    var value by remember { mutableStateOf(presetText) }
    var currentCount by remember { mutableIntStateOf(presetText.length) }
    // 初始化焦点请求器与状态变量
    var isFocused by remember { mutableStateOf(false) }
    // 获取当前TextField的颜色配置
    val textFieldColors = LocalTextFieldColors.current

    TextField(
        modifier = modifier,
        value = value,
        onValueChange = { newText ->
            if (newText.length <= maxCount) {
                value = newText
                currentCount = newText.length
                onValueChange?.invoke(newText)
            }
        },
        label = {
            RegularText(
                text = hint,
                color = Blue600,
                textSize = 12.sp
            )
        },
        supportingText = {
            // 根据状态选择对应颜色
            val supportingColor = when {
                !enabled -> textFieldColors.disabledSupportingTextColor(enabled).value
                isFocused -> textFieldColors.focusedSupportingTextColor(enabled).value
                else -> textFieldColors.unfocusedSupportingTextColor(enabled).value
            }
            
            Row(
                modifier = Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.SpaceBetween
            ) {
                RegularText(
                    modifier = Modifier.align(Alignment.CenterVertically),
                    text = counterText,
                    textSize = 14.sp,
                    color = supportingColor
                )
                RegularText(
                    modifier = Modifier.align(Alignment.CenterVertically),
                    text = "$currentCount/$maxCount",
                    textSize = 12.sp,
                    color = supportingColor
                )
            }
        },
        maxLines = 1,
        textStyle = TextStyle(
            color = Blue600,
            fontFamily = RegularTextFontFamily,
            fontSize = 12.sp
        ),
        enabled = enabled,
        keyboardActions = keyboardActions,
        visualTransformation = visualTransformation,
        colors = TextFieldDefaults.colors(
            focusedContainerColor = White000,
            unfocusedContainerColor = White000,
            disabledContainerColor = Grey100,
            focusedIndicatorColor = Blue600,
            unfocusedIndicatorColor = Grey100,
            focusedSupportingTextColor = Blue600,
            unfocusedSupportingTextColor = Grey400,
            cursorColor = Blue600,
            errorTextColor = Red200
        ),
        // 监听焦点变化更新状态
        onFocusChanged = { state ->
            isFocused = state.isFocused
        }
    )
}

补充说明 #

• 确保RegularText组件支持接收color参数（若原本未支持，需调整其Composable定义）
• 代码中额外处理了disabled状态的颜色，保持组件样式一致性
• 若需要为supportingText中的两个文本设置不同颜色，可分别为它们编写颜色判断逻辑

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