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:
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:
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:
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).