Chapter 12: Lists and Grids: Handling Data Collections in SwiftUI

This post is part of a series about programming with Swift to build iOS apps. Be sure to check out the other posts in the series for a complete journey into mastering iOS development.

• Chapter 0: A Journey into Programming and Why You’ll Need a Mac

Displaying data in a structured and dynamic way is essential for most apps. SwiftUI makes this straightforward with Listsand Grids, which allow you to organize and present data collections with minimal effort.

In this chapter, we’ll cover:

• How to use Lists to display vertical collections.

• How to use Grids for more flexible, multi-column layouts.

• Practical examples to implement both.

By the end, you’ll be able to handle and display data collections efficiently in your apps.

---

1. What is a List in SwiftUI?

A List is a vertical scrollable container that dynamically displays rows of data. Lists are perfect for organizing items like tasks, contacts, or articles.

Basic List Example

struct BasicListView: View {
    let items = ["Apple", "Banana", "Cherry"]

    var body: some View {
        List(items, id: \ .self) { item in
            Text(item)
        }
    }
}

This code creates a simple list displaying each fruit in the items array. The id: \ .self tells SwiftUI that each item in the array is unique and can be used to identify rows.

---

Customizing Rows

You can customize each row by providing a custom view:

struct CustomListView: View {
    let items = ["Apple", "Banana", "Cherry"]

    var body: some View {
        List(items, id: \ .self) { item in
            HStack {
                Image(systemName: "circle.fill")
                Text(item)
            }
        }
    }
}

This adds an image next to each item, creating a more visually interesting layout.

---

2. What is a Grid in SwiftUI?

A Grid in SwiftUI provides a flexible way to display items in rows and columns. Grids are perfect for photo galleries, product displays, or any layout that benefits from multiple columns.

Basic Grid Example

Using a LazyVGrid, you can create a grid layout with dynamic content:

struct BasicGridView: View {
    let items = ["1", "2", "3", "4", "5", "6"]
    let columns = [
        GridItem(.flexible()),
        GridItem(.flexible())
    ]

    var body: some View {
        LazyVGrid(columns: columns, spacing: 10) {
            ForEach(items, id: \ .self) { item in
                Text(item)
                    .frame(maxWidth: .infinity)
                    .padding()
                    .background(Color.blue.opacity(0.2))
                    .cornerRadius(8)
            }
        }
        .padding()
    }
}

• GridItem: Defines the behavior of each column (e.g., flexible or fixed size).

• LazyVGrid: A vertical grid that only loads the visible content, making it memory efficient.

---

Dynamic Grids

You can use LazyHGrid for horizontal grids:

struct HorizontalGridView: View {
    let items = ["1", "2", "3", "4", "5"]
    let rows = [
        GridItem(.fixed(50)),
        GridItem(.fixed(50))
    ]

    var body: some View {
        LazyHGrid(rows: rows, spacing: 10) {
            ForEach(items, id: \ .self) { item in
                Text(item)
                    .frame(width: 50, height: 50)
                    .background(Color.orange.opacity(0.2))
                    .cornerRadius(8)
            }
        }
        .padding()
    }
}

---

3. From Playground to SwiftUI

Let’s combine what we’ve learned to create a Chapter12View that demonstrates both Lists and Grids.

---

Step 1: Create Chapter12View.swift

Add a new Swift file named Chapter12View.swift to your project, and include the following code:

import SwiftUI

struct Chapter12View: View {
    let fruits = ["Apple", "Banana", "Cherry", "Date", "Elderberry"]
    let gridItems = [
        GridItem(.flexible()),
        GridItem(.flexible())
    ]

    var body: some View {
        VStack(spacing: 20) {
            Text("List and Grid Examples")
                .font(.largeTitle)
                .padding()

            List(fruits, id: \ .self) { fruit in
                HStack {
                    Image(systemName: "leaf.fill")
                        .foregroundColor(.green)
                    Text(fruit)
                }
            }

            LazyVGrid(columns: gridItems, spacing: 10) {
                ForEach(fruits, id: \ .self) { fruit in
                    Text(fruit)
                        .frame(maxWidth: .infinity)
                        .padding()
                        .background(Color.blue.opacity(0.2))
                        .cornerRadius(8)
                }
            }
            .padding()
        }
        .padding()
    }
}

---

Step 2: Update ContentView.swift

Modify ContentView to load Chapter12View:

import SwiftUI

struct ContentView: View {
    var body: some View {
        Chapter12View()
    }
}

#Preview {
    ContentView()
}

---

4. Challenges

1. Add a button that toggles between showing a List and a Grid.

2. Create a dynamic grid layout where the number of columns adjusts based on the device’s screen size.

3. Use a Section in the List to group items by their starting letter.

---

What’s Next?

You now know how to display and manage data collections efficiently using Lists and Grids. In the next chapter, we’ll dive into data persistence, exploring how to store data locally using UserDefaults, Core Data, and FileManager.

Let’s keep building!