Moving Horizontal ScrollView up top SwiftUI

Question

I am trying to move the images in Horizontal ScrollView up top. They are currently at the bottom. I have tried adding NavigationView, .padding(), Spacer(), Adding a ZStack as a parent to HStack, and HStack(alignment: .top). I have been stuck for 3 days.

Is it possible to have Horizontal ScrollView up top?

Here is the code:

import SwiftUI
struct ContentView: View {
    
    var body: some View {
        NavigationView {
            ScrollView(.horizontal) {
              
                
                    HStack(spacing: 15) {
                        Group {
                            Image("OutdoorDining1")
                            .frame(width: 230, height: 148)
                        
                        Image("EatVegan")
                            .frame(width: 230, height: 148)
                        
                        Image("CityView")
                            .frame(width: 230, height: 148)
                                
                        
                        Image("LiveMusic")
                            .frame(width: 230, height: 148)
                            }
                
                
                        Group {
                            Image("Seafood")
                                .frame(width: 230, height: 148)
                          
                
                            Image("Blackowned")
                                .frame(width: 230, height: 148)
                           
                    
                            Image("Hookah")
                                .frame(width: 230, height: 148)
                           
                    
                            Image("OpenTilLate")
                                .frame(width: 230, height: 148)
                            
                    
                            }
                
                        Group {
                            Image("CentralAmerica")
                                .frame(width: 230, height: 148)
                        
                    
                            Image("Asian")
                                .frame(width: 230, height: 148)
                           
                    
                            Image("Mediterranean")
                                .frame(width: 230, height: 148)
                            
                    
                            }
                
                        Group {
                            Image("Steakhouses")
                                .frame(width: 230, height: 148)
                           
                    
                            Image("Kosher")
                                .frame(width: 230, height: 148)
                           
                    
                            }

The ScrollView by default is placed in the center of the screen. To shift it up put the `ScrollView` inside a `VStack` and put a `Spacer()` after the end of ScrollView. — ChrisR, Jul 03 '22 at 20:14

score 0 · Answer 1 · answered Jul 05 '22 at 07:14

Hi Christina and welcome to SO! You can use ChrisR's suggestion VStack + Spacer() - it's works, but if you building more complex UI and want to add ScrollView(.vertical) and more views use next hierarchy

struct ContentView: View {
    var body: some View {
        ZStack(alignment: .top) {
            NavigationView {
                ScrollView(.vertical) {
                    VStack {
                        ScrollView(.horizontal) {
                            HStack(spacing: 15) {
                                Group {
                                    Image("EatVegan")
                                        .frame(width: 230, height: 148)
                                    
                                    Image("CityView")
                                        .frame(width: 230, height: 148)
                                }
                                
                                Group {
                                    Image("Seafood")
                                        .frame(width: 230, height: 148)
                                    
                                    Image("Blackowned")
                                        .frame(width: 230, height: 148)
                                }
                            }
                            
                        }
                        // add other views here
                    }
                }
            }
        }
    }
}

Moving Horizontal ScrollView up top SwiftUI

1 Answers1