错误：“@Composable 调用只能在 @Composable 函数的上下文中发生”

Question

我尝试在单击工具栏操作时显示吐司消息，但出现此错误

@composable 调用只能在 a 的上下文中发生 @可组合函数

代码：

@Composable
fun Toolbar() {
    TopAppBar(title = { Text(text = "Jetpack Compose") }, navigationIcon = {
        IconButton(onClick = {}) {
            Icon(Icons.Filled.Menu)
        }
    }, actions = {
        IconButton(onClick = {
            showMessage(message = "test")
        }) {
            Icon(vectorResource(id = R.drawable.ic_baseline_save_24))
        }
    })
}

@Preview
@Composable
fun ToolbarPreview(){
    Toolbar()
}

@Composable
fun showMessage(message:String){
    Toast.makeText(ContextAmbient.current, message, Toast.LENGTH_SHORT).show()
}

Answer 1

onClick

参数不接受可组合函数。 删除

@Composable

中的

showMessage

注释。
使用类似的东西：

@Composable
fun Toolbar() {

    val context = LocalContext.current

    TopAppBar(title = {},
            actions = {
        IconButton(onClick = {
            showMessage(context, message = "test")
        }){}
    })
}

fun showMessage(context: Context, message:String){
    Toast.makeText(context, message, Toast.LENGTH_SHORT).show()
}

Answer 2

我遇到了同样的错误，我的解决方案是向我传递另一个可组合函数的方法中的参数添加

@Composable

注释。

示例：

fun drawScreen(navigationIcon: @Composable () -> Unit) {
    navigationIcon()
    ...
}

Answer 3

这里 onClick() 不需要任何可组合函数，这就是它抛出错误的原因。 只需从 showMessage 函数中删除

@Composable

即可。

Answer 4

如果有人想在点击事件上使用 Composable

Column {
    var isClicked by mutableStateOf(false)

    Button(onClick = { isClicked = true }) { Text(text = "Click Me") }

    if (isClicked) {
        // display your composable
    }
}

Answer 5

你的意思是这样的吗？

@Composable
fun MyTopAppBar(
        title: String,
        actionItem: TopBarActionItem,
        navigationClick: (@Composable () -> Unit)? = null) {}

如何调用navigationClick？

invoke()

方法本身不可组合，再次出现错误。

你不能使用

navigationClick?.invoke()