Jetpack compose AppBarIcon 抱怨“调用@Composable 函数的函数必须用@Composable 标记”答案

【问题标题】：Jetpack compose AppBarIcon complains that "Functions which invoke @Composable functions must be marked with the @Composable"Jetpack compose AppBarIcon 抱怨“调用@Composable 函数的函数必须用@Composable 标记”
【发布时间】：2020-01-19 06:15:48
【问题描述】：

我使用了 jetpack compose AppBarIcon 元素，但出现错误：调用@Composable 函数的函数必须用@Composable 标记” 当我在 onclick lamba 上调用可组合函数时。这是代码：

class testActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent { AppBarIcon(Image(10, 10) ) {
                composableFunction()
            }
        }
    }
} 

@Composable()
fun composableFunction() {
}

这是一个真正的问题，因为我在运行时遇到了异常

这是我想念的东西还是一个真正的错误？

【问题讨论】：

标签： android kotlin android-jetpack-compose

【解决方案1】：

首先要注意Composable function must 仅限 be called inside another Composable function。
现在回到您的问题，接受函数的 onClick 参数不是可组合函数。所以在onClick 内调用@Composable 函数不是选项，因此会抛出错误Functions which invoke @Composable functions must be marked with the @Composable。
解决此问题的代码。

class testActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    setContent {
        var loadView = +state { false }
        Column {
            AppBarIcon(+imageResource(R.drawable.dashboard)) {
                loadView.value = true
            }
            Text("Hey")
            if (loadView.value)
                composableFunction()
        }
    }
  }
}
@Composable()
fun composableFunction() {
    Text("appbar content")
}

onClick 不可组合的原因：所有 Composable 函数被同时调用以完整组合 UI。而 onClick 是在 UI 已经组合后调用。所以你需要在 onClick 发生后使用状态来重构 UI 并加载可组合的函数。

【讨论】：