编译时错误：@Composable调用只能在@Composable函数的上下文中发生

Question

我有一个编译时错误，如标题所示

(@Composable调用只能在@Composable函数的上下文中发生)，

我有一张卡在这段代码中，所以我想在点击卡片后显示一个AlertDialog，

我知道这个问题在平台上是存在的，所以如何解决这个问题呢？

@Composable
fun Screen_A_with_WithTopBar(navController: NavController) {
    Scaffold(
        topBar = {
            TopAppBar(
                title = {
                    Text(text = "Top App Bar")
                },
                navigationIcon = {
                    IconButton(onClick = {
                        navController.navigate(Screen.Home.route)
                    }) {
                        Icon(Icons.Filled.Menu, "backIcon")
                    }
                },
                backgroundColor = MaterialTheme.colors.primary,
                contentColor = Color.White,
                elevation = 10.dp
            )
        }, content = {

        Screen_A(navController)

    }
)
}



@Composable
fun Screen_A(navController: NavController) {
    val context = LocalContext.current

Column(
    verticalArrangement = Arrangement.Center,
    horizontalAlignment = Alignment.CenterHorizontally,
    modifier = Modifier
        .fillMaxSize()
        //.background(ScreenColor)
) {

    Text(
        text = "Dooro",
        fontSize = 42.sp
    )

    Spacer(modifier = Modifier.height(33.dp))

    Row(
        verticalAlignment = Alignment.Top,
        horizontalArrangement = Arrangement.SpaceAround,
        modifier = Modifier
            .fillMaxWidth()
            .padding(12.dp),
    ) {

        Card(
            modifier = Modifier
                .width(150.dp)
                .height(80.dp)
                .clickable {

                    Alert()

                },
            RoundedCornerShape(7.dp),
            elevation = 7.dp
            //.padding(40.dp)
        ) {
            Text(
                text = "None",
                fontSize = 24.sp,
                fontWeight = FontWeight.Bold,
                textAlign = TextAlign.Center
            )
        }


    } // END Row

}

}

@Composable
fun Alert() {
    val openDialog = remember { mutableStateOf(true) }

if (openDialog.value) {
    AlertDialog(
        onDismissRequest = {
            openDialog.value = false
        },
        title = {
            Text(text = "Title")
        },
        text = {
            Text(
                "This area typically contains the supportive text " +
                        "which presents the details regarding the Dialog's purpose."
            )
        },
        buttons = {
            Row(
                modifier = Modifier.padding(all = 8.dp),
                horizontalArrangement = Arrangement.Center
            ) {
                Button(
                    modifier = Modifier.fillMaxWidth(),
                    onClick = { openDialog.value = false }
                ) {
                    Text("Dismiss")
                }
            }
        }
    )
}
}

Answer 1

在这里，您可以使用mutableStateOf显示您的警报。

在Screen_A上，您应该添加以下内容

var showAlert by mutableStateOf(false)


@Composable
private fun ShowAlert() {
    if (showAlert)
        Alert()
}

最后，在卡中，将showAlert字段的值更改为true。

        Card(
        modifier = Modifier
            .width(150.dp)
            .height(80.dp)
            .clickable {
               showAlert = true
            },
        RoundedCornerShape(7.dp),
        elevation = 7.dp
        //.padding(40.dp)
    )