Using List and Section in SwiftUI

Overview

In SwiftUI, we can use the List structure to create scrolling lists of data, similar to the UITableView and Cell structure in UIKit. To display data belonging to different categories within a List, we use the Section view. We can then use ForEach to iterate over our data collections and display them.

The ForEach structure requires a few key parameters:

• Data: The collection of data to iterate over.
• id: A way to uniquely identify each element in the collection.
• Content: A closure that defines the view for each element.

Reference:

• SwiftUI Tutorial #2 — Navigating with NavigationView

Step 1: Create the Data Model

Let's start by creating our data model. In this example, we want to display a list of users grouped by their authorization level.

First, create a new Swift file and define a struct for our user groups. Because ForEach needs to uniquely identify each item in our data collection, we must make our struct conform to the Identifiable protocol. This requires adding an id property.

// In a new file, e.g., UserModel.swift
import Foundation

struct UserGroup: Identifiable {
    let id = UUID() // Conforms to Identifiable
    let authority: String
    let names: [String]
}

// Create our data
let adminGroup = UserGroup(authority: "Admin", names: ["Alice", "Bob"])
let userGroup = UserGroup(authority: "Standard User", names: ["Charlie", "David", "Eve"])

// Combine into a single array
let userList = [adminGroup, userGroup]

Step 2: Create the List

Now, in your ContentView, we can create the List. Since our UserGroup struct conforms to Identifiable, we don't need to specify an id parameter in the first ForEach loop.

We'll use a List with a ForEach to create the sections, and a nested ForEach to create the rows within each section.

// In ContentView.swift
import SwiftUI

struct ContentView: View {
    var body: some View {
        List {
            // First loop for the sections
            ForEach(userList) { group in
                Section(header: Text(group.authority)) {
                    // Second loop for the rows in each section
                    ForEach(group.names, id: \.self) { name in
                        Text(name)
                    }
                }
            }
        }
        .listStyle(GroupedListStyle()) // Optional: for a grouped appearance
        .navigationTitle("User List")
    }
}

Explanation:

• Line 5: The outer List contains our entire structure.
• Line 7: The first ForEach iterates over userList. Each group in the list becomes a Section.
• Line 8: We create a Section for each group, using the group.authority as the header text.
• Line 10: The nested ForEach iterates over the names array within each group. Here, since String is not identifiable by default, we tell ForEach to use the string itself as the unique identifier (id: \.self).
• Line 11: A Text view is created for each name.

This structure gives us a clean, sectioned list that's easy to read and manage.