如何使用 Jetpack Compose 在 Android 中验证登录表单中的文本字段?
在 Android 中,TextField 验证意味着检查用户输入是否足以让任务启动或调用函数。通常,验证发生在要求用户提供强制输入(标有星号的字段)的表单中。此类表单最常见的示例是注册或注册表单和登录表单。
在本文中,我们将向您展示如何使用 Jetpack Compose 在 Android 中验证登录表单中的文本字段。 IDE 准备就绪后,请按照以下步骤操作。
分步实施
第 1 步:在 Android Studio 中创建一个新项目
要在 Android Studio 中创建新项目,请参阅如何在 Android Studio 中创建/启动新项目。选择模板时,选择Empty Compose Activity 。如果您没有找到此模板,请尝试将 Android Studio 升级到最新版本。我们在Kotlin中演示了该应用程序,因此请确保在创建新项目时选择 Kotlin 作为主要语言。
第 2 步:使用 MainActivity.kt 文件
转到MainActivity.kt文件并参考以下代码。下面是MainActivity.kt文件的代码。代码中添加了注释以更详细地理解代码。
Kotlin
package com.geeksforgeeks.jcvalidation
import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
// Calling the composable function
// to display element and its contents
MainContent()
}
}
}
// Creating a composable
// function to display Top Bar
@Composable
fun MainContent() {
Scaffold(
topBar = { TopAppBar(title = { Text("GFG | Validation", color = Color.White) }, backgroundColor = Color(0xff0f9d58)) },
content = { MyContent() }
)
}
// Creating a composable function
// to create two TextFields
// Calling this function as content
// in the above function
@Composable
fun MyContent(){
// fetching local context
val mContext = LocalContext.current
Column(
Modifier
.fillMaxSize()
.padding(20.dp), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center) {
// Declaring two string values
// for storing username and password
val mUsername = remember { mutableStateOf("") }
val mPassword = remember { mutableStateOf("") }
// Creating two outlined text fields for
// fetching username and password from the user
OutlinedTextField(
value = mUsername.value,
onValueChange = { mUsername.value = it },
label = { Text(text = "Username") },
modifier = Modifier.fillMaxWidth()
)
OutlinedTextField(
value = mPassword.value,
onValueChange = { mPassword.value = it },
label = { Text(text = "Password") },
modifier = Modifier.fillMaxWidth()
)
// Adding a Spacer
Spacer(modifier = Modifier.height(100.dp))
// Button onclick would check
// for the below conditions
Button(onClick = {
if(mUsername.value.isEmpty() and mPassword.value.isNotEmpty()){
Toast.makeText(mContext, "Username is Empty", Toast.LENGTH_SHORT).show()
}
if (mPassword.value.isEmpty() and mUsername.value.isNotEmpty()){
Toast.makeText(mContext, "Password is Empty", Toast.LENGTH_SHORT).show()
}
if(mUsername.value.isEmpty() and mPassword.value.isEmpty()){
Toast.makeText(mContext, "Username and Password are Empty", Toast.LENGTH_SHORT).show()
}
if(mUsername.value.isNotEmpty() and mPassword.value.isNotEmpty()){
Toast.makeText(mContext, "Successfully Validated", Toast.LENGTH_SHORT).show()
}
},
colors = ButtonDefaults.buttonColors(backgroundColor = Color(0XFF0F9D58)),
) {
Text("Next", color = Color.White)
}
}
}
// For displaying preview in
// the Android Studio IDE emulator
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
MainContent()
}
输出:
您可以看到我们能够使用各种条件验证 TextField。