如何解决 Android Studio 无法预览 Jetpack Compose 组件效果的问题？

问题背景

在编写Jetpack Compose项目时，有时候会遇到类似的问题：

代码如下：

@Composable
fun Greeting(name: String) {
    Text(text = "$name!")
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    ComposeApp21Theme {
        //StartButton(true)
        Greeting("ss")
    }
}

排查过程

点开感叹后看看是什么问题：

Missing classes
The following classes could not be found:

- androidx.compose.ui.tooling.ComposeViewAdapter (Add ui-tooling library dependency to the project, Fix Build Path, Edit File, Create Class)

这里给出了提示：

应该是和缺少某个依赖库有关，而这个库和 androidx.compose.ui.tooling 有关系。查看构建脚本：
build.gradle.kts(:app), Gradle的是 build.gradle (:app),

发现已经存在androidx.compose.ui.tooling相关的依赖：

到底是哪个呢？
既然上面错误提示是ui-tooling 库：

那我们就只看

debugImplementation ("androidx.compose.ui:ui-tooling")

可以发现，这个依赖是debugImplementation也就是仅限于debug环境的。
检查构建变体：

会发现目前是release而不是debug构建。
因此只要切换回debug构建，再Build & Refresh 一下，就能正常预览了：

总结

Android Studio 的Compose预览工具和构建环境挂钩，如果平时不小心切换到Release忘记切换回Debug，就会出现类似的问题。而且默认情况下，创建项目时，ui-tooling库只会添加到debug版的依赖里，这意味着，这个预览工具支持库ui-tooling 库不应该添加到release的依赖关系。平时注意切换就行了。