TextField 焦点/非焦点 SupportingText 颜色不更新问题：解决方案全攻略

2024-03-19 21:20:52

Jetpack Compose TextField 焦点/非焦点 SupportingText 颜色更新问题：深入探讨

问题概述

在 Jetpack Compose 中使用 TextField 时，你可能会遇到焦点/非焦点 SupportingText 颜色未更新的问题。具体来说，当将颜色值传递给 TextFieldDefaults.color() 的 focusedSupportingTextColor/unfocusedSupportingTextColor 字段时，文本颜色不会更新。

根本原因

导致此问题的根本原因是 SupportingText 颜色状态未手动设置。默认情况下，Compose 无法自动更新 SupportingText 颜色，因此需要手动实现。

解决方案

要解决此问题，你需要手动设置 SupportingText 的颜色状态。你可以通过使用 TextField 的 Modifier.onFocusChanged() 修饰符来监听焦点状态的变化。

当文本框获得焦点时，onFocusChanged() 修饰符将触发，你可以将 SupportingText 的颜色设置为焦点颜色。当文本框失去焦点时，onFocusChanged() 修饰符再次触发，你可以将 SupportingText 的颜色设置为非焦点颜色。

示例代码

以下示例代码演示如何解决 TextField 焦点/非焦点 SupportingText 颜色更新问题：

TextField(
    modifier = modifier.onFocusChanged { hasFocus ->
        if (hasFocus) {
            // 焦点获得时设置焦点颜色
            supportingTextModifier.composedColors = LocalContentColor.current.copy(color = Blue600)
        } else {
            // 失去焦点时设置非焦点颜色
            supportingTextModifier.composedColors = LocalContentColor.current.copy(color = Grey400)
        }
    },
    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 = {
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceBetween
        ) {
            RegularText(
                modifier = Modifier.align(Alignment.CenterVertically),
                text = counterText,
                textSize = 14.sp,
            )
            RegularText(
                modifier = Modifier.align(Alignment.CenterVertically),
                text = "$currentCount/$maxCount",
                textSize = 12.sp
            )
        }
    },
    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,
        cursorColor = Blue600,
        errorTextColor = Red200
    )
)