如何使用 Jetpack Compose 在 Android 中验证登录表单中的文本字段？

Jetpack Compose 是 Android 的一个新的 UI 工具包，可以大大简化 UI 开发的过程，特别是与 UI 表单有关的开发。在本篇文章中，我们将介绍如何使用 Jetpack Compose 来验证登录表单中的文本字段。

开始之前

为了遵循本文，你需要了解以下内容：

• Kotlin： Jetpack Compose 是使用 Kotlin 开发的，因此你需要熟悉 Kotlin 的基础知识。
• Android 开发： 本文假定你了解 Android 开发的基础知识。
• Jetpack Compose：本文假定你已经熟悉了 Jetpack Compose 的基础知识。

准备工作

在开始本文之前，你需要添加以下依赖项到你的项目中：

dependencies {
    implementation 'androidx.compose.runtime:runtime:1.0.0-beta01'
    implementation 'androidx.compose.foundation:foundation:1.0.0-beta01'
    implementation 'androidx.compose.material:material:1.0.0-beta01'
}

构建 UI 表单

首先，我们需要构建登录表单的 UI。我们将使用 Jetpack Compose 来实现，这意味着我们不需要使用 XML 布局。以下是最终结果：

@Composable
fun LoginScreen() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(horizontal = 16.dp, vertical = 8.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text(
            text = "Login",
            style = MaterialTheme.typography.h4
        )
        Spacer(modifier = Modifier.height(16.dp))
        TextField(
            value = "",
            onValueChange = {},
            label = { Text("Username") },
            singleLine = true,
            keyboardOptions = KeyboardOptions.Default.copy(
                imeAction = ImeAction.Next
            ),
            modifier = Modifier.fillMaxWidth()
        )
        Spacer(modifier = Modifier.height(16.dp))
        TextField(
            value = "",
            onValueChange = {},
            label = { Text("Password") },
            visualTransformation = PasswordVisualTransformation(),
            singleLine = true,
            keyboardOptions = KeyboardOptions.Default.copy(
                imeAction = ImeAction.Done
            ),
            modifier = Modifier.fillMaxWidth()
        )
        Spacer(modifier = Modifier.height(16.dp))
        Button(
            onClick = {},
            modifier = Modifier.fillMaxWidth()
        ) {
            Text(text = "Login")
        }
    }
}

我们可以看到表单中有两个文本字段：“用户名”和“密码”，每个文本字段之间都有一个垂直的间距。

验证文本字段

现在我们将为表单中的每个文本字段添加验证逻辑。

首先，我们将创建一个验证函数，它将检查文本字段是否符合要求。我们将使用两个参数：文本字段的值和一个回调函数，当验证成功时调用：

fun validateUsername(
    username: String,
    onSuccess: () -> Unit,
    onError: (String) -> Unit
) {
    if (username.isEmpty()) {
        onError("Username can't be empty")
        return
    }
    onSuccess()
}

fun validatePassword(
    password: String,
    onSuccess: () -> Unit,
    onError: (String) -> Unit
) {
    if (password.isEmpty()) {
        onError("Password can't be empty")
        return
    }
    onSuccess()
}

现在，我们将使用 remember 来跟踪每个文本字段的值，类似于使用 findViewById() 来查找视图：

@Composable
fun LoginScreen() {
    val usernameState = remember { mutableStateOf("") }
    val passwordState = remember { mutableStateOf("") }

    // ...
}

接下来，我们将将文本字段的值作为参数传递给相应的验证函数，并在验证失败时显示错误消息：

@Composable
fun LoginScreen() {
    val usernameState = remember { mutableStateOf("") }
    val passwordState = remember { mutableStateOf("") }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(horizontal = 16.dp, vertical = 8.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text(
            text = "Login",
            style = MaterialTheme.typography.h4
        )
        Spacer(modifier = Modifier.height(16.dp))
        TextField(
            value = usernameState.value,
            onValueChange = { value ->
                usernameState.value = value
                validateUsername(
                    value,
                    onSuccess = { /* handle success case */ },
                    onError = { /* handle error case */ }
                )
            },
            label = { Text("Username") },
            singleLine = true,
            keyboardOptions = KeyboardOptions.Default.copy(
                imeAction = ImeAction.Next
            ),
            modifier = Modifier.fillMaxWidth()
        )
        Spacer(modifier = Modifier.height(16.dp))
        TextField(
            value = passwordState.value,
            onValueChange = { value ->
                passwordState.value = value
                validatePassword(
                    value,
                    onSuccess = { /* handle success case */ },
                    onError = { /* handle error case */ }
                )
            },
            label = { Text("Password") },
            visualTransformation = PasswordVisualTransformation(),
            singleLine = true,
            keyboardOptions = KeyboardOptions.Default.copy(
                imeAction = ImeAction.Done
            ),
            modifier = Modifier.fillMaxWidth()
        )
        Spacer(modifier = Modifier.height(16.dp))
        Button(
            onClick = { /* handle button click */ },
            modifier = Modifier.fillMaxWidth()
        ) {
            Text(text = "Login")
        }
    }
}

现在，我们已经完成了文本字段的验证逻辑。每次用户更改文本字段中的文本时，我们都会调用相应的验证函数，并在失败时显示错误消息。

总结

本文介绍了如何使用 Jetpack Compose 在 Android 中验证登录表单中的文本字段。我们首先使用 Jetpack Compose 创建了登录表单的 UI ，然后添加了验证逻辑，并在失败时显示错误消息。使用 Jetpack Compose 能够大大减少表单验证的代码量，让我们更专注于实现业务需求。