swiftui

ScrollView cutting off part of view with white bars(SwiftUI)


I'm implementing ScrollView in my SwiftUI project but it's cutting off a part of the view:

enter image description here

How it should look:

enter image description here

Code:

struct ScrollingTest: View {
var body: some View {
    GeometryReader { geometry in
        ScrollView(.vertical, showsIndicators: false){
            VStack{
                ForEach(0..<2){ _ in
                    VStack {
                        Rectangle()
                            .foregroundColor(Color.white)
                            .frame(width: geometry.size.width - 50, height: 250)
                            .cornerRadius(25)
                            .shadow(radius: 5)
                    }.padding(.top, 15)
                }
            }.edgesIgnoringSafeArea(/*@START_MENU_TOKEN@*/.all/*@END_MENU_TOKEN@*/)
        }
        .offset(x: 20)
    }
}

It doesn't matter which size I set the rectangle it's just always cut off. What can I do to fix this? Thanks


Solution

  • It is clipped by scrollview. Here is possible solution. Tested with Xcode 12 / iOS 14.

    demo

    var body: some View {
        GeometryReader { geometry in
            ScrollView(.vertical, showsIndicators: false){
                VStack{
                    ForEach(0..<2){ _ in
                        VStack {
                            Rectangle()
                                .foregroundColor(Color.white)
                                .frame(width: geometry.size.width - 50, height: 250)
                                .cornerRadius(25)
                                .shadow(radius: 5)
                        }.padding(.top, 15)
                    }
                }.frame(width: geometry.size.width)
                .edgesIgnoringSafeArea(/*@START_MENU_TOKEN@*/.all/*@END_MENU_TOKEN@*/)
            }
        }
    }