I have a simple Example of NavigationSplitView
with different types in the Sidebar, including an OutlineGroup
.
Problem: OutlineGroup's parent nodes are selectable, child nodes (leafs) are not. Nodes without children also are not selectable.
Target is macOS. Any Ideas?
struct Tree: Identifiable, Hashable {
let id = UUID()
var name: String
var children: [Tree]? = nil
}
enum SideBar: Hashable {
case number(Int)
case tree(Tree)
}
struct ContentView: View {
let trees = [
Tree(name: "One", children: [Tree(name: "One-1"), Tree(name: "One-2"), Tree(name: "One-3")]),
Tree(name: "Two", children: [Tree(name: "Two-1"), Tree(name: "Two-2"), Tree(name: "Two-3")]),
Tree(name: "Three"),
]
@State private var selection: SideBar?
var body: some View {
NavigationSplitView {
List(selection: $selection) {
Section("Numbers") {
ForEach(1..<6) { number in
NavigationLink("\(number)", value: SideBar.number(number))
}
}
Section("Tree") {
OutlineGroup(trees, children: \.children) { tree in
NavigationLink(tree.name, value: SideBar.tree(tree))
}
}
}
} detail: {
switch selection {
case .number(let nr):
Text("Number \(nr)")
.navigationTitle("Numbers")
case .tree(let tree):
Text("Tree element \(tree.name)")
.navigationTitle("Tree")
case nil:
Text("please choose")
}
}
}
}
EDIT:
Based on @Asperi's comment: This works – but seems not very native.
Section("Tree") {
OutlineGroup(trees, children: \.children) { tree in
NavigationLink(tree.name, value: SideBar.tree(tree))
.onTapGesture {
selection = SideBar.tree(tree)
}
}
}
Does anybody have a more straightforward solution?