1

I'm trying to build UI similar to Maps.app in SwiftUI for macOS. I'm having trouble to apply in-window blending mode for toolbar and sidebar. The code for the app is roughly this:

struct ContentView: View {
    @State private var region = MKCoordinateRegion(...)

    var body: some View {
        NavigationView {
            Sidebar()
            Map(coordinateRegion: $region)
        }
        .navigationTitle("New York, NY")
    }
}

For reference, here's the screenshot from Maps.app. It might be difficult to see but Map component is visible through the translucent toolbar and sidebar:

Maps.app on macOS

With the code above in place, i get the following result (modified from github.com/jordansinger/maps-macos-swiftui-sample). Note that the toolbar is plain white and sidebar uses behind-window blending mode:

Map component with SwiftUI

If i drop NavigationView component and set .ignoresSafeArea() on Map component, i get the toolbar to become translucent but then toolbar takes the full-width of the window, not cutting of at the edge of the sidebar. With the code like this:

struct ContentView: View {
    @State private var region = MKCoordinateRegion(...)

    var body: some View {
        HStack {
            Sidebar()
            Map(coordinateRegion: $region)
                .ignoresSafeArea()
        }
        .navigationTitle("New York, NY")
    }
}

I get the following result. Please note that toolbar is now translucent:

Translucent toolbar without NavigationView

For the specific purposes, there is no need for NavigationView in the app since there is no navigation. I'm using it purely to achieve the correct look for the sidebar and toolbar combination which i've been unable to reproduce without NavigationView.

So, the question is whether it is possible to get NavigationView to use in-window blending mode or replace it altogether (but with the desired look of similar to what we have in Maps.app).

Priit
  • 5,200
  • 2
  • 21
  • 20

0 Answers0