从 Jetpack Compose 中的另一个可组合函数访问 TextField 值

如何解决从 Jetpack Compose 中的另一个可组合函数访问 TextField 值

我创建了两个 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")})
}