How to create horizontal or vertical ScrollView in SwiftUI?

Uplift iOS Interview

The Guide is for YOU if
  • You are preparing for an iOS interview and want to improve your skills and knowledge and looking to level up your interview game and land your dream job.
  • You want to gain confidence and ease during iOS interviews by learning expert tips and curated strategies.
  • You want access to a comprehensive list of iOS interview QA to practice and prepare.

ScrollView in SwiftUI presents its content within the scrollable region. ScrollView can scroll horizontally, vertically, or both. The alignment of the ScrollView is vertical. If you want to make it horizontal then you need to use the horizontal parameter for the ScrollView.

In the following example, the ScrollView allows the user to scroll through multiple RoundedRectangle child views. You can use showsIndicators false/true to toggle the scroll indicator.

struct ContentView: View {
    var body: some View {
        ScrollView(showsIndicators: false) {
            ForEach(0..<20) {
                RoundedRectangle(cornerRadius: 10)
                    .fill(Color.orange)
                    .frame(width: 160, height: 160)
                    .overlay(Text("Cell \($0)")
                                .font(.title))
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Output

How to create horizontal or vertical  ScrollView in SwiftUI


✍️ Written by Ishtiak Ahmed

👉 Follow me on XLinkedIn



Get Ready to Shine: Mastering the iOS Interview




Enjoying the articles? Get the inside scoop by subscribing to my newsletter.

Get access to exclusive iOS development tips, tricks, and insights when you subscribe to my newsletter. You'll also receive links to new articles, app development ideas, and an interview preparation mini book.

If you know someone who would benefit from reading this article, please share it with them.