Building Static List in SwiftUI

What is a Static List

Static List is a list with a fixed number of rows.

This is the simplest form of a list. You can create a static list view without any data backed.

A static List is suitable for representing a list of items

• You know the number of rows and
• You know that it won't change.

Examples of static Lists are Menus or Settings screens.

Here are examples of the Settings app and Shortcuts app. You can replicate this UI using a static List view.

You can easily support sarunw.com by checking out this sponsor.

AI Grammar: Correct grammar, spell check, check punctuation, and parphrase.

Try it for Free

How to Create a Static SwiftUI List

List is a container view that presents its children as a row of data.

You can think of it like VStack and HStack but with some special styling and functions.

To create a static list, you put any view in a List, and each view will present as a separate row.

struct ContentView: View {
    var body: some View {
        List {
            Text("First View")
            Text("Second View")
            Text("Third View")
        }
    }
}

Each text view will become a list row.

SwiftUI List Section

You can group one or more list rows into a section by putting them in a Section view.

This will create a visual separation between each section.

struct StaticListExample: View {
    var body: some View {
        List {
            Section {
                Text("First View")
                Text("Second View")
                Text("Third View")
            }
            Section {
                Text("1st View")
                Text("2nd View")
                Text("3rd View")
            }
        }
    }
}

SwiftUI Section Headers and Footers

If you have a list section, you can also add section headers and footers.

We can add a section header and footer in the Section initializers.

In the following example, I have three sections with different section headers and footers. I created

• One with a header
• One with a footer
• And one with both header and footer

struct ContentView: View {
    var body: some View {
        List {
            Section {
                Text("First View")
                Text("Second View")
                Text("Third View")
            } header: {
                Text("First Section Header")
            }
            Section {
                Text("1st View")
                Text("2nd View")
                Text("3rd View")
            } footer: {
                Text("Second Section Footer")
            }
            Section {
                Text("One View")
                Text("Two View")
                Text("Three View")
            } header: {
                Text("Third Section Header")
            } footer: {
                Text("Third Section Footer")
            }
        }
    }   
}

SwiftUI List Rows

In the previous example, we use a simple Text view as a list row. But any view can work as a list row.

It can be any view, e.g., Toggle, TextField, Stepper, and Slider.

Here is an example of using non-text views as a list row.

struct StaticListExample: View {
    @State var isBold = true
    @State var isReduceTransparency = false
    @State var volume = 0.25
    @State var textSize = 1
    
    var body: some View {
        List {
            Section {
                Toggle(isOn: $isBold) {
                    Text("Bold Text")
                }
                LabeledContent("Larger Text", value: "Off")
                Stepper(value: $textSize, in: 0...10) {
                    Text("Text Size: \(textSize)")
                }
                Toggle(isOn:  $isReduceTransparency) {
                    Text("Reduce Transparency")
                }
            } footer: {
                Text("Improve contrast by reducing transparency and blurs on some backgrounds to increase legibility.")
            }
            
            Section {
                Slider(value: $volume, in: 0...1) {
                    Text("Volume")
                } minimumValueLabel: {
                    Image(systemName: "speaker.fill")
                } maximumValueLabel: {
                    Image(systemName: "speaker.wave.3.fill")
                }
            } header: {
                Text("Ringer and Alerts")
            }
        }
    }
}

As you can see, we can create a setting or preference screen using just built-in SwiftUI views.

Most built-in views got a label and value. List view does an excellent job presenting them in a list row format.

You can easily support sarunw.com by checking out this sponsor.

AI Grammar: Correct grammar, spell check, check punctuation, and parphrase.

Try it for Free

Custom SwiftUI List Rows

The List row isn't limited to just built-in views. You can use create a custom view as a list cell.

In the following example, we create a cell that contains

• Image
• Title
• Subtitle

struct MyCell: View {
    let systemName: String
    let title: String
    let subtitle: String
    
    var body: some View {
        HStack {
            Image(systemName: systemName)
                .font(.headline)
                .imageScale(.large)
                .foregroundColor(.pink)
            VStack(alignment: .leading) {
                Text(title)
                    .font(.headline)
                Text(subtitle)
                    .font(.subheadline)
                    .foregroundColor(.secondary)
            }
        }
    }
}

Then we can use our custom view as a list cell.

struct StaticListExample: View {
    var body: some View {
        List {
            MyCell(
                systemName: "location.square.fill",
                title: "Location",
                subtitle: "et sequi perferendis tempora quidem.")
            MyCell(
                systemName: "eye.square.fill",
                title: "Privacy",
                subtitle: "omnis sequi laboriosam reiciendis et.")
            MyCell(
                systemName: "icloud.square.fill",
                title: "Cloud Storage",
                subtitle: "Sit eius dolorem dolor explicabo et hic dolorum harum sunt.")
        }
    }
}