Jetpack Compose：是否可以在单击另一个可组合项 function 中的按钮时调用可组合项 function？

Question

当我尝试在 buttonClick 事件上编写文本时，我遇到了问题，我无法在另一个 function 中调用 @Composable function，因为： @Composable invocations can only happen from the context of a @Composable function发生. 我试图在按钮单击事件中调用 Composable BeCalc function 内的 showResult function。 有任何想法吗？ 谢谢

@Composable
fun showResult(result: Int?) {
    Text(
        buildAnnotatedString {
            if(result != null && result != 0){
                append("Unnecessary Text")

                withStyle(style = SpanStyle(color = MaterialTheme.colors.primaryVariant))   //Einheiten-Anzahl in Farbe
                {
                    append("$result")
                }
                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("")) }
    var result: Int? = 0
        Button(
                modifier = Modifier.padding(top = 24.dp),
                colors = ButtonDefaults.buttonColors(MaterialTheme.colors.primaryVariant),

                onClick = {
                    val intValueQuantity = valueQuantity.text.toInt()
                    val intValueCarbohydrate = valueCarbohydrate.text.toInt()

                    if (intValueQuantity != null && intValueCarbohydrate != null) {

                        result = (intValueCarbohydrate / intValueQuantity)
                        showResult(result)


                    } else {
                        println("No value!")
                    }

                })Button(
                modifier = Modifier.padding(top = 24.dp),
                colors = ButtonDefaults.buttonColors(MaterialTheme.colors.primaryVariant),

                onClick = {
                    val intValueQuantity = valueQuantity.text.toInt()
                    val intValueCarbohydrate = valueCarbohydrate.text.toInt()

                    if (intValueQuantity != null && intValueCarbohydrate != null) {

                        result = (intValueCarbohydrate / intValueQuantity)
                        showResult(result)


                    } else {
                        println("No value!")
                    }

                }
    )
}

Answer 1

Compose 不能以这种方式工作。
您无法在onClick参数中调用可组合项来显示更新后的值。
相反，您必须使用 state 并在onClick中更新它。

就像是：

var count by rememberSaveable { mutableStateOf(0) }
var shouldShowResult by remember {
    mutableStateOf(false)
}

Button(
    //..
    onClick = {
        val intValueQuantity = valueQuantity.text.toInt()
        val intValueCarbohydrate = valueCarbohydrate.text.toInt()

        if (intValueQuantity != null && intValueCarbohydrate != null) {
            count = (intValueCarbohydrate / intValueQuantity)
            shouldShowResult = true
        } else {
            println("No value!")
        }
    }
){
    Text("Show Result")
}

if (shouldShowResult) {
    showResult(count)
}