Android Studio 4.0（Canary）中需要成功构建后才能显示预览，否则预览内容无法显示。

Question

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

我已经尝试重新打开Android Studio，但预览只显示一个空白的白屏，里面没有任何内容。当我再次打开时，在预览区域会显示以下消息：

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")
    }
}

我该怎么修复这个问题？

- Harsh Panchal

---

你是在说布局预览，只显示XML，还是尝试运行应用程序并使代码运行？ - Shark

我正在尝试使用注解@Preview在右侧显示内容。 - Harsh Panchal

Answer 1

我曾遇到相同的问题。当我点击"Run with --info"时，我收到的构建错误信息为：

e: 这个版本（1.0.0-alpha13）的Compose编译器需要Kotlin版本1.4.30，但你似乎正在使用不兼容的Kotlin版本1.5.0。请修复你的配置文件（或添加suppressKotlinVersionCompatibilityCheck，但别说我没警告过你！）。

于是我打开了项目级别的build.gradle文件，在更改之前添加了一小段代码（你可以根据你的错误信息自行更改版本）-

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"

to

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

在这之后，我再次对Gradle文件进行了“同步”，并在预览选项卡中执行了“构建和刷新”。希望兼容性问题已经解决，我能够看到实时预览。

这可能不是最佳解决方案，因为它需要降级Kotlin版本，但是它确实为我工作。您可以尝试一下！

- Ayush Khare

---

你能更具体地说明在哪里添加“--info”选项吗？ - David Aleksanyan

Answer 2

试试这个：

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")
}

- hana guo

---

PreviewGreeting() 函数如何调用 MainActivity 类成员方法 Greeting()？这在 Kotlin 的规则下是不可能的。 - Yekta Sarıoğlu

Answer 3

请仔细按照开发者文档操作。请在MainActivity之外定义您的问候函数和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)
        }
    }
}

然后在设备/模拟器上运行您的应用程序一次。然后，您就可以看到预览效果：

- Dharmesh rughani

---

不好意思，我这边还是没有预览。即使使用了这个方法。 - Harsh Panchal

如果你正在跟随Jetpack Compose教程并遇到问题，我有一个建议：Google Codelab是最新的，也是你应该跟随的教程。https://codelabs.developers.google.com/codelabs/jetpack-compose-basics - lasec0203

Answer 4

按照以下步骤操作，对我有用：

1. 文件 -> 清除缓存/重启
2. 单击预览屏幕上的“需要成功构建...”
3. 使用以下命令进行构建和刷新：Option + Command + Shift + R（在Mac上），我想Alt + Ctrl + Shift + R是Windows上的命令

重要提示：在运行命令之前，单击预览屏幕。

- blade

Answer 5

我遇到了同样的问题，清除缓存并重新启动解决了我的问题。

- AnkitSingh

Answer 6

以下是我在错误版本为1.8.10且我已安装1.9.0时的解决方法： 我打开了build.gradle.kts文件， 直接修改了字符串 我将1.9.0改为了1.8.10，这样就解决了问题。

- Javier Castro

Answer 7

我相信你可能已经解决了这个问题，但还是会回答，因为还没有被接受的答案。

我尝试使用Empty Compose Activity项目模板创建项目。它显示了上述错误。

app:build.gradle文件中存在问题。

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

将targetSdkVersion 23替换为targetSdkVersion 29

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

- Vipul

Answer 8

编译完成后，请关闭文件，然后从左侧的文件树中重新打开它。然后它应该可以工作了。我在那里没有预览，所以现在它显示“未找到预览”。通过使用@Preview注释compostables来添加预览。

但我认为这对你会有用。

- SuperCell

---

真的是“可堆肥物”吗？你能否添加文档参考？（但是不要包含“编辑：”，“更新：”或类似内容——答案应该看起来像今天写的。） - Peter Mortensen

Answer 9

当你第一次创建compose项目时，预览功能不起作用可能会让人感到有点奇怪。一个非常简单的解决方案是只需进入“Build”→“Rebuild”菜单重新构建你的项目，一切就都能正常运行 :)

图片资源

- Kamran Ramzan