SwiftUI is a way to build user interfaces for all Apple platforms. When you’re familiar with UIKit, you may know that lists are made using a UITableView. In SwiftUI, lists can be created using a list view.

This blog post explains how to make a list in SwiftUI. When you never worked with SwiftUI before, please read the introduction to SwiftUI to get the basic knowledge. To get started, open Xcode and create a new project.

Getting started with the List container

Building a dynamic list of items in SwiftUI is easy. Using a List container, rows of data can be presented just like an UITableView in UIKit. When using a list, you don’t need to worry about reusing views that have been scrolled. The OS will automatically clean up the views inside the list and reuse them.

To understand how a list works, I will show an example of a list containing three Text elements.

Example:

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

Using the code above, a list is shown to the user containing three list items. As you may already notice, a List container is just a wrapper on the list items that should be displayed. You don’t need to create new views like an UITableViewCell in UIKit. Also, a List container has scrolling enabled by default.

The output of the example code where three Text elements are inside a List container.

Create a list of dynamic items

Now that we know the basics of the List container, it’s time to use it for a dynamic list of items. A List container can be used as a loop. If you initialize the List container with an array of items, the List will loop through the array until all items have been applied.

The List container can only loop through an array of items if the type of the array is using the Identifiable protocol. This protocol requires the object to have a unique ID to make sure the object can be identified.

For our todo app, we create the struct with the name TodoItem and implement the Identifiable protocol.

Example:

struct TodoItem: Identifiable {
  var id = UUID()
  var action: String
}

Now we can use the TodoItem object to create some todo items and put them into an array. Then, we’re able to set up a List that’s using the array to display data.

Example:

let todoItems: [TodoItem] = [
  TodoItem(action: "Writing a blogpost about SwiftUI"),
  TodoItem(action: "Walk with the dog"),
  TodoItem(action: "Drink a beer")]
    
var body: some View {
  List(todoItems) { todoItem in
    Text(todoItem.action)
  }
}

Set the list into a NavigationView

Now that we have a list with views, it would be great to display it inside a NavigationView. A NavigationView is like a UINavigationController in UIKit, allowing you to set a header title at the top of the view. To do this, just set the List inside a NavigationView container.

Example:

var body: some View {
  NavigationView {
    List(todoItems) { todoItem in
      Text(todoItem.action)
    }.navigationBarTitle("Todo list")
  }
}

To set the title of the view, use the function navigationBarTitle after setting up the List container. Your app will now look like this:

NavigationView container containing a List container with data.

Conclusion

Creating a list based on an array with dynamic data is much easier in SwiftUI then UIKit. Just use a List container and set up the views that should be displayed inside the List container.

🚀 Like this article? Follow me on Twitter for more SwiftUI related blogs!

Categories:SwiftUI