Create a List in SwiftUI

Written by Team Kodeco

In SwiftUI, a List is a view that displays rows of data in a vertical, scrolling list. It’s a key component in many iOS applications, and SwiftUI simplifies the task of designing and structuring lists.

To create a basic list in SwiftUI, you employ the List view, providing it with a set of content views:

struct ContentView: View {
  var body: some View {
    List {
      Text("Item 1")
      Text("Item 2")
      Text("Item 3")
    }
  }
}

Your preview should look like:

This snippet creates a list with three static items. Each item spans the full width of the screen and assumes the default row appearance.

For a more dynamic and flexible list, such as those populated with data from an array, SwiftUI offers the ForEach view. ForEach combined with List allows you to create a custom view for each row in the list:

struct ContentView: View {
  let scientists = ["Albert Einstein", "Isaac Newton", "Marie Curie", "Charles Darwin", "Nikola Tesla"]

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

Here’s what your preview should look like:

In this example, the list displays the names of various renowned scientists.

Note that in the preceding example, ForEach is used implicitly through the List initializer that takes a collection and a content closure. If you wanted to use ForEach explicitly, you could write it like this:

List {
  ForEach(scientists, id: \.self) { scientist in
    Text(scientist)
  }
}

Using NavigationLink for Selectable Rows

For interactive lists where rows are selectable, SwiftUI provides the NavigationLink view. By wrapping each row inside a NavigationLink, combined with navigationDestination , you enable the user to select a row and navigate to a new screen:

struct ScientistDetailView: View {
  let name: String

  var body: some View {
    VStack {
      Text(name)
        .font(.title)
        .padding()
      Text("More details about \(name) would be presented here.")
        .font(.body)
        .foregroundColor(.gray)
    }
    .navigationTitle(name)
  }
}

struct ContentView: View {
  let scientists = ["Albert Einstein", "Isaac Newton", "Marie Curie", "Charles Darwin", "Nikola Tesla"]

  var body: some View {
    NavigationStack {
      List(scientists, id: \.self) { scientist in
        NavigationLink(scientist, value: scientist)
      }
      .navigationDestination(for: String.self) { scientistName in
        ScientistDetailView(name: scientistName)
      }
    }
  }
}

Tap on the Marie Curie row and your preview should look like this:

In the above example, we use a NavigationStack to navigate from the list to a detailed view based on the selected scientist. When the user selects a row, they’re taken to the ScientistDetailView specified in the NavigationLink. We use the navigationDestination modifier to associate a String data type (representing a scientist’s name) with a destination view (ScientistDetailView).

Creating a list in SwiftUI is not only straightforward but also affords abundant customization options. From simple static items to dynamic rows based on complex data models, SwiftUI’s List view is incredibly versatile. Don’t hesitate to experiment with various parameters and nested views to create unique lists that perfectly suit your app. Harness this versatility and let your creativity run wild!