How to show and hide the window bar in visionOS

Joseph Simpson Updated on

We can use `persistentSystemOverlays(_:)` to control the visibility of window controls.

.persistentSystemOverlays(.automatic) // default
.persistentSystemOverlays(.hidden)
.persistentSystemOverlays(.visible)

In this example, we can tap on three button to change between automatic, hidden, and visible.

Video demo showing persistentSystemOverlays affecting a visionOS window bar.

This can be particularly useful when our app needs to display media or interactive content.

Full example code:

struct Example029: View {

    @State var vis: Visibility = .automatic

    var body: some View {
        HStack(spacing: 24) {
            Button(action: {
                vis = .automatic
            }, label: {
                Image(systemName: vis == .automatic ? "circle.fill" : "circle")
                Text("automatic")
            })

            Button(action: {
                vis = .hidden
            }, label: {
                Image(systemName: vis == .hidden ? "circle.fill" : "circle")
                Text("hidden")
            })

            Button(action: {
                vis = .visible
            }, label: {
                Image(systemName: vis == .visible ? "circle.fill" : "circle")
                Text("visible")
            })
        }
        .persistentSystemOverlays(vis)
    }
}

Support our work so we can continue to bring you new examples and articles.

Support our Work

Follow Step Into Vision

Questions or feedback?