SwiftUI, ScrollView pushing VStack images up in ZStack

Question

When I apply the scrollview it pushes my whole view up and leaves a white space below the bottom of the ZStack. Not sure why but if someone can please help.

var body: some View {


        ZStack{
            GeometryReader { geometry in
            Spacer()
             ScrollView (.vertical, showsIndicators: false) {
            VStack (spacing : self.Vspacing){
                Spacer()
                ForEach (self.buttons, id: \.self) { row in
                    SportsButtonsRow(screenWidth: geometry.size.width,
                                     Hspacing: self.Hspacing,
                                     buttons: row,  didTapButton: { sportButton in self.displayText = sportButton.title}
                                    )
                }//end foreach
               //  Spacer ()
            }.background(Color.black)//end of VStack
        }//end of scroll view
                 }//close geometry reader
    }//end of ZStack
        .edgesIgnoringSafeArea(.all)

}//end of main some View

}

score 2 · Answer 1 · answered Dec 19 '19 at 08:37

You need to change the order of containers construction. The following scratch demo works:

var body: some View {
        ZStack{
            GeometryReader { geometry in
                ScrollView (.vertical, showsIndicators: false) {

                // YOUR CONTENT HERE

                }
                .background(Color.black)//end of VStack
                .frame(height: geometry.size.height)
                //end of scroll view
        } //close geometry reader
        .edgesIgnoringSafeArea(.all)
    } //end of ZStack
} //end of main some View

I edited the question above to have what I currently have in my project, with your recommendations. I also checked that I have Xcode 11.2 which I do have. I am getting this result seen in the picture above. — bain, Dec 22 '19 at 20:46

score 0 · Answer 2 · answered Dec 22 '19 at 22:40

I figured it out. It seems you need to designate a frame size for the scrollview so I did.

       GeometryReader { geometry in
            Spacer()
                VStack{
                    Text ("fdklafdfa")
                        .foregroundColor(.blue)
                         .frame(width: geometry.size.width, height:geometry.size.height * 0.32 , alignment: .bottom)
                    Spacer()

                    ScrollView (.vertical, showsIndicators: false) {

                             VStack (spacing : self.Vspacing){
                                 Spacer()
                                 ForEach (self.buttons, id: \.self) { row in
                                     SportsButtonsRow(screenWidth: geometry.size.width,
                                                      Hspacing: self.Hspacing,
                                                      buttons: row,  didTapButton: { sportButton in self.displayText = sportButton.title}
                                                     )
                                 }//end foreach
                                //  Spacer ()
                             }//end of VStack
                         }//end of scroll view
                        .frame(width: geometry.size.width, height:geometry.size.height * 0.68 , alignment: .bottom)
                        .edgesIgnoringSafeArea(.all)
                        .background(Color.black)
                }//End of main VStack

                 }//close geometry reader

SwiftUI, ScrollView pushing VStack images up in ZStack

2 Answers2