问题描述
我创建了两个 TextField
电子邮件、密码和 Button
登录名。现在单击该按钮,我想访问文本并根据验证显示成功/错误。
问题是它们在两个不同的可组合函数中。
@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")
}
}
如果您想查看整个活动,这就是目前的结构。
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",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
},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),modifier = Modifier.clickable {})
}
)
}
@Composable
fun PassWordField() {
var password by rememberSaveable { mutableStateOf("") }
TextField(
modifier = Modifier.fillMaxWidth(0.9f),value = password,onValueChange = { password = it },label = { Text("Password") },visualTransformation = PasswordVisualTransformation(),keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password),leadingIcon = {
Icon(
Icons.Filled.Lock,modifier = Modifier.clickable {})
}
)
}
}
解决方法
您可以使用 ViewModel
或类似的东西:
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
)
}
,
这是rememberSaveable
的另一种解决方案@Composable
fun MainBody() {
Column(
modifier = Modifier
.fillMaxHeight()
.fillMaxWidth()
) {
var inputValue by rememberSaveable { mutableStateOf("") }
CommonTextField(value = inputValue,onInputChanged = { inputValue = it })
}
}
这里定义了 CommonTextField 函数
@Composable
fun CommonTextField(value: String,onInputChanged: (String) -> Unit) {
TextField(value = value,onValueChange = onInputChanged,modifier = Modifier
.fillMaxWidth()
.padding(16.dp),label = { Text(text = "Enter here")})
}