Tips for making good use of Canvas in Xcode

Article content

With Xcode 12, you can use Canvas's capabilities to see what your device screen looks like in real time as you code.

In this article, I'll give you some tips on how to use the useful Canvas even better. If there are good tips, I will add them as needed.

Table of contents

-To display a View with the @EnvironmentObject property -To display a View with @Binding property --To display only the View for the component

To display a View with the @EnvironmentObject property

If you have created an instance of that class in a View with the @EnvironmentObject property wrapper so that other views always see the value of the property with @Published in the ObservableObject class, the preview for that View is: You need to add the .environmentObject (ClassName ()) modifier to the View instance like this. If this is not attached, clicking the Resume button will not be displayed on the Canvas and an error will occur.

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .environmentObject(Manager())
    }
}

To display a View with the @Binding property

For structs that have a property with the @Binding property wrapper, that property is only specified as a data type and no value is assigned. For example:

@Binding var name: String

When you want to display a preview of a structure with such properties on Canvas, an error will occur even if you enter an appropriate argument at the time of initialization. In such a case, if you specify .constant () as an argument, it will be displayed well as shown below. This is any binding in the View that you can use if you want to put some value in it. The preview code looks like this:

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView(name: .constant("Masanao Sako"))
    }
}

See also Paul Hudson's Hacking with Swift. https://www.hackingwithswift.com/quick-start/swiftui/how-to-create-constant-bindings

To display only the View for the component

If you are creating a View (screen part) for a component to be placed in the main View, and you want to display only the View for that component in just size rather than displaying the View for that component alone on a Canvas that is the size of the device screen. Is just the size of the View with the .previewLayout (.sizeThatFits) modifier as shown below.

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .environmentObject(Manager())
            .previewLayout(.sizeThatFits)
    }
}

Recommended Posts

Tips for making good use of Canvas in Xcode
Tips for making APIs generic
Tips for handling enums in thymeleaf
Tips for handling pseudo-elements in Selenium
List of point cuts for making finer point cuts
Tips for gRPC error handling in Ruby
The story of making ordinary Othello in Java
[Java] Use of final in local variable declaration
Criteria for proper use of render and redirect_to
How to use JQuery in js.erb of Rails6
Use pagy for pagination in your Rails app.
Why use setters/getters instead of public/private in Java
Tips for generating files for eclipse projects in Gradle