Customizing the macOS toolbar with Swift UI

Viewed 604

I'm working on a macOS app, with the view layers written in SwiftUI. I know that iOS toolbars can have the background color changed at least, but when I try to do this in macOS, it doesn't behave as I'd expect.

Here's a (simplified) example:

struct ContentView: View {
    var body: some View {
        NavigationView {
            Collections()
                .layoutPriority(0)
            
            Photos()
                    .frame(maxWidth: .infinity, minHeight: 300, maxHeight: .infinity)
                    .background(Color.Alt.black)
                    .layoutPriority(1)
        }
        .toolbar {
            Toolbar().background(Color.red500)
        }
    }
}

struct Toolbar: View {
    var body: some View {
        Group {
            Slider(value: 250, in: 150...400) {
                Text("Toolbar.PreviewSize")
            } minimumValueLabel: {
                Image(systemName: "photo").resizable().scaledToFit().frame(width: 15)
            } maximumValueLabel: {
                Image(systemName: "photo").resizable().scaledToFit().frame(width: 23)
            } onEditingChanged: { _ in
                // do nothing
            }.frame(minWidth: 200)
                
            Spacer()
                    
            Text("Toolbar.SelectionCount")
                    
            Spacer()
                    
            AddPhotosButton()
        }
    }
}

Which produces something like this, which as you can see, doesn't apply the background color to the entire toolbar, just to the items in the toolbar:

Toolbar with red background on the toolbar items, but not the entire toolbar

I'm guessing I could make my own WindowToolbarStyle style, but there's no documentation on the protocol!

If I make my own toolbar as a View rather than with the .toolbar modifier, I can't read the safe area insets for the window traffic buttons when the sidebar is collapsed, resulting in a complete mess:

custom toolbar that works well when the sidebar is open custom toolbar that doesn't work when the sidebar is closed

Thanks for any help!

0 Answers
Related