SwiftUI List Tutorial

A List is a container that presents rows of data arranged in a single column. In this tutorial items from weather forecast will be presented in a list. SwiftUI requires Xcode 11 and MacOS Catalina, for which the Betas can be downloaded at the Apple developer portal.

Open Xcode and either click Create a new Xcode project in Xcode’s startup window, or choose File > New > Project. In the template selector, select iOS as the platform, select the Single View App template, and then click Next. Enter SwiftUIListTutorial as the Product Name, select the Use SwiftUI checkbox, and click Next. Choose a location to save the project on your Mac.

In the canvas, click Resume to display the preview. If the canvas isn’t visible, select Editor > Editor and Canvas to show it.

In the Project navigator, click to select ContentView.swift. Above the ContentView struct, add a new struct which will represent the data model.

struct Weather: Identifiable {
    var id = UUID()
    var image: String
    var temp: Int
    var city: String
}

The struct conforms to the Identifiable protocol, which will allow views to uniquely identify the items in a struct. The only requirement of implementing the Identifiable protocol is the id variable. Here the UUID() method is used to give the id an unique number. The data model has the following properties.

  • image : This will be the name of the system images. The SF Images provides over 1,500 configurable symbols.

  • temp: The forecast temperature.

  • city: The city name

In the ContentView struct add a modelData property with a type of an array of Weather data

let modelData: [Weather] = 
    Weather(image: "cloud.rain", temp: 21, city: "Amsterdam"),
    Weather(image: "cloud.sun.rain", temp: 18, city: "London"),
    Weather(image: "sun.max", temp: 25, city: "Paris"),
    Weather(image: "cloud.sun", temp: 23, city: "Tokyo")]

Inside the body View add a list

var body: some View {
    // 1.
    List(modelData) { weather in
        HStack {
            // 2.
            Image(systemName: weather.image)
                .frame(width: 50, height: 10, alignment: .leading)
            Text("\(weather.temp)º")
                .frame(width: 50, height: 10, alignment: .leading)
            VStack {
                Text(weather.city)
            }
        }.font(.title)
    }
}
  1. A list is created by iterating through the modelData array.

  2. The Image(systemName:) method displays the system icons. The names can be looked op with the SF Symbols application, which can be downloaded at developer.apple.com/download

The preview will look like this.

To add a navigation bar with a title first embed the list inside a NavigationView and also add a .navigationBarTitle() modifier.



var body: some View {
    NavigationView() {
        List(modelData) { weather in
            HStack {
                Image(systemName: weather.image)
                    .frame(width: 50, height: 10, alignment: .leading)
                Text("\(weather.temp)º")
                    .frame(width: 50, height: 10, alignment: .leading)
                VStack {
                    Text(weather.city)
                }
            }.font(.title)

        }
        .navigationBarTitle(Text("World Weather"))
    }
}

To add a detail view embed the HStack in a NavigationButton inside the List.

var body: some View {
    NavigationView() {
        List(modelData) { weather in
            NavigationLink(destination: Text(weather.city).font(.largeTitle)) {
                HStack {
                    Image(systemName: weather.image)
                        .frame(width: 50, height: 10, alignment: .leading)
                    Text("\(weather.temp)º")
                        .frame(width: 50, height: 10, alignment: .leading)
                    VStack {
                        Text(weather.city)
                    }
                }.font(.title)
            }
        }
        .navigationBarTitle(Text("World Weather"))
    }
}

This destination parameter of the NavigationLink() method will display a text view with the current city in the detail view. When the NavigationLink() method is used, indicators will present itself to the items in the List. In preview mode no interaction is possible, press the play button to the right of the preview to enter Live mode. Select an item and the detail view will be displayed.

The source code of the SwiftUIListTutorial can be downloaded at the ioscreator repository on Github.