如何将Compose协程查询结果传递给Composable，解决调用上下文报错？

错误原因 #

@Composable 函数只能在Compose的重组上下文环境中调用，协程的执行代码块运行在后台线程上下文，不属于Composable调用上下文，因此直接在launch代码块内调用Composable会触发编译错误。

解决方案 #

通过Compose可观察State存储异步查询结果，待结果返回后触发重组，在Composable树的正常层级中调用Content组件即可。

优化后实现代码 #

composeView {
    MyTheme {
        // 定义可观察State存储查询结果，初始为null代表未加载完成
        val queryResult = remember { mutableStateOf<Boolean?>(null) }

        // LaunchedEffect的block本身运行在绑定Composable生命周期的协程中，无需额外创建CoroutineScope
        LaunchedEffect(key1 = Unit) {
            val b = database.query()
            // 赋值State触发重组
            queryResult.value = b
        }

        // 在Composable上下文中根据State结果调用组件
        queryResult.value?.let { result ->
            Content(b = result)
        }
        
        // 可选：添加加载中占位状态
        if (queryResult.value == null) {
            // 你的加载中组件实现
            Text(text = "加载中...")
        }
    }
}

@Composable
private fun Content(b: Boolean) {
    // 组件业务实现
}

实现原理 #

• Compose的MutableState是可观察数据容器，值发生变化时会自动触发关联区域的重组
• 异步查询的结果存入State后，触发重组时即可在合法的Composable上下文中拿到最新值，传入Content组件完成调用
• 额外优化：LaunchedEffect的执行块本身已经绑定了Composable生命周期的协程作用域，原有代码中额外创建rememberCoroutineScope再启动协程属于冗余代码，可以直接移除。

内容的提问来源于stack exchange，提问作者Ali