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

【问题标题】：Access TextField value from another composable function in Jetpack Compose从 Jetpack Compose 中的另一个可组合函数访问 TextField 值
【发布时间】：2021-04-22 16:19:05
【问题描述】：

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


}

在这种情况下处理值的正确方法是什么？

【问题讨论】：

您可以使用ViewModel架构组件来管理这些字段和状态变化。 Read

标签： android android-jetpack-compose android-jetpack-compose-text

【解决方案1】：

您可以使用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
    )
}

【讨论】：

【解决方案2】：

这是另一个使用 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")})
}

【讨论】：