用于 SwiftUI 预览的 Xcode Canvas 未显示

Question

I´m trying to get the new Canvas feature from Xcode 11 running, but the Canvas won´t show up. What am I doing wrong?

This new Xcode feature should show a live preview of my SwiftUI views without running the app.

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

I just created a new default project (single view app), compiled it and activated 'Editor > Editor and Canvas'. I can navigate to each file in the project, nothing shows up.

What else does need to be done?

Answer 1

You need to be on Catalina macOS version (10.15), as stated in official tutorial

Be warned: Catalina doesn't support 32-bit applications, some old apps will stop working after update.

Answer 2

you can still see the live view (without Catalina installed ) with the playgrounds. using 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 3

To further add to the other answer, as per the official tutorial from Apple :

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

Unfortunate that I can't run it right now since the beta was just released and I don't have a spare Mac!

Answer 4

Update Mac OS version 10.15 or upper version. Update Xcode 11 or upper version. After that click Editor > Canvas for code preview.

Bonus: If you would like to see code preview left side, you can change layout from Menu Icon > Layout > Canvas Right. (I shared screenshot)

Answer 5

The preview only works on MacOS 10.15 Beta

You need to tap on Editor and Canvas Option in Xcode 11.0-Beta, alternatively you can tap on Editor -> Editor and Canvas from top options

Attached screenshots for refrence.

Answer 6

Copy the content of the swift file,

---

Move the file to the trash

---

Create the swift file again

---

Paste and run your code

---

---

---

Answer 7

I tried all these steps, but then realized I did not have my PreviewProvider set up in my file. Without this, the preview won't show up.

Make sure you have it set up like this:

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

Then you can follow the advice of the other answers in this thread and your canvas window should pop right up.

Answer 8

If you move swiftUI file to a new folder the canvas will not appear and the best solution is to copy all code in the file then remove the file in trash then create a new file and past your code

Steps:

1. copy file code

2. delete the file

3. create a new file by the same name

4. past the code to the new file

Answer 9

This could be the effect if you upgraded Xcode to a higher beta version and got the following error message during the process:

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.

The solution seems to be to upgrade the Catalina beta version to the same level. Here's the link to Apple's Beta Software Downloads .

Answer 10

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

Answer 11

Also, make sure this function is called in your SwiftUI file (outside of the actual View struct).

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

Answer 12

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

Tools for SwiftUI development are only available when running on macOS 10.15 beta.

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

Answer 13

As well as running MacOS Catalina [beta] it seems that you need to have the command line tools installed otherwise it fails and 'pauses' the canvas (this happened with Xcode 11 Beta 2). To install them run:

xcode-select --install

Answer 14

Canvas preview only works after update MacOS 10.14 to 10.15

We have Mac OS Catalina Beta version (10.15)

Upgrade your system and it works. :)

Check this link .

Answer 15

Some important checklist , please check one by one. If all this is done , you can easily get "Editor and Canvas" option.

1. Your MacOS version is equal or upper than 10.15

2. You are using at least Xcode 11 Beta or later. If you have Xcode 11 but your MacOS is bellow 10.15 , you won't be able to see the option.

3. Run the commands from Terminal :

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

and then

sudo xcodebuild -license

4. If check list 1 and 2 is done , go to to the Preferences option and select command Line Tools. Preferences -> Locations and assigning the Command Line Tools to Xcode 11/Beta.

Most of the time, option 4 is the problem.

Answer 16

Frustrated with what Xcode offers for SwiftUI canvas (and how it does not communicate to you that you need to upgrade to Catalina to have this feature available), I decided to create my own tool: QDesigner . It is an iPad app where you can simply drag & drop SwiftUI controls on iPhone canvas, customize them with a few taps and generate SwiftUI code with a single tap. No Xcode required .

First Beta of QDesigner is available via TestFlight:
https://testflight.apple.com/join/aSXW5tVp

There is also a companion QDesigner Client app for iPhone, that can be connected with QDesigner running on iPad, to see your UI design on a target device, updated in real-time:
https://testflight.apple.com/join/DQv0DBJU

I hope it'll be helpful for at least some of you! Let me know what you think, there is of course a ton of work ahead to make it fully functional, but the first beta is already beneficial for basic SwiftUI usage.

See demo videos of QDesigner and learn more by visiting website:
https://Q-Mobile.IT/Q-Designer

Answer 17

For people who wanted to move preview it to the right side... Change Layout (right corner of workspace second last option) to "Canvas on Right"

Answer 18

ran into the same problem, everything was up to date. Got it to work by turning off code coverage for all targets:)

Answer 19

Go to editor on Xcode, and under it click Editor & Canvas.