Jetpack Compose出现@Composable调用必须在@Composable函数上下文错误如何修复

你遇到的报错本质是Composable函数调用上下文缺失，具体由你自定义的同名基础组件参数注解缺失导致：

错误原因 #

你自行声明的TopAppBar、IconButton等组件中，接收UI内容的lambda参数没有添加@Composable注解，因此在这些lambda内部调用Composable函数时，没有对应的Compose上下文环境，触发了编译错误。

具体修复步骤 #

• 修正TopAppBar的参数注解和返回值
  原定义中title、navigationIcon、actions三个lambda参数都缺少@Composable注解，同时返回值写法错误，修改后如下：

  @Composable
  fun TopAppBar(
      title: @Composable () -> Unit,
      modifier: Modifier = Modifier,
      navigationIcon: @Composable () -> Unit,
      actions: @Composable RowScope.() -> Unit = {},
      backgroundColor: Color = MaterialTheme.colors.primarySurface,
      contentColor: Color = contentColorFor(backgroundColor),
      elevation: Dp = AppBarDefaults.TopAppBarElevation
  ) { 
      // 此处添加TopAppBar的具体实现逻辑，若不需要自定义直接使用官方Material库的实现即可
  }
  

• 修正IconButton的参数注解
  原定义中content参数缺少@Composable注解，修改后如下：

  @Composable
  fun IconButton(
      onClick: () -> Unit,
      modifier: Modifier = Modifier,
      enabled: Boolean = true,
      interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
      content: @Composable () -> Unit
  ) { 
      // 此处添加IconButton的具体实现逻辑，若不需要自定义直接使用官方Material库的实现即可
  }
  

• 修正Icon函数实现
  你当前定义的Icon只支持Painter类型参数，但你调用时传入的是ImageVector类型的图标，要么重载一个接收ImageVector参数的Icon函数，要么直接删除你自定义的这三个基础组件，直接导入androidx.compose.material包下的官方实现，不需要自行重写。

额外优化建议 #

如果没有特殊的自定义需求，不需要自行重写TopAppBar、IconButton、Icon这些基础组件，直接使用官方提供的实现即可完全避免这类参数注解缺失的问题。

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