Design+Code logo

Quick links

No results found

Suggested search

In this section, we will add the scroll view to the home view. By doing that, it allows us to see the content that is hidden below. It also enables the scroll gesture.## Scroll View

The ScrollView is a container that displays views vertically and horizontally. It contains four horizontal ScrollViews.

ScrollView(.vertical, showsIndicators: false) {
  VStack {

  }
}

Scroll Section

Create a new file for the Scroll View, which has a title and a horizontal scroll view that contains multiple cards.

@State var title: String = "Now Playing"

@State var posters: [String] = ["poster1", "poster2", "poster3", "poster4", "poster5", "poster6"]

var body: some View {
  VStack(alignment: .leading) {
    Text(title)
      .font(.headline)
      .foregroundColor(.white)
      .padding(.horizontal, 20)

    ScrollView(.horizontal, showsIndicators: false) {
      HStack(spacing: 20.0) {
        ForEach(posters.indices, id: \.self) { index in
          Image(posters[index])
            .resizable()
            .frame(width: 100, height: 130)
            .cornerRadius(20)
        }
      }
      .offset(x: 20)
      .padding(.trailing, 40)
    }
  }
}

In HomeView, declare the 3 arrays. Then, use the ScrollSection views 4 times.

@State var posters1: [String] = ["poster1", "poster2", "poster3", "poster4", "poster5", "poster6"]

@State var posters2: [String] = ["poster7", "poster8", "poster9", "poster10", "poster11", "poster12"]

@State var posters3: [String] = ["poster13", "poster14", "poster15", "poster16", "poster17", "poster18"]

VStack(spacing: 20.0) {
  ScrollSection(title: "Now Playing", posters: posters1)

  ScrollSection(title: "Coming Soon", posters: posters2)

  ScrollSection(title: "Top Movies", posters: posters3)

  ScrollSection(title: "Favorite", posters: posters1)
}
.padding(.bottom, 90)

In ContentView, we can replace the text by the view.

HomeView()
	.tag(Tab.home)

Purchase includes access to 30+ courses, 240+ premium tutorials, 120+ hours of videos, source files and certificates.

Templates and source code

Download source files

Download the videos and assets to refer and learn offline without interuption.

check

Design template

check

Source code for all sections

check

Video files, ePub and subtitles

Browse all downloads

Meet the instructor

We all try to be consistent with our way of teaching step-by-step, providing source files and prioritizing design in our courses.