需要成功构建才能显示预览或无法在 Android Studio 4.0 Canary 的预览中显示内容答案

【问题标题】：A successful build is needed before the preview can be displayed or can not show content in preview in Android Studio 4.0 (Canary)需要成功构建才能显示预览或无法在 Android Studio 4.0 Canary 的预览中显示内容
【发布时间】：2020-03-16 03:44:47
【问题描述】：

我已尝试打开预览但无法打开。

我尝试再次打开工作室，但预览只显示一个空白的白色屏幕，其中没有显示任何内容。当我再次打开它时，它会在预览端显示以下消息：

A successful build is needed before the preview can be displayed

构建过程已完成并尝试构建多次，但仍然显示相同的错误。

我在里面使用了简单的文字。

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

这是我的全部内容：

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Greeting("Android")
        }
    }

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

    @Preview
    @Composable
    fun PreviewGreeting() {
        Greeting("Android")
    }
}

如果有人知道这个问题，请分享答案。

【问题讨论】：

...您是在谈论布局预览，它只显示 XML，还是您正在尝试运行应用程序并让您的代码运行？
在给出注释@Preview 之后，我正在尝试在右侧的预览中显示内容。

标签： android kotlin android-jetpack-compose android-studio-4.0

【解决方案1】：

试试这个：

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Greeting("Android")
        }
    }

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

【讨论】：

欢迎来到 SO！当你只用代码回答问题时，试着解释一下你的答案。
PreviewGreeting()函数如何调用MainActivity的Greeting()类成员方法？这在 Kotlin 的规则中是不可能的。

【解决方案2】：

我遇到了同样的问题，当我点击 "Run with --info" 时收到的构建错误消息是：

e: This version (1.0.0-alpha13) of the Compose Compiler requires Kotlin version 1.4.30 but you appear to be using Kotlin version 1.5.0 which is not known to be compatible.  Please fix your configuration (or `suppressKotlinVersionCompatibilityCheck` but don't say I didn't warn you!).

于是我去了project level build.gradle文件，修改前的一个sn-p（你可以根据你的错误信息改变版本）-

buildscript {
    ..
    ..
    dependencies {
        classpath "com.android.tools.build:gradle:7.0.0-alpha15"
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.5.0"

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
    ..
    ..
}

所以根据错误消息，我将 kotlin-gradle-plugin 版本从 1.5.0 更改为 1.4.30 如下：-

classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.5.0"

到

classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.4.30"

在此之后，我对 gradle 文件进行了“立即同步”，并在预览选项卡中进行了“构建和刷新”，希望 兼容性问题 消失了，我能够看到实时预览。

这可能不是最好的解决方案，因为我们需要降级 kotlin 版本，但它对我有用，你可以试试！！

【讨论】：

【解决方案3】：

请仔细按照开发者的文档，请在 MainActivity 之外定义你的 Greeting 函数和 PreviewGreeting 函数，请这样做

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.Composable
import androidx.compose.unaryPlus
import androidx.ui.core.Text
import androidx.ui.core.dp
import androidx.ui.core.setContent
import androidx.ui.foundation.DrawImage
import androidx.ui.graphics.Color
import androidx.ui.layout.*
import androidx.ui.material.MaterialColors
import androidx.ui.material.MaterialTheme
import androidx.ui.res.imageResource
import androidx.ui.tooling.preview.Preview

class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
        MaterialTheme(
            colors = MaterialColors(
                primary = Color.Black,
                background = Color.Cyan,
                secondary = Color.Magenta
            )
        ) {
            Greeting("Hello World")
        }
    }
}
}

@Composable
fun Greeting(name: String) {
val image = +imageResource(R.drawable.ic_launcher_round)

Column(crossAxisSize = LayoutSize.Expand, modifier = Spacing(16.dp)) {
    Text(name)
    Text(name)
    Text(name)
    HeightSpacer(50.dp)
    Container(expanded = true, height = 100.dp, width = 100.dp) {
        DrawImage(image)
    }

}

}

@Preview
@Composable
fun DefaultPreview() {
val image = +imageResource(R.drawable.ic_launcher_round)

Column(crossAxisSize = LayoutSize.Expand, modifier = Spacing(16.dp)) {
    Text("Android")
    Text("Android")
    Text("Android")
    Text("Hello")
    HeightSpacer(50.dp)
    Container(expanded = true, height = 100.dp, width = 100.dp) {
        DrawImage(image)
    }

}

}

然后在 device/emulator 中运行你的应用一次，然后你可以看到预览运行

【讨论】：

不，我这边也没有显示预览。
一个忠告，如果你正在关注一个喷气背包撰写教程并遇到问题，谷歌代码实验室是最新的，你应该关注codelabs.developers.google.com/codelabs/jetpack-compose-basics

【解决方案4】：

按照这些步骤，为我工作：

文件 -> 无效缓存/重新启动
点击预览屏幕，其中显示“之前需要成功构建...”
使用以下命令构建和刷新：Option + Command + Shift + R（在 Mac 上），我猜 Alt + Ctrl + Shift + R 是 Windows 上的命令

在运行命令之前单击预览屏幕很重要。

【讨论】：

【解决方案5】：

我相信您可能已经修复了它，但仍然会回答，因为还没有接受的答案。

我尝试从Empty Compose Activity 项目模板创建项目。并显示上述错误。

app:build.gradle 文件中有问题。

将compileSdkVersion 'Google Inc.:Google APIs:23' 替换为compileSdkVersion 29

将targetSdkVersion 23 替换为targetSdkVersion 29

清理并构建项目，问题应该得到解决。

【讨论】：

【解决方案6】：

我遇到了同样的问题，缓存无效并重新启动对我有用。

【讨论】：

【解决方案7】：

当你第一次创建你的 compose 项目时，预览不起作用，这有点奇怪，一个非常简单的解决方案就是去 Build -> Rebuild 菜单来重建你的项目，一切都很好:) Image Resource

【讨论】：

【解决方案8】：

在您构建关闭文件然后从左侧的文件树中重新打开它之后，它应该可以工作。我没有预览，所以现在它说 NO preview found add preview by annotation compostables with @Preview

但我认为它对你有用

【讨论】：