Jetpack Compose预览最佳实践：预览代码是否需单独存放？

一、预览代码的存放选择 #

两种模式各有适用场景，没有绝对的对错，看团队习惯和组件复杂度：

• 与组件放在同一文件
  适合小型、单一场景的组件，比如简单的Button、Text组件。好处是修改组件代码时，能立刻看到预览效果，不用切换文件，开发效率高。示例：

  @Composable
  fun PrimaryButton(text: String, onClick: () -> Unit) {
      Button(onClick = onClick, colors = ButtonDefaults.buttonColors(Color.Blue)) {
          Text(text = text, color = Color.White)
      }
  }
  
  // 同一文件内的预览
  @Preview
  @Composable
  fun PrimaryButtonPreview() {
      PrimaryButton(text = "点击我") {}
  }
  

• 单独存放在Preview文件
  适合复杂组件（比如包含多状态、多配置的页面级组件），或需要多个预览场景的情况。命名通常用[组件名]Preview.kt格式，比如HomeScreenPreview.kt。这样能保持主组件文件简洁，避免预览代码干扰核心逻辑，也方便集中管理该组件的所有预览场景。

二、确保预览代码不进入Release构建 #

有两种可靠方式：

1. 利用Debug源码目录
   把所有预览代码放在app/src/debug/java/[包名]目录下，Release构建只会编译main和release目录的代码，完全不会包含debug目录内容，这是最彻底的隔离方式。
2. 依赖配置与注解特性
   Jetpack Compose的@Preview注解来自androidx.compose.ui:ui-tooling库，Android Studio默认创建的Compose项目会用debugImplementation引入这个依赖。这意味着Release构建时不会包含该库，即使预览函数写在主文件里，也会被自动忽略，不会打包进APK。

如果想更明确标记预览代码，也可以给预览函数加上@RequiresApi(Build.VERSION_CODES.P)这类仅Debug生效的注解，但上面两种方式已经足够解决问题。

内容的提问来源于stack exchange，提问作者Nick Sahno