将标题添加到OutlineGroup / DisclosureGroup

Question

我正在使用SwiftUI 2.0，并且需要一种将标题添加到OutlineGroup或DisclosureGroup的方法，类似于List部分中的标题。有办法吗？

Answer 1

您可以使用单独的Section来创建页眉（以及可选的页脚）。

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>()
}