SwiftUI Header and Footer List Tutorial

A List can be extended by adding a section with a header or footer. In this tutorial a list of cars is displayed with two different section headers and a footer text.SwiftUI requires Xcode 11 and MacOS Catalina, which the can be download 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 SwiftUIHeaderFooterListTutorial 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 . Change the ContentView struct to

struct ContentView: View {
    // 1.
    let europeanCars = ["Audi","Renault","Ferrari"]
    let asianCars = ["Honda","Nissan","Suzuki"]
    
    var body: some View {
        NavigationView {
            List {
                // 2.
                Section(header:
                    Text("European Cars")) {
                        ForEach(0 ..< europeanCars.count) {
                            Text(self.europeanCars[$0])
                        }
                    }
                // 3.
                Section(header:
                    HStack {
                        Image(systemName: "car")
                        Text("Asian Cars")
                    }
                // 4.
                , footer: Text("This is a example list of a few car brands").font(.footnote))  {
                               ForEach(0 ..< asianCars.count) {
                                   Text(self.asianCars[$0])
                               }
                           }
            
            } .navigationBarTitle("Cars")
        }
           
    }
}

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