Lesson 6 of Module 2 from the CWC+ Design Course introduces us to two methods of creating horizontal lists.
TabView Method
let items = ["item 1", "item 2", "item 3", "item 4"]
var body: some View {
TabView {
ForEach(items, id: \.self) { item in
Text(item)
}
} .tabViewStyle(PageTabViewStyle()) .indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))
}
The TabView method places each element on its own screen, that’s automatically swipeable.
LazyHGrid Method
var body: some View {
let row = GridItem(
.fixed(50),
spacing: 5,
alignment: .center
)
ScrollView (.horizontal, showsIndicators: false) {
LazyHGrid(
rows: [row],
content: {
ForEach (0..<20) { index in
Text("Item \(index)")
}
}
)
}
}
The LazyHGrid method creates a proper horizontal list of elements, but it requires ScrollView() to make it swipeable.
