I have been doing some older tutorials on the web and noticed how some coders "shrink" the Preview window(s) to only show the exact content in a View. I have managed to workout how to do the same, but they appear to be able to go one step further than me.

It may be an xCode change as they are not necessarily using xCode 15 in the older videos, as I am now, but is it possible in xCode 15 to display multiple Previews of the same View, at the same time on the Canvas, or has it changed to the seperate Previews selected by the buttoms at the top of the Canvas?

Thanks in advance for any thoughts.

@theRansoms seeks preview advice.

is it possible in xCode Xcode 15 to display multiple Previews of the same View?

Suppose you want to validate the proper way to format some key word important to your organisation. Only one way is correct, yet your users often get it wrong!

Here's a struct that offers validation rules, then conveys the information with icons and colors!
Sweet bangers and mash, that's cool!

Can you preview these in the canvas whilst you tweak your design? Let's find out!

// How do you spell Xcode?  Let's find the correct way!
struct FormatCheck: View {
    let term: String  // <-- struct's only parameter

    var isCorrectForm: Bool       { term == "Xcode" } // Xcode is the ONLY correct form
    var decorator:     String     { isCorrectForm ? "checkmark.circle.fill": "wrongwaysign.fill" }
    var fillColor:     Color      { isCorrectForm ? .green : .red.opacity(0.8) }
    var body:          some View  { Label(term, systemImage: decorator).foregroundColor(fillColor).font(.largeTitle) }
}

// Click the >Selectable< option at the bottom of the canvas to see size that fits.
// This will generate four previews, each with convenient lables.
#Preview("Incorrect", traits: .sizeThatFitsLayout) {
    FormatCheck(term: "xCode")
}
#Preview("Also Incorrect", traits: .sizeThatFitsLayout) {
    FormatCheck(term: "XCode")
}
#Preview("Correct!", traits: .sizeThatFitsLayout) {
    FormatCheck(term: "Xcode")
        .padding(.vertical) // <- A variation to try
}
#Preview("Nope. Incorrect", traits: .sizeThatFitsLayout) {
    FormatCheck(term: "xcode")
        .preferredColorScheme(.dark) // <- Another cromulent option
}

Live mode vs Selectable mode

In the canvas preview, you have two options: Live mode and Selectable mode.

By default, the canvas is in Live mode, so your view is presented as if it were on a live device, such as an iPhone 11b++, if that's a thing. But what you might want instead is to be able to click an object in your view, a Label, or an Image, and have that code selected in your source code file.

For that, you'll need to select the Selectable option in the canvas. When Selectable mode is activated, you can observe your view in the canvas using the .sizeThatFitsLayout option. Awesome!

Keep Coding

Please return here and share how you've used .sizeThatFitsLayout to improve your application!