Expandable List in SwiftUI (Simple way)

Create your own expandable List in SwiftUI in just a few minutes

Photo by Mia Baker on Unsplash

In SwiftUI there is a very simple way to create an expandable List in comparison with Swift which was a little bit more complicated.

SwiftUI List object is used instead of UITableView from UIKit. List object contains an initialiser in which you can declare that the list will include also some children. Also List object contains an arrow icon that handles the pointer automatically (pointing down when is opened, right when is closed).

So let’s go into the code directly. For this tutorial we will create a new project call ExpandableList and we will include everything in the ContentView file. You can do it in separate file if you want.

First of all we need to create a model for our expandable items. In our example we have some people and 3 group with different numbers of people. Here’s is our structure:

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

    // people's names
    static let paul = Person(name: "Paul", icon: "star")
    static let john = Person(name: "John", icon: "star")
    static let jeniffer = Person(name: "Jeniffer", icon: "star")
    static let monica = Person(name: "Monica", icon: "star")

    // group of people
    static let group1 = Person(name: "First Group", icon: "star", items: [Person.paul, Person.john, Person.jeniffer, Person.monica])
    static let group2 = Person(name: "Second Group", icon: "timer", items: [Person.john, Person.paul])
    static let group3 = Person(name: "Third Group", icon: "bolt.fill", items: [Person.monica])
}

For simplicity we created some static values to test our list and 3 group of people. The first group has 4 people (Paul, John, Jeniffer and Monica), the second group 2 people and the third one only one person.

Let’s now see how we will create our List. Here’s an example code:

struct ContentView: View {
    
    let items: [Person] = [.group1, .group2, .group3]
    
    var body: some View {
        List(items, children: \.items) { row in
            HStack {
                Image(systemName: row.icon)
                Text(row.name)
            }
        }
    }
}

You can notice that we declared an array of “Person” as items that will contain our three groups of people that we explained before.

The UI of the List will be very simple. It contains only an Image and a Text. So we put those into a HStack to view them horizontally and the HStack as a cell of the List.

In the List’s initialisation you can see that it will take as input the items array and declare also the children that will contain the same structure.

Here’s the full code of the ContentView file:

import SwiftUI

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

    // people's names
    static let paul = Person(name: "Paul", icon: "star")
    static let john = Person(name: "John", icon: "star")
    static let jeniffer = Person(name: "Jeniffer", icon: "star")
    static let monica = Person(name: "Monica", icon: "star")

    // group of people
    static let group1 = Person(name: "First Group", icon: "star", items: [Person.paul, Person.john, Person.jeniffer, Person.monica])
    static let group2 = Person(name: "Second Group", icon: "timer", items: [Person.john, Person.paul])
    static let group3 = Person(name: "Third Group", icon: "bolt.fill", items: [Person.monica])
}

struct ContentView: View {
    
    let items: [Person] = [.group1, .group2, .group3]
    
    var body: some View {
        List(items, children: \.items) { row in
            HStack {
                Image(systemName: row.icon)
                Text(row.name)
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

And finally let’s check the result:

Thanks for reading

You can download here a book for SwiftUI

Mastering SwiftUI

If you are enjoying my stories and you want to read more from me and a lot of other writers in medium, you can support me by joining medium through the following link (no extra costs for you)

Join Medium with my referral link - Pavlos Simas