1

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
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!

2

Hey @vegemike, I'm having the same issue.

Please, let me know if you have found a solution for this issue with the HSplitView. The ideal is to found a way to create a "Second Sidebar" similar to Xcode Inspector.

Thanks in advance