SwiftUI Template - Layout with scrolling elements in both vertical and horizontal axis

Most common layouts usually contains scrolling elements. If your layout requirement matches below SwiftUI design template, you can quickly start with your screen design.  List View of SwiftUI also can achieve similar result. We can consider alternative approach all together.

Result :

Full Source code:

struct MovieListView: View {
    
    var body: some View {
        NavigationView {
            ZStack {
                Color.black.edgesIgnoringSafeArea(.all)
                ScrollView {
                    VStack(alignment: .leading) {
                        
                        Text("Horizontal Cards").foregroundColor(.white).bold().padding()
                        
                        //Section 1
                        ScrollView(.horizontal) {
                            HStack(spacing: 16) {
                                MovieSmallCard()
                                MovieSmallCard()
                                MovieSmallCard()
                                MovieSmallCard()
                                MovieSmallCard()
                                MovieSmallCard()
                                MovieSmallCard()

                               // .... Add more cards //
                            }
                        }.padding(.horizontal)
                        .padding(.bottom)
                        
                        Text("Vertical Cards").foregroundColor(.white).bold().padding()

                        //Section 2
                        ScrollView(.vertical) {
                          
                            VStack(spacing: 16) {
                                MovieRowCard()
                                MovieRowCard()
                                MovieRowCard()
                                MovieRowCard()
                                MovieRowCard()
                                MovieRowCard()
                                MovieRowCard()

                                // .... Add more cards //
                            }
                   
                        }.padding(.horizontal)
 
                    }
                }
            }
        }
        
    }
    
}

struct MovieSmallCard: View {
    
    var body: some View {
        VStack {
            Rectangle()
                .fill(Color.white)
                .frame(height:125)
            VStack(spacing : 4) {
                Text("Info box text").foregroundColor(.white).bold()
                Text("♯123456789").foregroundColor(.white)
            }
            .padding(8)
        }
        .frame(width: 200)
        .background(Rectangle().foregroundColor(Color.gray))
        .cornerRadius(8)
    }
}

struct MovieRowCard: View {
    
    var body: some View {
        HStack {
            Rectangle()
                .fill(Color.white)
                .frame(width: 50, height: 50).cornerRadius(25)
            VStack(alignment: .leading, spacing: 4, content: {
                Text("Headline of the row").bold().foregroundColor(.white)
                Text("Subtitle of the row").foregroundColor(Color.white.opacity(0.75))
            })
            Spacer()
        }
        .padding(16)
        .background(Rectangle().foregroundColor(Color.gray.opacity(0.75)))
        .cornerRadius(8)
    }
}