Jetpack Compose中如何处理OutlinedEditText的@字符输入错误

要实现输入内容包含'@'时显示红色错误样式，直接按以下步骤修改代码即可：

• 在调用自定义输入框的地方，计算错误状态并传入组件
• 修改UserInputTextField，新增错误状态参数并调整样式
• 可选：添加错误提示文本，明确告知用户错误原因

修改后的父组件调用代码 #

val hasError = usernameState.value.contains("@")
UserInputTextField(
    fieldState = usernameState.value,
    onFieldChange = { usernameState.value = it },
    label = "Enter Name",
    isError = hasError
)

修改后的UserInputTextField组件代码 #

@Composable
fun UserInputTextField(
    fieldState: String,
    onFieldChange: (String) -> Unit,
    label: String,
    modifier: Modifier = Modifier,
    isError: Boolean = false
) {
    Column(modifier = modifier) {
        androidx.compose.material.OutlinedTextField(
            value = fieldState,
            onValueChange = { onFieldChange(it) },
            label = { Text(text = label) },
            modifier = Modifier
                .fillMaxWidth()
                .padding(top = 16.dp)
                .semantics { testTag = TestTags.LoginContent.USERNAME_FIELD },
            isError = isError,
            colors = TextFieldDefaults.outlinedTextFieldColors(
                focusedBorderColor = if (isError) Color.Red else Color.Blue,
                unfocusedBorderColor = if (isError) Color.Red else Color.Black,
                errorBorderColor = Color.Red,
                errorLabelColor = Color.Red,
                cursorColor = if (isError) Color.Red else Color.Blue
            )
        )
        // 可选：显示错误提示
        if (isError) {
            Text(
                text = "用户名不能包含@符号",
                color = Color.Red,
                fontSize = 12.sp,
                modifier = Modifier.padding(top = 4.dp, start = 16.dp)
            )
        }
    }
}

关键说明 #

• 当isError为true时，输入框的边框、标签、光标都会切换为红色，形成统一的错误视觉反馈
• 错误提示文本可以让用户快速理解错误原因，优化体验
• 所有颜色参数都可根据你的设计需求自定义调整

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