Vision Pro preview window looks different than on simulator

Hi @klinee101

The reason you see this behavior is because the preview is a preview of the view not of the app. The view itself doesn't have rounded edges (unless you do that manually), but the app will due to the way apps look on the system. To show this, do something like this:

struct ContentView: View {
    var body: some View {
        Rectangle().fill(.black)
            .padding()
    }
}

#Preview(windowStyle: .automatic) {
    ContentView()
}

You'll see that the padding makes the black rectangle smaller and you can now see the curved-edge glass background effect behind the view.

If you'd expect different behavior, please file a feedback report at https://feedbackassistant.apple.com with what you'd expect and why, because that information is always incredibly helpful to provide & can help inform the future of the platform! Paste that number here if you do so.

Thanks,

Sydney

Thank you Sydney. That makes sense.

Since the text is getting cut off in the simulator and there is no safe area insets for a window, is there a way to calculate the correct padding so the text isn't cut off? Rather than just using some hard-coded values for the padding.

No problem! At least for here, I would just use .padding() on the text and it should not be cut off. Let me know if that doesn't work.

It does work and doesn't look too bad. But if we wanted to add some custom padding to make it look exactly how we wish it wouldn't be possible because we don't know how a user would use our views and that could change how this bottom bar looks. We work on a native Swift SDK to add some context. So the user could use our view in a 2D window, 3D window, in a 2D window but as a subview, etc. And we don't have a way of knowing how to adjust our padding because there is no concept of safe area.

I'm not sure if this is deliberate or not but if you have any context on that it would be great.

Thank you again for the quick responses :)

Here is what the bottom bar looks like in different contexts:

2D Window:

3D Window:

2D window but with another view

Since we don't have safe area, like you mention, generally the best practice is actually to use an Ornament (ornament init) for something like a bottom bar. You can also use .toolbar with the .ornament placement. This way, the bar is not shown in the view, but instead as an ornament to the view and won't be clipped like that. Otherwise, you'd need to set enough padding to make sure that no matter the case, it's visible, which is not ideal, I agree.

I'll give the ornament a shot. I didn't even consider that in the beginning because it seems like they are more meant for interactions with the view while this bar is simply meant to display copyright information about the data that is being presented. While the bar can be interacted with, that isn't its main goal. But hey I can give it a shot and let you know if I have more questions.

Thank you for your help.