Technologies›SwiftUI

OutlineSubgroupChildren struct

iOSmacOStvOSwatchOSvisionOS✓ renders

A type-erased view representing the children in an outline subgroup.

How it works

OutlineSubgroupChildren is the opaque view type that an OutlineGroup produces to represent the disclosed children of a single tree node. When you build a hierarchical OutlineGroup, SwiftUI walks each element's child collection and wraps the recursively generated rows for one subgroup in a value of this type, so the disclosure machinery has a concrete, identifiable view to show and hide. You rarely name OutlineSubgroupChildren directly; instead you encounter it as the return type that lets an OutlineGroup nest itself to arbitrary depth, and you reach for an understanding of it when you need to reason about how a node's descendants are assembled and revealed.

  1. Supply a recursive data model

    OutlineSubgroupChildren only has meaning when your data is itself a tree, so each element must expose an optional collection of the same type. Here Node is Identifiable and carries var children: [Node]? = nil, where a nil value marks a leaf and a non-nil array marks a parent whose subgroup children can be generated.

  2. Build the hierarchy with OutlineGroup and a children key path

    Passing a root collection and a children: key path to OutlineGroup is what drives the recursion that yields each OutlineSubgroupChildren. In OutlineGroup(tree, children: \.children), SwiftUI follows \.children from every node to discover its descendants and emit the disclosed subgroup for that branch.

  3. Render each node through the row closure

    The trailing closure produces the view for a single element, and OutlineGroup reuses it for every level as it forms each subgroup's children. The closure here returns Label(node.name, systemImage: node.children == nil ? "doc" : "folder"), so a node's children being nil chooses the leaf icon while a parent shows a folder.

  4. Host the outline in a disclosing container

    OutlineGroup expects a container that knows how to present and toggle disclosure, which is where the generated OutlineSubgroupChildren are actually shown or collapsed. Wrapping the group in a List gives each parent a disclosure triangle and animates its subgroup's children in and out as the user expands Documents or Reports.

Try it — Change Node(name: "Notes.txt") to Node(name: "Notes.txt", children: []) and watch it gain a disclosure triangle with an empty subgroup, showing that an OutlineSubgroupChildren is generated for any non-nil children array, even an empty one.

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.

OutlineSubgroupChildren.swift
struct OutlineSubgroupChildrenDemo: View {
    struct Node: Identifiable {
        let id = UUID()
        let name: String
        var children: [Node]? = nil
    }

    let tree: [Node] = [
        Node(name: "Documents", children: [
            Node(name: "Reports", children: [
                Node(name: "Q1.pdf"),
                Node(name: "Q2.pdf")
            ]),
            Node(name: "Notes.txt")
        ]),
        Node(name: "Pictures", children: [
            Node(name: "Trip.jpg")
        ])
    ]

    var body: some View {
        List {
            OutlineGroup(tree, children: \.children) { node in
                Label(node.name, systemImage: node.children == nil ? "doc" : "folder")
            }
        }
        .padding()
    }
}
Live preview
swift → lexer → parser → sema → uiir → canvas Open in Studio ↗
What's new in SwiftUI 27 →