List and ScrollView: Display collections of data using List or custom layouts with ScrollView.

List

A List in SwiftUI is used to present data in a scrollable list format, similar to UITableView in UIKit. It's highly efficient for displaying dynamic or static content because SwiftUI only renders the visible items on the screen, making it great for long lists of data.

Lists can be static, where you manually define the rows, or dynamic, where you use an array of data to generate rows. They support standard list behavior like selection, deletion, and moving items.

Dynamic List Example

Here’s how to create a dynamic list that displays an array of items:

struct Item: Identifiable {
    let id = UUID()
    var name: String
}

struct ContentView: View {
    let items = [Item(name: "Apple"), Item(name: "Banana"), Item(name: "Cherry")]

    var body: some View {
        List(items) { item in
            Text(item.name)
        }
    }
}

Each item in the list needs to conform to the Identifiable protocol or you must provide a key path to a unique identifier using the .id() modifier on the List.

List with Actions

You can also add actions like deletion:

struct ContentView: View {
    @State private var items = [Item(name: "Apple"), Item(name: "Banana"), Item(name: "Cherry")]

    var body: some View {
        List {
            ForEach(items) { item inText(item.name)
}
.onDelete(perform: deleteItems)
}
.navigationBarItems(trailing: EditButton())
}
func deleteItems(at offsets: IndexSet) {
    items.remove(atOffsets: offsets)
}
}

In this example, `.onDelete(perform:)` allows users to swipe to delete items from the list, and `EditButton()` provides a way to enter editing mode to delete or move items.

ScrollView `ScrollView` allows you to create custom scrollable layouts. Unlike `List`, it does not automatically recycle its views or provide list-specific interactions. `ScrollView` is ideal when you need more flexibility in arranging views or when you’re not displaying long lists of similar items.

ScrollView Example Here’s a simple `ScrollView` containing a vertical stack of text views:

struct ContentView: View {
    var body: some View {
        ScrollView {
            VStack(spacing: 20) {
                ForEach(1..<100) { index in
                    Text("Item \(index)")
                }
            }
        }
    }
}

ScrollView with Horizontal Scrolling

You can also make ScrollView scroll horizontally:

struct ContentView: View {
    var body: some View {
        ScrollView(.horizontal) {
            HStack(spacing: 20) {
                ForEach(1..<100) { index in
                    Text("Item \(index)")
                }
            }
        }
    }
}

Combining List and ScrollView

While List is tailored for displaying a collection of similar data items, ScrollView provides more layout freedom. You might sometimes need to combine both in your app. For example, use a List for a main content area and a ScrollView for a custom, scrollable header or footer section.

Conclusion

Both List and ScrollView are powerful SwiftUI components for displaying content. Use List when you have a collection of similar data items to present in a standard list format with built-in support for common list interactions. Use ScrollView when you need more control over the layout or when displaying content that doesn't fit the standard list model. Experimenting with these components will give you a good feel for when to use each in your SwiftUI apps.