What is the difference between List and ForEach in SwiftUI

What is the difference between List and ForEach in SwiftUI

Even though ForEach and List have similar syntax, they serve different purposes.

ForEach(contacts, id: \.self) { contact in
    Text(contact)
}

List(contacts, id: \.self) { contact in
    Text(contact)
}

ForEach

ForEach is a view that creates an array of views from an underlying collection of data.

You can think of it as a map function that turns an array of data into multiple views.

struct ContentView: View {
    let contacts = [
        "John",
        "Alice",
        "Bob",
        "Foo",
        "Bar"
    ]
    
    var body: some View {
        ForEach(contacts, id: \.self) { contact in
            Text(contact)
        }
    }
}

The above code is equivalent to

struct ContentView: View {
    var body: some View {
        Text("John")
        Text("Alice")
        Text("Bob")
        Text("Foo")
        Text("Bar")
    }
}

ForEach doesn't contain any style. The result is an array of views.

By default, views without any container view will lay out vertically.

List

List or UITableView in UIKit is a complex view structure that compose many features and styles.

Here are some of the List characteristics.

• Display a collection of views as rows in a column.
• Automatically provides scrolling when the content is too large for the current display.
• Many built-in appearance features that you can configure using view modifiers, e.g., list styles, headers, footers, sections, and separators.
• Many built-in user interactions, e.g., selecting, adding, deleting, and reordering.

In brief, List is a container view that turns a collection of views into a list structure.

struct ContentView: View {
    var body: some View {
        List {
            Text("John")
            Text("Alice")
            Text("Bob")
            Text("Foo")
            Text("Bar")
        }
    }
}

List turn a collection of text views into a list structure. Each text view becomes a row's content.

As you can see, each row has a line separator and groups into the same section with round corners around them. These are all styles by a List view.

Using ForEach in List

Since ForEach can turn an array of data into a collection of views and List can turn those views into a list structure.

We can use ForEach inside a List view.

struct ListForEachExample: View {
    let contacts = [
        "John",
        "Alice",
        "Bob",
        "Foo",
        "Bar"
    ]
    
    var body: some View {
        List {
            ForEach(contacts, id: \.self) { contact in
                Text(contact)
            }
        }
    }
}

The result will be the same as our previous example.

List {
    Text("John")
    Text("Alice")
    Text("Bob")
    Text("Foo")
    Text("Bar")
}

Creating a list from a collection of data is a very common pattern. Having to use ForEach inside List every time might be cumbersome.

Luckily, List has an initializer with the same syntax as ForEach. So, we can achieve the same result using this initializer.

List(contacts, id: \.self) { contact in
    Text(contact)
}

You can easily support sarunw.com by checking out this sponsor.

Tiny OCR: Extract text from image directly from your mac.

Try it for Free

Conclusion

ForEach is a view that creates an array of views from an underlying collection of data. The resulting views can be used within other container views, e.g., VStack, HStack, and List.

List is a container view that turns a collection of views into a list structure.