SwiftUI: Horizontal scrollview I am able to pull image up and down

Question

I am creating my horizontal scrollview in swiftui, how ever when I try using it I am able to pull the subview in the scrollview up and down, when it is first loaded there is also whitespace on top, middle and bottom as if the edgesignore(.all) is not working. Please see code and image below. How would I get rid of this white space, and not allow the top blue view to be pulled up?

var body: some View {
    GeometryReader { geometry in
        ZStack{

            VStack {

                ZStack{

                    ScrollView (.horizontal, showsIndicators: true) {
                        HStack(spacing: 0){
                            Group{
                                Color(.blue)
                                Color(.red)
                                Color(.green)
                            }.frame(width: geometry.size.width, height: geometry.size.height * 0.52)

                        }

                    }//end of scroll\view
                        .frame(width: geometry.size.width, height: geometry.size.height * 0.52)


                } .frame(width: geometry.size.width, height: geometry.size.height * 0.52)
                    .edgesIgnoringSafeArea(.all)

                ZStack{
                    Color(.orange)

                }//end of second ZStack

                    .frame(width: geometry.size.width, height: geometry.size.height * 0.48)
            }
        }.edgesIgnoringSafeArea(.all)

    }
}

Answer 1

You have to refactor your code with the following considerations:

• Just set VStack Spacing to 0 and the view will not scroll anymore in its vertical axis. You can check this by increasing the both frame heights to more than 100% and it will start to scroll again

• Refactor the ZStacks and set the EdgeIgnoringSafeArea according to the upper and lower Stack. Please remember, that in SwiftUI it is important, to check the correct sequence for the ViewModifiers.

  var body: some View {

  GeometryReader { geometry in

  VStack(spacing:0) {
      ZStack {
          Color(.orange)
          .edgesIgnoringSafeArea(.top)
  
          ScrollView (.horizontal, showsIndicators: true) {
              HStack(spacing:0){
                  Group{
                      Color(.blue)
                      Color(.red)
                      Color(.green)
                  }
                  .frame(width: geometry.size.width, height: geometry.size.height * 0.52)
              }
          }
      }
      ZStack{
          Color(.orange)
              .edgesIgnoringSafeArea(.bottom)
              .frame(width: geometry.size.width, height: geometry.size.height * 0.48)
  
      }
  }
  

  }

}

It works for me with XCode 11.3.