How to make a Horizontal List in SwiftUI

SwiftUI List view is a container that presents rows of data arranged in a single column (Vertically).

There is no option to present Horizontal List in SwiftUI at the moment of writing this (iOS 16).

List {
    Text("First Row")
    Text("Second Row")
    Text("Third Row")
}

A list will present each view in a row from top to bottom.

How to make a Horizontal List in SwiftUI

SwiftUI List doesn't support rendering and scrolling in a horizontal axis, but you achieve that with ScrollView and LazyHStack.

You can create a horizontal list using ScrollView and LazyHStack.

struct ContentView: View {
    var body: some View {
        // 1
        ScrollView(.horizontal) {
            // 2
            LazyHStack {
                Text("First Row")
                Text("Second Row")
                Text("Third Row")
            }
        }
    }
}

1 First, you create a scroll view and specify an axis that you want to scroll. In this case it is horizontal axis, ScrollView(.horizontal).
2 Then you add a LazyHStack as the content of that scroll view. LazyHStack will lazily create each view when needed.

The combination of ScrollView(.horizontal) and LazyHStack can replicate what List view does.

But ScrollView can't provide a style to match what a List view provides. You will get a plain scrollable text view like the following.

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

Note Taking:Quickly take note using Voice, Camera, or Typing

Try it for Free

How to style a Horizontal List

Luckily, adding a style in SwiftUI view is easy. We can replicate a list style using a combination of modifiers.

In the following example, I make each column a round rectangle shape to replicate the inset grounded style we usually have in a List view.

struct ContentView: View {
    var body: some View {
        ScrollView(.horizontal) {
            LazyHStack {
                // 1
                Text("First Row")
                    .padding()
                    .background(.white)
                    .cornerRadius(8)
                Text("Second Row")
                    .padding()
                    .background(.white)
                    .cornerRadius(8)
                Text("Third Row")
                    .padding()
                    .background(.white)
                    .cornerRadius(8)
            }
            // 2
            .padding()
        }
        // 3
        .background(Color(UIColor.systemGroupedBackground))
    }
}

1 We create a round rectangle shape for each view in the LazyHStack with a combination of three modifiers, .padding(), .background(.white), and .cornerRadius(8).
2 We add insets to our scroll view content using .padding().
3 We change a scroll view background color to match what we have in the inset grouped list style.

With these simple changes, we have a style that resembles the inset grouped list style.