How to create expanding lists

Paul Hudson @twostraws July 19th 2021

Updated for Xcode 13.0

New in iOS 14

SwiftUI’s List view 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 here I’ll just paste in some hard-coded data so you can see what it ought to look like.

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 will be \.items. You’ll then get a regular closure where you can provide your row data, just like normal.

Here’s the code:

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

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

Download this as an Xcode project