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:
And here is what happens with the top level is displayed:
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?
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())



