Creating a 3 pane Interface in swiftUI using 2 HSplitViews

Question

This is for MacOS. I am trying to make a fairly standard 3 pane interface much like you see in Xcode and other apps where the centre view has priority when resizing the window. The two side views are resizable but should stay the same size when the window is resized. I have the following example which does what I want but there is a weird resizing artefact when I resize the window, but ONLY when I make the window smaller ( actually only when it is made narrower ):

struct ContentView: View {
   var body: some View {
      GeometryReader{geometry in
         HSplitView(){
            Rectangle().foregroundColor(.red).frame(minWidth:200, idealWidth: 200, maxWidth: .infinity)//.layoutPriority(0)
            HSplitView(){
                Rectangle().foregroundColor(.black).frame(minWidth:200, idealWidth: geometry.size.width, maxWidth: .infinity).layoutPriority(1)
                Rectangle().foregroundColor(.green).frame(minWidth:200, idealWidth: 200, maxWidth: .infinity)
            }
         }.frame(width: geometry.size.width, height: geometry.size.height)
      }
   }
}

When making the window narrower, the left side red rectangle seems to take priority over the centre rectangle causing a flicker as the red rectangle flips between two widths. I have tried various things with layoutPriority and a few other things but the problem persists. Any help with this would be much appreciated.

Answer 1

Well, I'll be. After struggling with this on and off for weeks, an hour after I asked the question I have appeared to solve it! Simply set the layoutPriority of the second HSplitView to 1 and the centre view to 1 as well. Makes sense when you think about it:

struct ContentView: View {
   var body: some View {
      GeometryReader{geometry in
         HSplitView(){
            Rectangle().foregroundColor(.red).frame(minWidth:200, idealWidth: 200, maxWidth: .infinity)
            HSplitView(){
                Rectangle().foregroundColor(.black).layoutPriority(1)
                Rectangle().foregroundColor(.green).frame(minWidth:200, idealWidth: 200, maxWidth: .infinity)
            }.layoutPriority(1)
         }.frame(width: geometry.size.width, height: geometry.size.height)
      }
   }
}

So simple. Loving SwiftUI!