如何在KMM模块中正常渲染Jetpack Compose预览？

我太懂这种测试阶段卡壳的感觉了——用着对应Android Studio Meerkat的最新KMM插件，先搭个简单Compose组件加预览探路，就怕后面迁代码出问题，结果连预览都跑不起来确实闹心。

要让KMM模块里的Compose预览正常渲染，你可以按下面的步骤一步步检查配置：

• 先把模块的Android目标配置补全Compose相关内容
  打开你新建测试模块的build.gradle.kts，找到Android目标的配置块，确保开启Compose功能并引入正确依赖：

  android {
      // 保留你原本的compileSdk、defaultConfig等配置
      buildFeatures {
          compose = true // *必须开启这个才能启用Compose支持*
      }
      composeOptions {
          // 这里的版本要和你项目的Kotlin版本严格适配，比如用Kotlin 1.9.20的话，对应compose compiler 1.5.11
          // 直接用Android Studio提示的兼容版本就不会错
          kotlinCompilerExtensionVersion = "你的适配版本号"
      }
  }
  
  dependencies {
      // 基础Compose UI和Material3依赖
      implementation("androidx.compose.ui:ui:1.6.8")
      implementation("androidx.compose.material3:material3:1.2.1")
      // 预览必须的调试依赖，别漏了
      debugImplementation("androidx.compose.ui:ui-tooling:1.6.8")
      debugImplementation("androidx.compose.ui:ui-tooling-preview:1.6.8")
  }
  

• 检查你的预览写法是否符合规范
  预览函数得是无参的Composable，并且加上@Preview注解，比如：

  // 测试用的基础Composable
  @Composable
  fun TestKmmComposable() {
      Text(text = "Hello KMM Compose")
  }
  
  // 对应的预览函数，必须无参
  @Preview(showBackground = true, name = "Test Preview")
  @Composable
  fun TestKmmComposablePreview() {
      TestKmmComposable()
  }
  

  千万别给预览函数加参数，不然Android Studio根本识别不出来。

• 几个快速排障的小技巧
  如果配置都对了但预览还是不显示，可以试试：

  • 点击预览面板右上角的刷新按钮，重新加载预览
  • 清理Android Studio缓存：File -> Invalidate Caches... -> 选择Invalidate and Restart，很多奇怪的预览bug重启后都能解决
  • 确保你的KMM模块被主Android应用模块依赖了，或者直接在KMM模块的Android目标上下文下打开预览

内容来源于stack exchange