How it works
OutlineGroup generates a tree of disclosable rows from a collection of hierarchical data, walking each element's child collection recursively so you don't have to manage expansion state or nesting by hand. Reach for it whenever your data forms a tree — a file system, an organizational chart, a nested outline — and you want each branch to expand and collapse in place. Because it produces views rather than its own container, you place an OutlineGroup inside a List (or any view that lays out a sequence) and it contributes one row per node, complete with the disclosure triangles that drive the hierarchy.
Conform the node type to Identifiable
OutlineGroup needs a stable identity for every node so it can track which branches are expanded across updates. The simplest path is to conform your data type to Identifiable; in the example,
Itemdoes so with alet id = UUID(), which lets you pass the collection directly without supplying a separate id key path.Construct it with the data and a children key path
The core initializer takes the root collection and a
childrenkey path that points to each node's optional array of sub-nodes. HereOutlineGroup(items, children: \.children)hands the group the top-levelitemsand tells it to descend through\.children; a node whosechildrenisnilis treated as a leaf and shown without a disclosure triangle.Supply the row content closure
The trailing closure receives one node at a time and returns the view for that row — OutlineGroup calls it for every node at every depth. In the example the closure builds
Label(item.name, systemImage:), so each folder and file renders the same way regardless of how deeply it's nested.Distinguish branches from leaves
Inside the row closure you can inspect the node to vary its appearance, since the same view describes both branches and leaves. The example checks
item.children == nilto choose between a"doc"and a"folder"symbol, giving files and directories distinct icons.Place it inside a List
OutlineGroup emits rows rather than hosting them, so it belongs inside a container that arranges a sequence. Embedding it in the
Listhere turns those rows into a scrollable, selectable outline where tapping a disclosure triangle expands or collapses that node's subtree.
Item(name: "Trip.jpg") to Item(name: "Trip.jpg", children: [Item(name: "Caption.txt")]) — and watch OutlineGroup grow a new disclosure triangle and nested row for it automatically.Example & preview
Press Run live & edit to compile it in your browser — then edit the Swift on the left and the preview re-renders live.
struct OutlineGroupDemo: View {
struct Item: Identifiable {
let id = UUID()
let name: String
var children: [Item]? = nil
}
let items: [Item] = [
Item(name: "Documents", children: [
Item(name: "Report.pdf"),
Item(name: "Photos", children: [
Item(name: "Trip.jpg"),
Item(name: "Family.jpg")
])
]),
Item(name: "Music", children: [
Item(name: "Song.mp3")
])
]
var body: some View {
List {
OutlineGroup(items, children: \.children) { item in
Label(item.name, systemImage: item.children == nil ? "doc" : "folder")
}
}
.padding()
}
}