How to create expanding lists

Paul Hudson @twostraws June 24th 2020

Updated for Xcode 12.0

Updated in iOS 14

SwiftUI’s List has an enhanced initializer that lets us create expanding sections with child elements – they will be rendered with tappable arrows that open out to reveal children when tapped.

To use this form of List you need to have data in a precise form: your data model should have an optional array of children that are of the same type, so you can create a tree.

Normally you’re likely to load this kind of stuff from JSON or similar, but to keep things simple I’ll just paste in some hard-coded data so you can see what it ought to look like:

struct Bookmark: Identifiable {
    let id = UUID()
    let name: String
    let icon: String
    var items: [Bookmark]?

    // some example websites
    static let apple = Bookmark(name: "Apple", icon: "1.circle")
    static let bbc = Bookmark(name: "BBC", icon: "square.and.pencil")
    static let swift = Bookmark(name: "Swift", icon: "bolt.fill")
    static let twitter = Bookmark(name: "Twitter", icon: "mic")

    // some example groups
    static let example1 = Bookmark(name: "Favorites", icon: "star", items: [Bookmark.apple, Bookmark.bbc, Bookmark.swift, Bookmark.twitter])
    static let example2 = Bookmark(name: "Recent", icon: "timer", items: [Bookmark.apple, Bookmark.bbc, Bookmark.swift, Bookmark.twitter])
    static let example3 = Bookmark(name: "Recommended", icon: "hand.thumbsup", items: [Bookmark.apple, Bookmark.bbc, Bookmark.swift, Bookmark.twitter])
}

That’s just placeholder data so I’ve repeated the same bookmarks several times, but hopefully you get the point.

Once you have your data in place, you can load it into a list by passing in your array of data plus a keypath to where the children are, which in our case would be \.items. You’ll then get a regular closure where you can provide your row data, just like normal.

So, you can try it out like this:

struct ContentView: View {
    let items: [Bookmark] = [.example1, .example2, .example3]

    var body: some View {
        List(items, children: \.items) { row in
            Image(systemName: row.icon)
            Text(row.name)
        }
    }
}

When that runs you’ll see three rows for our groups, plus disclosure indicators that fold out to reveal their children.