Xcode Canvas SwiftUI 预览未显示

Question

我正在尝试从 Xcode 11 运行获取新的 Canvas 功能，但 Canvas 不会显示。我做错了什么？

这项新的 Xcode 功能应该可以在没有运行应用程序的情况下显示我的 SwiftUI 视图的实时预览。

When you create a custom View with SwiftUI, Xcode can display a preview of the view’s content that stays up to date as you make changes to the view’s code. You define a structure that conforms to the PreviewProvider protocol to tell Xcode what to display. Xcode shows the preview in a canvas beside your code.

https://developer.apple.com/documentation/swiftui/previews-in-xcode

我刚刚创建了一个新的默认项目（单视图应用程序），编译并激活了它 'Editor > Editor and Canvas'。我可以导航到项目中的每个文件，但没有任何显示。

还需要做什么？

Answer 1

您需要使用 Catalina macOS 版本 (10.15)，如 official tutorial

中所述

注意：Catalina 不支持 32 位应用程序，部分旧应用程序将在更新后停止运行。

Answer 2

根据official tutorial from Apple进一步添加到其他答案：

To preview and interact with views from the canvas in Xcode, ensure your Mac is running macOS 10.15 beta.

很遗憾，我现在不能运行因为测试版刚刚发布而且我没有备用 Mac！

Answer 3

您仍然可以看到游乐场的实时视图（未安装 Catalina）。使用 UIHostingController.

import UIKit
import SwiftUI
import PlaygroundSupport



struct ContentView : View {
    var body: some View {

        Text("Hello World")
            .foregroundColor(Color.blue)
    }
}

// Present the view controller in the Live View window
PlaygroundPage.current.liveView = UIHostingController.init(rootView: ContentView())

Answer 4

预览仅适用于 MacOS 10.15 Beta

您需要在 Xcode 11.0-Beta 中点击编辑器和 Canvas 选项，或者您可以点击编辑器 -> 编辑器和顶部选项中的 Canvas

附上截图以供参考。

Answer 5

要预览 Xcode 中来自 canvas 的视图并与之互动，请确保您的 Mac 是运行 MacOS 10.15 测试版.

SwiftUI 开发工具仅在运行 on macOS 10.15 beta 上可用。

https://developer.apple.com/tutorials/swiftui/creating-and-combining-views

Answer 6

与运行ning MacOS Catalina [测试版] 一样，您似乎需要安装 命令行工具 否则它会失败并且 'pauses' canvas（这发生在 Xcode 11 Beta 2 中）。安装它们运行:

xcode-select --install

Answer 7

如果您将 Xcode 升级到更高的 Beta 版本并在此过程中收到以下错误消息，则可能会出现这种情况：

Loading a plug-in failed

The plug-in “com.apple.dt.UVKit” at path “/Applications/Xcode-beta.appDownloads/Xcode-beta.app/Contents/PlugIns/UVKit.framework” could not be loaded. The plug-in or one of its prerequisite plug-ins may be missing or damaged. The plug-in or one of its prerequisite plug-ins may be missing or damaged and may need to be reinstalled.

解决办法好像是把Catalina beta版本升级到同级别。这是 Apple 的 Beta Software Downloads.

的 link

Answer 8

您必须至少安装 macOS 版本（10.15 或更高版本）

Answer 9

Canvas 预览仅在更新后有效 MacOS 10.14 到 10.15

我们有 Mac OS Catalina Beta 版本 (10.15)

升级你的系统，它就可以工作了。 :)

Check this link。

Answer 10

一些重要的检查清单，请一一检查。如果完成所有这些，您可以轻松获得 "Editor and Canvas" 选项。

您的 MacOS 版本等于或高于 10.15
您至少使用 Xcode 11 Beta 或更高版本。如果您有 Xcode 11 但您的 MacOS 低于 10.15 ，您将看不到该选项。
运行来自终端的命令：

sudo xcode-select -s /Applications/Xcode.app/Contents/Developer

然后是

sudo xcodebuild -license

如果检查清单 1 和 2 已完成，请转至首选项选项和 select 命令行工具。首选项 -> 位置并将命令行工具分配给 Xcode 11/Beta.

大多数时候，选项 4 是问题所在。

Answer 11

更新MacOS版本10.15或更高版本。更新 Xcode 11 或更高版本。之后单击编辑器 > Canvas 进行代码预览。

奖励：如果您想在左侧查看代码预览，可以从菜单图标 > 布局 > Canvas 右侧更改布局。（我分享了截图）

Answer 12

复制 swift 文件的内容
将文件移至回收站
再次创建 swift 文件
粘贴并运行您的代码

Answer 13

对 Xcode 为 SwiftUI canvas 提供的功能感到沮丧（以及它如何 无法与您沟通 您需要升级到Catalina 提供此功能），我决定创建自己的工具：QDesigner。这是一个 iPad 应用程序，您只需将 SwiftUI 控件拖放到 iPhone canvas 上，轻点几下即可自定义它们，并生成 SwiftUI 代码单击。 不需要Xcode。

QDesigner 的第一个 Beta 可通过 TestFlight 获取：
https://testflight.apple.com/join/aSXW5tVp

还有一个 iPhone 的配套 QDesigner Client 应用程序，可以与 iPad 上的 QDesigner 运行连接，以查看您的 UI 目标设备上的设计，实时更新：
https://testflight.apple.com/join/DQv0DBJU

我希望它至少对你们中的一些人有所帮助！让我知道您的想法，当然还有大量的工作要做才能使其功能齐全，但第一个测试版已经对基本 SwiftUI 用法有益。

观看 QDesigner 的演示视频并访问网站了解更多信息：
https://Q-Mobile.IT/Q-Designer

Answer 14

此外，请确保在您的 SwiftUI 文件中调用了此函数（在实际 View 结构之外）。

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView() // Initialize your struct
    }
}

Answer 15

如果您将 swiftUI 文件移动到新文件夹，canvas 将不会出现，最好的解决方案是复制文件中的所有代码，然后删除垃圾箱中的文件，然后创建一个新文件并粘贴您的代码

步骤：

复制文件代码
删除文件
创建同名的新文件
将代码粘贴到新文件

Answer 16

我尝试了所有这些步骤，但后来意识到我没有在我的文件中设置 PreviewProvider。没有这个，预览将不会显示。

确保你的设置是这样的：

struct YourView_Previews: PreviewProvider {
    static var previews: some View {
        YourView()
    }
}

然后您可以按照此线程中其他答案的建议，您的 canvas window 应该会立即弹出。

Answer 17

对于想要将其预览移到右侧的人...将布局（工作区右上角倒数第二个选项）更改为“Canvas 在右侧”

Xcode Canvas SwiftUI 预览未显示

Xcode Canvas for SwiftUI previews does not show up

xcode

ios

swift

swiftui

xcode11