Using ScrollView in SwiftUI

Written by Team Kodeco

The ability to scroll through content is a crucial feature in most mobile applications. SwiftUI provides the ScrollView component to enable this scrolling behavior, and it’s highly adaptable for both vertical and horizontal orientations.

Here’s an enhanced example illustrating a vertical and a horizontal ScrollView within the same ContentView. We’ll also show you how to hide the scroll bars for a cleaner aesthetic:

struct ContentView: View {
  var body: some View {
    VStack {
      // Vertical ScrollView
      ScrollView(.vertical) {
        VStack(spacing: 20) {
          ForEach(1...20, id: \.self) { index in
            Text("Row \(index)")
              .font(.title)
          }
        }
        .padding()
        .frame(maxWidth: .infinity)
      }

      Divider()

      // Horizontal ScrollView
      ScrollView(.horizontal, showsIndicators: false) {
        HStack(spacing: 20) {
          ForEach(1...20, id: \.self) { index in
            Text("Item \(index)")
              .font(.title)
          }
        }
        .padding()
      }
    }
  }
}

Your preview should look like this:

This example demonstrates the use of a vertical and a horizontal ScrollView in SwiftUI. The outermost VStack contains two main sections, separated by a Divider.

In the first section, a vertical ScrollView is declared. This ScrollView contains a VStack, which in turn contains a ForEach loop. The ForEach loop generates 20 Text views, each labeled with a unique row number and displayed in large text with the .title font modifier. The VStack has a spacing of 20, creating a 20-point gap between each Text view.

The .padding() modifier is applied to the VStack, adding some space around the stack and its contents. The .frame(maxWidth: .infinity) modifier is then applied to ensure that the ScrollView extends to the full available width of the screen or its parent view.

The second section, separated by a Divider, contains a horizontal ScrollView. The horizontal ScrollView contains an HStack with a ForEach loop that generates 20 Text views, each labeled with a unique item number. The showsIndicators: false parameter is used to hide the scroll bar in the horizontal ScrollView.

The result is a view with a vertical list of items that can be scrolled through from top to bottom and a horizontal list of items that can be scrolled from left to right.

Through the versatile ScrollView view, SwiftUI offers a powerful solution for building dynamic scrolling interfaces, accommodating both vertical and horizontal orientations. Coupling it with stack views and ForEach, you can efficiently generate and manipulate dynamic content within a ScrollView.