List in SwiftUI allows us to present rows of data arranged in single column with an option to select one or more row items. In this tutorial we will dive into how to create a
simple multi-section List. Here is how to do it:

## Creating a Datasource

We will start with creating a datasource which we will use to populate the list with. We will create a struct called &#96;Place&#96; and then create another struct called &#96;Continent&#96;. We will then create an array of type &#96;Place&#96; inside the &#96;Continent&#96; struct and use that as our data source. Make sure that &#96;Place&#96; struct conforms to &#96;Identifiable&#96; protocol. More on this protocol later.

Here is the code for it:

&#96;&#96;&#96;javascript
struct Place: Identifiable {
    var id = UUID()
    var name : String = &quot;&quot;
}

struct DataSource {
    static var continent = [Place(name: &quot;Asia&quot;),
                            Place(name: &quot;Africa&quot;),
                            Place(name: &quot;South America&quot;),
                            Place(name: &quot;North America&quot;),
                            Place(name: &quot;Australia&quot;),
                            Place(name: &quot;Antartica&quot;),
                            Place(name: &quot;Europe&quot;)]
}
&#96;&#96;&#96;

## Implementing a Simple List in SwiftUI

Next, we will implement the List, so in the &#x5C;&#96;contentView&#x5C;&#96; please write the following:

&#96;&#96;&#96;javascript
struct ContentView: View {
    var body: some View {
        List(DataSource.continent) { continent in
            Text(continent.name)
        }
    }
}
&#96;&#96;&#96;

That&#x27;s about it! List gets the data source, and returns the item, which we will add in a &#96;Text&#96; view.

&#x5C;
 ![](https:&#x2F;&#x2F;firebasestorage.googleapis.com&#x2F;v0&#x2F;b&#x2F;dopebase-9b89b.appspot.com&#x2F;o&#x2F;listpic2-2.png?alt=media&amp;token=915b4d90-d7fe-4582-8161-5ce0c2c0ac41)

## Adding Sections

Now, lets add sections to this list. We will make these continents as section headers and list countries under each continent (except for Antartica 🥶). Our datasource will
look something like this now:

&#96;&#96;&#96;javascript
struct Country: Hashable, Identifiable {
    var id = UUID()
    var countryName : String = &quot;&quot;
}
struct Place: Identifiable {
    var id = UUID()
    var name : String = &quot;&quot;
    var countries = [Country]()

}

struct DataSource {
    static var continent = [Place(name: &quot;Asia&quot;,
                                  countries: [Country(countryName: &quot;🇹🇭 Thailand&quot;),Country(countryName: &quot;🇯🇵 Japan&quot;),Country(countryName: &quot;🇮🇳 India&quot;),Country(countryName: &quot;🇵🇰 Pakistan&quot;),Country(countryName: &quot;🇻🇳 Vietnam&quot;)]),
                            Place(name: &quot;Africa&quot;,
                                  countries: [Country(countryName: &quot;🇿🇦 South Africa&quot;),Country(countryName: &quot;🇸🇩 Sudan&quot;),Country(countryName: &quot;🇳🇬 Nigeria&quot;),Country(countryName: &quot;🇳🇦 Namibia&quot;),Country(countryName: &quot;🇰🇪 Kenya&quot;)]),
                            Place(name: &quot;South America&quot;,
                                  countries: [Country(countryName: &quot;🇧🇷 Brazil&quot;),Country(countryName: &quot;🇨🇴 Colombia&quot;),Country(countryName: &quot;🇨🇱 Chile&quot;),Country(countryName: &quot;🇦🇷 Argentina&quot;),Country(countryName: &quot;🇧🇴 Bolivia&quot;)]),
                            Place(name: &quot;North America&quot;,
                                  countries: [Country(countryName: &quot;🇨🇦 Canada&quot;),Country(countryName: &quot;🇺🇸 United States of America&quot;)]),
                            Place(name: &quot;Europe&quot;,
                                  countries: [Country(countryName: &quot;🇫🇷 France&quot;),Country(countryName: &quot;🇩🇪 Germany&quot;),Country(countryName: &quot;🇨🇭Switzerland&quot;),Country(countryName: &quot;🇬🇧 United Kingdom&quot;),Country(countryName: &quot;🇳🇱 Netherland&quot;)]),
                            Place(name: &quot;Oceania&quot;,
                                  countries: [Country(countryName: &quot;🇦🇺 Australia&quot;),Country(countryName: &quot;🇳🇿 New Zealand&quot;),Country(countryName: &quot;🇵🇬 Papua New Guinea&quot;)]),
                            Place(name: &quot;Antartica&quot;,
                                  countries: [Country(countryName: &quot;🥶&quot;)])

    ]
}
&#96;&#96;&#96;

We have a new struct called &#96;Country&#96; that conforms to &#96;Hashable&#96; and &#96;Identifiable&#96; and in &#96;Place&#96; struct we have an array of type &#96;Country&#96;. Going back to the content view will now add few things, here is the code:

&#96;&#96;&#96;javascript
NavigationView {
    List {
        ForEach(DataSource.continent, id: &#x5C;.id) { continent in
            Section(header: Text(continent.name)) {
                ForEach(continent.countries, id: &#x5C;.id) { country in
                    Text(country.countryName)
                }
            }

        }
    }.navigationTitle(&quot;🌎 World&quot;)
}
&#96;&#96;&#96;

&#x5C;
First we will wrap our List View with a &#96;NavigationView&#96;. Inside the &#96;List&#96; closure, we will run a &#96;ForEach&#96; loop on the continents array. Please note here that we are providing an &#96;id&#96; argument as well here. This is used in order to tell the &#96;List&#96; how to differentiate between elements. The first ForEach closure returns the element of type &#96;Continent&#96;. We will create the section header using the &#96;Section&#96; view. We will provide the &#96;Continent&#96; name as the header and then inside the content closure we will run another &#96;ForEach&#96; loop but this time on &#96;continent.countries&#96; array. Note the &#96;&#x5C;.id&#96;, in order to identify each country element. This is the reason why our structs conform to &#96;Identifiable&#96; protocols, so that it is mandatory for us to add the &#96;id&#96; property for each element. Next, we are just showing the &#96;countryName&#96; in the Text view.

&#x5C;
 ![](https:&#x2F;&#x2F;firebasestorage.googleapis.com&#x2F;v0&#x2F;b&#x2F;dopebase-9b89b.appspot.com&#x2F;o&#x2F;listpic1-2.png?alt=media&amp;token=71cc07fb-faf2-4241-80a8-5238de26d8ae)

## Implementing Multi-Section

The last thing I would like to implement is the ability to select multiple items from the list. In order to do this just add the following property inside the content view:

&#96;@State private var selection = Set&lt;UUID&gt;()&#96;

&#x5C;
Next, bind this selection property to the List&#x27;s &#96;selection&#96; argument and then add an &#96;EditButton()&#96; to the top navigation bar like this:

&#96;&#96;&#96;javascript
NavigationView {
    List(selection: $selection) {
        ....
    }.navigationTitle(&quot;🌎 World&quot;)
    .toolbar {
        EditButton()
    }
}
&#96;&#96;&#96;

So, now you have an edit button on the navigation bar of the app. Tapping it will let you make multiple selections and all those selections will be stored in the &#96;selection&#96; set.

&#x5C;
 ![](https:&#x2F;&#x2F;firebasestorage.googleapis.com&#x2F;v0&#x2F;b&#x2F;dopebase-9b89b.appspot.com&#x2F;o&#x2F;listpic3-2.png?alt=media&amp;token=3e6a333e-d46a-48f0-854b-c945f15adc0a)

The full code for this project is available on GitHub.

How to Implement Lists in SwiftUI

About

Legal

Products

Resources

Category: