可组合调用只能在@Composable函数的上下文中进行

Question

我有一个可组合函数，我需要在点击按钮后调用它，但它一直显示一个错误，即可组合函数无法通过点击按钮执行，有人能指导我解决这个问题吗？谢谢

• 这是我的代码

Box(contentAlignment = Alignment.Center) {
Button(onClick = {
// This is a composable function that i need to call
SignUpNewUser(email,fullName,country,password)
}
,modifier = Modifier
.width(200.dp)
.background(color = Color.DarkGray)) {
Text(text = "Sign Up",style = TextStyle(color = Color.White,fontWeight = FontWeight.Bold))
}
}

Answer 1

您只能将@Composable视图添加到另一个@Composable视图中。

onClick未标记为@Composable，因此会收到此警告。只能使用onClick更改状态。

例如，您可以创建一个标志并根据该标志显示UI：

var signUp by remember { mutableStateOf(false) }
if (signUp) {
SignUpNewUser(email, fullName, country, password)
} else {
Box(contentAlignment = Alignment.Center) {
Button(onClick = {
signUp = true
}, modifier = Modifier
.width(200.dp)
.background(color = Color.DarkGray)) {
Text(text = "Sign Up", style = TextStyle(color = Color.White, fontWeight = FontWeight.Bold))
}
}
}

我建议你从这个youtube视频开始，它解释了在撰写时需要使用state的基本原则。您可以通过撰写文档中的state继续加深您的知识。

另一种选择是使用组合导航。