SwiftUI inspector full height

Adding an inspector and toolbar to Xcode's app template, I have:

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundStyle(.tint)
            Text("Hello, world!")
        }
        .padding()
        .toolbar {
            Text("test")
        }
        .inspector(isPresented: .constant(true)) {
            Text("this is a test")
        }
    }
}

In the preview canvas, this renders as I would expect:

However when running the app:

Am I missing something?

(Relevant wwdc video is wwdc2023-10161. I couldn't add that as a tag)

Replies

It appears the preview titlebar rendering may be incorrect / buggy.

As a test, I put a rectangle in the inspector and it is consistent with the runtime behavior of filling only the under-titlebar area.

It just seems like the preview is incorrectly rendering the titlebar as full-height, but the preview is not actually a full-height inspector.

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundStyle(.tint)
            Text("Hello, world!")
        }
        .padding()
        .toolbar {
            Text("test")
        }
        .inspector(isPresented: .constant(true)) {
            Rectangle().fill(.red)
        }
    }
}

Preview:

Runtime:

I believe you need to place the inspector modifier outside of a navigation structure (NavigationStack or NavigationSplitView), which I think was mentioned in the session video. Although you wouldn't necessarily use one for macOS, it's probably needed to have the full-height behaviour.

This works for me:

struct ContentView: View {
    var body: some View {
        NavigationStack {
            VStack {
                Image(systemName: "globe")
                    .imageScale(.large)
                    .foregroundStyle(.tint)
                Text("Hello, world!")
            }
            .padding()
            .toolbar {
                Text("test")
            }
        }
        .inspector(isPresented: .constant(true)) {
            Text("this is a test")
        }
    }
}