从 Jetpack Compose 中的另一个可组合函数访问 TextField 值 [英] Access TextField value from another composable function in Jetpack Compose
本文介绍了从 Jetpack Compose 中的另一个可组合函数访问 TextField 值的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我创建了两个 TextField
电子邮件、密码和按钮
登录.现在单击该按钮,我想访问文本并根据验证显示成功/错误.
I have created two TextField
Email, Password & Button
Login. Now on click of that button I want to access text and show success/error based on validation.
问题是它们在两个不同的可组合函数中.
The problem is they are in two different composable functions.
@Composable
fun EmailField() {
var email by remember { mutableStateOf("") }
TextField(
modifier = Modifier.fillMaxWidth(0.9f),
colors = TextFieldDefaults.textFieldColors(
textColor = Color.White,
focusedIndicatorColor = Color.White,
focusedLabelColor = Color.White
),
value = email,
onValueChange = { email = it },
label = { Text("Email") },
leadingIcon = {
Icon(
Icons.Filled.Email,
"contentDescription",
modifier = Modifier.clickable {})
}
)
}
按钮:
@Composable
private fun LoginButton() {
Button(
onClick = {
// validate email and password here
},
colors = ButtonDefaults.buttonColors(
backgroundColor = Color.Yellow,
contentColor = Color.White
)
) {
Text(text = "Login")
}
}
如果您想查看整个活动,这就是目前的结构.
If you want to see whole activity this is how it's structured at the moment.
class LoginActivity : BaseActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
AppTheme {
Column(
modifier = Modifier
.fillMaxSize()
.background(color = MaterialTheme.colors.primary),
verticalArrangement = Arrangement.Top,
horizontalAlignment = Alignment.CenterHorizontally
) {
Spacer(modifier = Modifier.height(32.dp))
LoginLogo()
Spacer(modifier = Modifier.height(32.dp))
Text(
text = "Login",
modifier = Modifier.fillMaxWidth(0.9f),
style = MaterialTheme.typography.h5,
textAlign = TextAlign.Start
)
Spacer(modifier = Modifier.height(12.dp))
Text(
text = "Please sign in to continue",
modifier = Modifier.fillMaxWidth(0.9f),
style = MaterialTheme.typography.subtitle1,
textAlign = TextAlign.Start
)
Spacer(modifier = Modifier.height(32.dp))
EmailField()
Spacer(modifier = Modifier.height(16.dp))
PassWordField()
Spacer(modifier = Modifier.height(16.dp))
LoginButton()
}
}
}
}
@Composable
private fun LoginButton() {
Button(
onClick = {
// validate email and password here
},
colors = ButtonDefaults.buttonColors(
backgroundColor = Color.Yellow,
contentColor = Color.White
)
) {
Text(text = "Login")
}
}
@Composable
fun LoginLogo() {
Image(
painter = painterResource(R.drawable.ic_vector_app_logo),
contentDescription = "Login Logo",
modifier = Modifier
.width(120.dp)
.height(120.dp)
)
}
@Composable
fun EmailField() {
var email by remember { mutableStateOf("") }
TextField(
modifier = Modifier.fillMaxWidth(0.9f),
colors = TextFieldDefaults.textFieldColors(
textColor = Color.White,
focusedIndicatorColor = Color.White,
focusedLabelColor = Color.White
),
value = email,
onValueChange = { email = it },
label = { Text("Email") },
leadingIcon = {
Icon(
Icons.Filled.Email,
"contentDescription",
modifier = Modifier.clickable {})
}
)
}
@Composable
fun PassWordField() {
var password by rememberSaveable { mutableStateOf("") }
TextField(
modifier = Modifier.fillMaxWidth(0.9f),
colors = TextFieldDefaults.textFieldColors(
textColor = Color.White,
focusedIndicatorColor = Color.White,
focusedLabelColor = Color.White
),
value = password,
onValueChange = { password = it },
label = { Text("Password") },
visualTransformation = PasswordVisualTransformation(),
keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password),
leadingIcon = {
Icon(
Icons.Filled.Lock,
"contentDescription",
modifier = Modifier.clickable {})
}
)
}
}
在这种情况下处理值的正确方法是什么?
What is the right way to handle values in this case?
推荐答案
您可以使用 ViewModel
或类似的东西:
You can use a ViewModel
or something like:
class TextFieldState(){
var text: String by mutableStateOf("")
}
@Composable
fun login(){
var emailState = remember { TextFieldState() }
EmailField(emailState)
LoginButton( onValidate = { /** validate **/})
}
与:
@Composable
fun EmailField( emailState : TextFieldState = remember { TextFieldState() }) {
TextField(
value = emailState.text,
onValueChange = {
emailState.text = it
},
//your code
)
}
和:
@Composable
private fun LoginButton(onValidate: () -> Unit) {
Button(
onClick = onValidate,
//your code
)
}
这篇关于从 Jetpack Compose 中的另一个可组合函数访问 TextField 值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文