Using HSplitView for a second sidebar

Hey everyone! I'm having some trouble with HSplitView on macOS, and I'm not sure if it's a bug or something I'm doing wrong.

I'm trying to create an app with a [Sidebar | Main Content | Inspector] layout. This is similar to the SF Symbols app, where you can view more information about a selected icon.

The approach I've taken is to have the Main Content and Inspector views be in an HSplitView . Having three views in a NavigationView only seems to use the Mail pattern of [List | List | Detail] , which is not the layout I'm looking for.

The problem I'm seeing is that when I set a maxWidth on the Inspector view and drag the divider to the left, the Main Content view resizes to be smaller than the available space. The parent HSplitView doesn't resize, so I'm not sure if I'm using the wrong modifiers or using them in the wrong places.

I've setup a basic test case on github. If y'all could offer and help or guidance, that would be amazing.

Observed behavior

Expected behavior
Link to expected behavior GIF (limits on new users and media, sorry)

Relevant code

import SwiftUI

struct A: View {
    var body: some View {
        VStack {
            Spacer()
            
            HStack {
                Spacer()
                
                Text("Pane A")
                
                Spacer()
            }
            
            Spacer()
        }
        .frame(
            minWidth: 200,
            maxWidth: .infinity,
            maxHeight: .infinity,
            alignment: .leading
        )
        .background(Color.red)
        .foregroundColor(.black)
        .layoutPriority(1)
    }
}

struct B: View {
    var body: some View {
        VStack {
            Spacer()
            
            HStack {
                Spacer()
                
                Text("Pane B")
                
                Spacer()
            }
            
            Spacer()
        }
        .frame(
            minWidth: 200,
            idealWidth: 250,
            maxWidth: 300,
            maxHeight: .infinity
        )
        .background(Color.purple)
        .foregroundColor(.black)
    }
}

struct ContentView: View {
    var body: some View {
        HSplitView {
            A()
            B()
        }
        .frame(
            minWidth: 0,
            maxWidth: .infinity,
            maxHeight: .infinity
        )
        .background(Color.blue)
    }
}

Thanks!

Terms of Service

Privacy Policy

Cookie Policy