Horizontal Lists in SwiftUI (iOS Development)

Horizontal Lists in SwiftUI (iOS Development)

Describes how to make horizontal lists with notes taken from the awesome design course module 2 lesson 6 at https://learn.codewithchris.com/courses/take/design/lessons/26070218-lesson-6-horizontal-lists.

TabView Method

Horizontal list using tabs, which creates the dots at the bottom:

struct ContentView: View {
    
    var items = ["apple", "orange", "potato", "tomato"]
    
    var body: some View {
        
        TabView {
            ForEach(items, id: \.self) { item in
                Text(item)
                
            }
        }
        .tabViewStyle(.page)
        .indexViewStyle(.page(backgroundDisplayMode: .always))
    }
}

!(Screenshot of the TabView list)[img/tabViewList.jpeg)

LazyHGrid Method

Specify a single row with the LazyHGrid, which will create a horizontal list.

// MARK: - LazyHGrid Style
let row = GridItem(.fixed(50), spacing: 5, alignment: .center)
ScrollView(.horizontal) {
    LazyHGrid(rows: [row]) {
        ForEach(items, id: \.self) { item in
            Text(item)
        }
    }
}

GitHub

View Github