NavigationSplitView seems to draw where it should not

37 views Asked by At

I have an application where I need to have a pane on the left of an iPad always visible. To the right of it I would like to have a NavigationSplitView. I'm new to NavigationSplitView, so this is experimental. It kinda works, but then the top level list is displayed, the List overwrites the left pane, even though it allocates the space correctly. Here's the code:

struct TryNavigation: View {
  private var firstColumnData: [Data1] = [ Data1(value: 1), Data1(value: 2), Data1(value: 4) ]
  @State private var firstColumnSelection: Data1.ID?
  @State private var secondColumnSelection: Data1.ID?

  func secondColumnData(_ id: Data1.ID?) -> [Data1]? {
    if id == nil { return nil }
    if let data = firstColumnData.first(where: { $0.id == id }) {
      return [Data1(value: data.value * 2), Data1(value: data.value * 4), Data1(value: data.value * 8) ]
    } else { return [] }
  }
  
  var body: some View {
    
    HStack {
      Text("Left Pane").font(.title)
      
      NavigationSplitView {
        List(selection: $firstColumnSelection) {
          ForEach(firstColumnData, id: \.id) { item in
            Text(String(item.value))
          }
        }
      } detail: {
        if let data = secondColumnData(firstColumnSelection) {
          List(selection: $secondColumnSelection) {
            ForEach(data) { item in
              Text(String(item.value))
            }
          }
        } else { Text("nothing selected")}
      }
      
    }
  }
}

Here's what happens when the top level list is not displayed:

enter image description here

And here is what happens with the top level is displayed:

enter image description here

What is going on here? Understanding it will help me understand SwiftUI better. Is this something that cannot be properly accomplished?

EDIT: If I add a border around the NavigationSplitView, I can see that it is clearly "drawing beyond its borders". Does that lead to a workaround?

enter image description here

EDIT (again):

The following workaround seem to work, but I'd still like to understand why this is happening. If I add this to the NavigationSplitView, it prevents it from "misbehaving":

.clipShape(Rectangle())

enter image description here

0

There are 0 answers