拆分Compose屏幕代码到独立文件调用时出现@Composable调用错误如何解决

错误原因 #

Jetpack Compose 要求所有标注了@Composable的函数，只能在同样带有@Composable注解的函数/作用域中调用。你拆分代码后触发该报错，本质是调用拆分出来的@Composable函数的位置不在Composable作用域内，常见的触发场景包括：

• 调用方是没有添加@Composable注解的普通函数
• 在没有标注@Composable的lambda、回调函数中调用
• 在onClick、普通协程体、生命周期回调等非Composable运行上下文中直接调用

修复方案 #

你可以对应自己的代码场景选择对应修复方式：

• 检查调用拆分后Composable函数的整条调用链，给所有上层调用方都添加@Composable注解，确保调用行为发生在Composable作用域内
• 如果是在自定义组件的lambda参数中调用Composable，需要给对应lambda参数加上@Composable注解，示例如下：

  // 错误写法，lambda参数无Composable注解
  fun CustomCard(content: () -> Unit) {
      Surface {
          content()
      }
  }
  
  // 调用时会触发报错
  CustomCard {
      MySplitComposable()
  }
  

  // 正确写法，给lambda添加Composable注解
  fun CustomCard(content: @Composable () -> Unit) {
      Surface {
          content()
      }
  }
  

• 不要在点击事件、普通协程、非Composable的生命周期回调中直接调用Composable函数，这类场景应该通过修改状态变量，由Composable树根据状态变化自动渲染对应的UI组件
• 检查拆分到独立文件的函数，确认已经正确添加了@Composable注解

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