Adding headers to OutlineGroup / DisclosureGroup - ios

Question

I'm using SwiftUI 2.0, and I need a way to add a header to an OutlineGroup or DisclosureGroup, similar to headers in List sections. Is there a way to do this?

Answer 1

You can use separate Sections to create the headers (and, optionally, footers).
import SwiftUI
struct Node : Identifiable {
let id = UUID()
let name: String
let children: [Node]?
}
struct SectionedOutlineView: View {
var body: some View {
List(selection: $selection) {
Section(header: Label("Nodes 1", systemImage: "sparkle")) {
OutlineGroup(nodes1, children: \.children) { node in
Label(node.name, systemImage: "shield")
}
}
Section(header: Label("Nodes 2", systemImage: "rosette")) {
OutlineGroup(nodes2, children: \.children) { node in
Label(node.name, systemImage: "folder")
}
}
}
.listStyle(SidebarListStyle())
}
#State var nodes1 = [
Node(name: "Layer 1", children: [
Node(name: "Layer 1-1", children: [
Node(name: "Layer 1-1-1", children: nil),
Node(name: "Layer 1-1-2", children: nil),
]),
Node(name: "Layer 1-2", children: [
Node(name: "Layer 1-2-1", children: nil),
Node(name: "Layer 1-2-2", children: nil),
Node(name: "Layer 1-2-3", children: nil),
]),
Node(name: "Layer 1-3", children: nil),
]),
Node(name: "Layer 2", children: [
Node(name: "Layer 2-1", children: [
]),
Node(name: "Layer 2-2", children: [
]),
Node(name: "Layer 2-3", children: [
]),
])
]
#State var nodes2 = [
Node(name: "Layer 1", children: [
Node(name: "Layer 1-1", children: [
Node(name: "Layer 1-1-1", children: nil),
Node(name: "Layer 1-1-2", children: nil),
]),
Node(name: "Layer 1-2", children: [
Node(name: "Layer 1-2-1", children: nil),
Node(name: "Layer 1-2-2", children: nil),
Node(name: "Layer 1-2-3", children: nil),
]),
Node(name: "Layer 1-3", children: [
]),
]),
Node(name: "Layer 2", children: [
Node(name: "Layer 2-1", children: [
]),
Node(name: "Layer 2-2", children: [
Node(name: "Layer 2-2-1", children: nil),
Node(name: "Layer 2-2-2", children: nil),
Node(name: "Layer 2-2-3", children: nil),
]),
Node(name: "Layer 2-3", children: [
]),
])
]
#State var selection = Set<Node.ID>()
}

Answer 2

import SwiftUI
struct NodeOutlineGroup<Node>: View where Node: Hashable, Node: Identifiable, Node: CustomStringConvertible{
let node: Node
let childKeyPath: KeyPath<Node, [Node]?>
let headerKeyPath: KeyPath<Node, String?>?
#State var isExpanded: Bool = true
var body: some View {
if node[keyPath: childKeyPath] != nil {
DisclosureGroup(
isExpanded: $isExpanded,
content: {
if isExpanded {
ForEach(node[keyPath: childKeyPath]!) { childNode in
NodeOutlineGroup(node: childNode,
childKeyPath: childKeyPath,
headerKeyPath: headerKeyPath,
isExpanded: isExpanded)
}
}
},
label: {
section
})
} else {
section
}
}
var section: some View {
VStack(alignment: .leading) {
if let kp = headerKeyPath, let header = node[keyPath: kp] {
Section(header:
HStack {
Text(header)
Spacer()
}
.background(Color.secondary.opacity(0.3))
) {
Text(node.description)
}
} else {
Text(node.description)
}
}
}
}
struct ContentView: View {
var body: some View {
List {
NodeOutlineGroup(node: data, childKeyPath: \.children, headerKeyPath: \.header, isExpanded: true)
}
.listStyle(InsetGroupedListStyle())
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
// Sample data
struct FileItem: Hashable, Identifiable, CustomStringConvertible {
var id: Self { self }
var name: String
var header: String?
var children: [FileItem]? = nil
var description: String {
switch children {
case nil:
return "📄 \(name)"
case .some(let children):
return children.isEmpty ? "📂 \(name)" : "📁 \(name)"
}
}
}
let data =
FileItem(name: "users", children:
[FileItem(name: "user1234", children:
[FileItem(name: "Photos", header: "Header 1", children:
[FileItem(name: "photo001.jpg", header: "Header 2"),
FileItem(name: "photo002.jpg")]),
FileItem(name: "Movies", children:
[FileItem(name: "movie001.mp4")]),
FileItem(name: "Documents", children: [])
]),
FileItem(name: "newuser", children:
[FileItem(name: "Documents", children: [])
])
])