如何在Jetpack Compose中实现复用文本字段的独立错误提示

1. 升级自定义输入组件 #

先修改UserInputTextField，新增错误提示文本参数，让组件能根据错误状态展示对应提示：

@Composable
fun UserInputTextField(
    fieldState: String,
    onFieldChange: (String) -> Unit,
    label: String,
    isError: Boolean = false,
    errorMessage: String? = null, // 新增错误提示参数
    modifier: Modifier = Modifier,
) {
    Column(modifier = modifier.fillMaxWidth()) {
        androidx.compose.material.OutlinedTextField(
            value = fieldState,
            onValueChange = onFieldChange,
            isError = isError,
            label = { androidx.compose.material.Text(text = label) },
            modifier = Modifier.fillMaxWidth(),
            colors = TextFieldDefaults.outlinedTextFieldColors(
                focusedBorderColor = Color.Blue,
                unfocusedBorderColor = Color.Black,
                errorBorderColor = Color.Red // 错误时边框变红，增强视觉提示
            )
        )
        // 仅当isError为true且有提示内容时，显示错误文本
        if (isError && errorMessage != null) {
            Text(
                text = errorMessage,
                color = Color.Red,
                fontSize = 12.sp,
                modifier = Modifier.padding(start = 16.dp, top = 4.dp)
            )
        }
    }
}

2. 为每个输入框独立配置错误逻辑 #

调用组件时，给当前密码、新密码、确认新密码分别设置对应的错误状态和提示文本。示例如下（假设使用ViewModel管理状态）：

// ViewModel中定义状态类
data class PasswordChangeState(
    val currentPassword: String = "",
    val newPassword: String = "",
    val confirmNewPassword: String = "",
    val isCurrentPasswordError: Boolean = false,
    val currentPasswordErrorMsg: String? = null,
    val isNewPasswordError: Boolean = false,
    val newPasswordErrorMsg: String? = null,
    val isConfirmPasswordError: Boolean = false,
    val confirmPasswordErrorMsg: String? = null
)

// 页面中调用组件
val state = viewModel.passwordChangeState.collectAsState().value

UserInputTextField(
    fieldState = state.currentPassword,
    onFieldChange = { viewModel.updateCurrentPassword(it) },
    label = "当前密码",
    isError = state.isCurrentPasswordError,
    errorMessage = state.currentPasswordErrorMsg,
    modifier = Modifier.padding(top = 16.dp)
)

UserInputTextField(
    fieldState = state.newPassword,
    onFieldChange = { viewModel.updateNewPassword(it) },
    label = "新密码",
    isError = state.isNewPasswordError,
    errorMessage = state.newPasswordErrorMsg,
    modifier = Modifier.padding(top = 16.dp)
)

UserInputTextField(
    fieldState = state.confirmNewPassword,
    onFieldChange = { viewModel.updateConfirmPassword(it) },
    label = "确认新密码",
    isError = state.isConfirmPasswordError,
    errorMessage = state.confirmPasswordErrorMsg,
    modifier = Modifier.padding(top = 16.dp)
)

3. 实现各输入框的验证逻辑 #

在ViewModel中为每个输入框添加独立的校验逻辑，示例片段：

// 校验当前密码（假设checkWithServer是调用后端接口验证旧密码的方法）
fun validateCurrentPassword(input: String) {
    val isValid = checkWithServer(input)
    _passwordChangeState.update {
        it.copy(
            isCurrentPasswordError = !isValid,
            currentPasswordErrorMsg = if (!isValid) "旧密码输入错误" else null
        )
    }
}

// 校验新密码规则（示例：长度至少8位）
fun validateNewPassword(input: String) {
    val isValid = input.length >= 8
    _passwordChangeState.update {
        it.copy(
            isNewPasswordError = !isValid,
            newPasswordErrorMsg = if (!isValid) "密码长度至少8位" else null
        )
    }
}

// 校验确认密码是否与新密码一致
fun validateConfirmPassword(newPwd: String, confirmPwd: String) {
    val isValid = newPwd == confirmPwd
    _passwordChangeState.update {
        it.copy(
            isConfirmPasswordError = !isValid,
            confirmPasswordErrorMsg = if (!isValid) "两次输入的密码不匹配" else null
        )
    }
}

这样每个输入框就能独立控制错误状态和对应的提示文本，完全满足密码修改流程的错误展示需求。

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