Jetpack Compose：能否在另一个Composable的按钮点击事件中调用Composable函数？

报错@Composable invocations can only happen from the context of a @Composable function的核心原因是按钮的onClick回调是普通函数，不属于Composable上下文，不能直接在里面调用带@Composable注解的函数。Compose的UI渲染完全由状态驱动，正确的做法是通过更新状态触发UI重组，而非手动调用Composable函数。

解决步骤 #

• 将result声明为可观察状态（mutableStateOf），让Compose能感知其变化
• 在BeCalc的Composable代码体内直接调用showResult，传入状态值
• 点击事件中只负责计算并更新result状态，无需手动调用showResult

修正后的完整代码 #

@Composable
fun showResult(result: Int?) {
    Text(
        buildAnnotatedString {
            result?.takeIf { it != 0 }?.let {
                append("Unnecessary Text")
                withStyle(style = SpanStyle(color = MaterialTheme.colors.primaryVariant)) {
                    append("$it")
                }
                append("Unnecessary Text")
            }
        },
        modifier = Modifier.padding(top = 48.dp),
        fontSize = 20.sp,
        fontWeight = FontWeight.Bold
    )
}

@Composable
fun BeCalc(openDrawer: () -> Unit) {
    var valueCarbohydrate by remember { mutableStateOf(TextFieldValue("")) }
    var valueQuantity by remember { mutableStateOf(TextFieldValue("")) }
    // 将result改为可观察状态，让Compose感知变化
    var result by remember { mutableStateOf<Int?>(0) }

    Column(modifier = Modifier.padding(16.dp)) {
        // 补充输入框组件（原代码遗漏）
        TextField(
            value = valueCarbohydrate,
            onValueChange = { valueCarbohydrate = it },
            label = { Text("碳水化合物") }
        )
        TextField(
            value = valueQuantity,
            onValueChange = { valueQuantity = it },
            label = { Text("数量") }
        )

        Button(
            modifier = Modifier.padding(top = 24.dp),
            colors = ButtonDefaults.buttonColors(MaterialTheme.colors.primaryVariant),
            onClick = {
                // 用toIntOrNull避免非数字输入崩溃
                val intValueQuantity = valueQuantity.text.toIntOrNull()
                val intValueCarbohydrate = valueCarbohydrate.text.toIntOrNull()

                if (intValueQuantity != null && intValueCarbohydrate != null && intValueQuantity != 0) {
                    result = intValueCarbohydrate / intValueQuantity
                } else {
                    println("无效输入！")
                }
            }
        ) {
            Text("计算")
        }

        // 在Composable上下文直接调用showResult，状态变化时自动重组更新
        showResult(result)
    }
}

额外优化说明 #

• 修正原代码中重复定义Button的错误，补充按钮文本
• 添加Column布局容器，避免UI组件重叠
• 用toIntOrNull()替代toInt()，防止输入非数字内容时崩溃
• 新增intValueQuantity != 0判断，避免除以零异常

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