可组合调用只能在 @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 视频开始，它解释了何时需要在撰写中使用状态的基本原则。您可以通过 Compose文档中的状态继续加深您的知识。

另一种选择是使用Compose Navigation。