How to preview multiple views in the same canvas SwiftUI

ScottyBlades 0
Viewed 16

enter image description here

struct CardDetailView_Previews: PreviewProvider {
    static var previews: some View {
        CardDetailView(viewModel: .init(labelLabelViewModel: LabelLabel.ViewModel(topText: "hello", bottomText: .lorem)))
            .previewDevice("iPhone 14 Pro Max")
        CardDetailView(viewModel: .init(labelLabelViewModel: LabelLabel.ViewModel(topText: "hello", bottomText: .lorem)))
            .previewInterfaceOrientation(.landscapeLeft)
            .previewDevice("iPhone 14 Pro Max")
        CardDetailView(viewModel: .init(labelLabelViewModel: LabelLabel.ViewModel(topText: "hello", bottomText: .lorem)))
            .previewInterfaceOrientation(.portrait)
            .previewDevice("iPhone SE (3rd generation)")
        CardDetailView(viewModel: .init(labelLabelViewModel: LabelLabel.ViewModel(topText: "hello", bottomText: .lorem)))
            .previewInterfaceOrientation(.landscapeLeft)
            .previewDevice("iPhone SE (3rd generation)")
        
    }
}

I specified multiple versions to display. All returned to the same preview property. However, the canvas is only showing one preview view at a time. I want to see all four at the same time. Like I see on other dev's views.

enter image description here

swiftui
1 Answers

The ability to show multiple independent previews in a single canvas was removed in Xcode 14. Apple engineers answered this explicitly in the official WWDC 2022 Slack. One response:

We’ve been getting some questions regarding the new previews experience where each preview is given its own tab, and folks are wondering if there is a way to instead have multiple previews in the same tab.

Each view in the PreviewProvider now shows in its own tab. If the individual views are differently configured rows for a list or can be combined in a VStack then a single preview could be used for seeing the different configurations. We’d love feedback if you have a unique case that you don’t think is covered by the current solutions!

Another response:

Each view in the PreviewProvider now shows in its own tab, and there are two ways to see multiple configurations in one tab.

First, you can see multiple previews in the same tab for variations in device settings by using the new variants mode, accessible from the bottom bar of the canvas.

Second, for multiple previews of the same view but with different inputs, you can make a single preview of a List or VStack that contains those different configurations. This is particularly helpful with rows of a List as the List will also show those views with the correct list styling and metrics.

You can use the Variants menu (at the bottom of the canvas) to show multiple variations of a single preview:

the canvas variants menu

But beyond that, each view in a PreviewProvider gets its own canvas tab.

rob mayoff0
Related