BasicTextField自定义失效排查：颜色、视觉变换与错误状态异常

问题1：颜色不生效 #

核心原因 #

• BasicTextField 直接设置的 textStyle = MaterialTheme.typography.bodyLarge 会覆盖 TextFieldDefaults.colors 中配置的文本颜色，导致聚焦/失焦/错误状态的文本颜色失效。
• TextFieldDefaults.DecorationBox 的 container 参数被设为空实现 {}，完全跳过了容器背景色的渲染逻辑，包括错误状态的容器色。
• DecorationBox 使用了独立的 MutableInteractionSource，和 BasicTextField 的交互状态不共享，导致焦点状态判断错误，聚焦/失焦的颜色切换逻辑失效。

修复要点 #

• 移除 BasicTextField 中固定的 textStyle，改为根据状态动态配置颜色，或让文本颜色由 TextFieldDefaults.colors 控制。
• 还原 container 参数的默认实现，确保容器背景色正常渲染。
• 让 BasicTextField 和 DecorationBox 共享同一个 MutableInteractionSource，保证交互状态同步。

问题2：VisualTransformation 无作用 #

核心原因 #

VisualTransformation 必须传递给 BasicTextField 本身，它才会对输入文本执行变换处理。仅在 DecorationBox 中传入参数，只会影响显示效果，但不会处理输入逻辑，导致变换完全不生效。

修复要点 #

在 BasicTextField 的参数中直接添加 visualTransformation = visualTransformation，让输入文本的变换逻辑生效。

问题3：isError 未触发颜色变更 #

核心原因 #

• 文本颜色被固定的 textStyle 覆盖，错误状态的 errorTextColor 无法生效。
• 容器背景色因 container 参数为空无法渲染，errorContainerColor 完全不显示。
• 光标、图标等元素的颜色未关联 isError 状态，错误提示不完整。

修复要点 #

• 根据 isError 状态动态切换文本、光标、图标的颜色。
• 还原 container 参数实现，让错误状态的容器背景色正常显示。

修复后的完整代码 #

@SuppressLint("UnrememberedMutableInteractionSource")
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun SpotifyTextField(
    value: TextFieldValue,
    onValueChange: (TextFieldValue) -> Unit,
    modifier: Modifier = Modifier,
    trailingIcon: @Composable() (() -> Unit)? = null,
    visualTransformation: VisualTransformation = VisualTransformation.None,
    keyboardType: KeyboardType = KeyboardType.Text,
    imeAction: ImeAction = ImeAction.Done,
    keyboardActions: KeyboardActions = KeyboardActions.Default,
    readOnly: Boolean = false,
    isError: Boolean = false,
) {
    // 共享交互状态，确保焦点/错误状态同步
    val interactionSource = remember { MutableInteractionSource() }
    
    BasicTextField(
        value = value,
        onValueChange = onValueChange,
        modifier = modifier
            .fillMaxWidth()
            .height(48.dp)
            .padding(start = 4.dp, end = 4.dp),
        singleLine = true,
        // 根据错误状态动态配置文本颜色，避免固定样式覆盖
        textStyle = MaterialTheme.typography.bodyLarge.copy(
            color = if (isError) {
                MaterialTheme.colorScheme.onErrorContainer
            } else {
                Color.White
            }
        ),
        readOnly = readOnly,
        keyboardOptions = KeyboardOptions(
            keyboardType = keyboardType,
            imeAction = imeAction,
            hintLocales = LocaleList(Locale("en")),
        ),
        keyboardActions = keyboardActions,
        // 关键：将变换逻辑传递给BasicTextField本身
        visualTransformation = visualTransformation,
        interactionSource = interactionSource,
        // 根据错误状态动态切换光标颜色
        cursorBrush = SolidColor(
            if (isError) {
                MaterialTheme.colorScheme.error
            } else {
                MaterialTheme.colorScheme.onTertiary
            }
        ),
        decorationBox = { innerTextField ->
            TextFieldDefaults.DecorationBox(
                value = value.text,
                isError = isError,
                innerTextField = { innerTextField() },
                visualTransformation = visualTransformation,
                trailingIcon = trailingIcon,
                shape = RoundedCornerShape(4.dp),
                colors = TextFieldDefaults.colors(
                    unfocusedContainerColor = MaterialTheme.colorScheme.secondary,
                    focusedContainerColor = MaterialTheme.colorScheme.tertiary,
                    errorContainerColor = MaterialTheme.colorScheme.errorContainer,
                    focusedTextColor = Color.White,
                    unfocusedTextColor = Color.White,
                    errorTextColor = MaterialTheme.colorScheme.onErrorContainer,
                    errorCursorColor = MaterialTheme.colorScheme.error,
                    errorTrailingIconColor = MaterialTheme.colorScheme.error,
                    focusedIndicatorColor = Color.Transparent,
                    unfocusedIndicatorColor = Color.Transparent,
                    errorIndicatorColor = Color.Transparent,
                    disabledLabelColor = MaterialTheme.colorScheme.tertiary,
                ),
                contentPadding = PaddingValues(8.dp),
                // 还原容器渲染逻辑，确保背景色正常显示
                container = {
                    TextFieldDefaults.ContainerBox(
                        shape = RoundedCornerShape(4.dp),
                        colors = TextFieldDefaults.colors(
                            unfocusedContainerColor = MaterialTheme.colorScheme.secondary,
                            focusedContainerColor = MaterialTheme.colorScheme.tertiary,
                            errorContainerColor = MaterialTheme.colorScheme.errorContainer,
                        ),
                        interactionSource = interactionSource,
                        enabled = true,
                        isError = isError,
                    )
                },
                enabled = true,
                singleLine = true,
                interactionSource = interactionSource,
            )
        },
    )
}

@Composable
fun SpotifyPasswordField(
    modifier: Modifier = Modifier,
    value: TextFieldValue,
    onValueChange: (TextFieldValue) -> Unit,
    imeAction: ImeAction = ImeAction.Done,
    isError: Boolean = false,
    keyboardActions: KeyboardActions = KeyboardActions.Default,
) {
    val showPassword = remember { mutableStateOf(false) }
    
    SpotifyTextField(
        modifier = modifier,
        value = value,
        onValueChange = onValueChange,
        isError = isError,
        trailingIcon = {
            IconButton(onClick = { showPassword.value = !showPassword.value }) {
                Icon(
                    imageVector = if (showPassword.value) SpotifyIcons.Visibility else SpotifyIcons.VisibilityOff,
                    contentDescription = if (showPassword.value) "隐藏密码" else "显示密码",
                    // 错误状态下切换图标颜色
                    tint = if (isError) MaterialTheme.colorScheme.error else MaterialTheme.colorScheme.onTertiary
                )
            }
        },
        visualTransformation = if (showPassword.value) {
            VisualTransformation.None
        } else {
            PasswordVisualTransformation()
        },
        imeAction = imeAction,
        keyboardType = KeyboardType.Password,
        keyboardActions = keyboardActions,
    )
}

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