SwiftUI View gets offset to the right when using Geometry Reader and ScrollVIew

Question

I am using a ScrollView inside of a GeometryReader in SwiftUI, but everything inside the scroll view gets offset to the left, or at least the items inside the scroll view think that the boundary of the view extends far past the actual boundary of the view. as seen below. I am using the public release of Xcode 12 from the mac app store along with macOS Big Sur beta 8.

Here's the code to recreate this.

struct TextClassifierMMLView: View {
    @State var nLayers = 5
    var body: some View {
        GeometryReader{ geo in
            ScrollView{
                VStack{
                    GrayNumberStepperCard(text: "Layers", geo: geo, upperRange: 1000, lowerRange: 1, value: self.$nLayers).padding()
                }
            }
        }.navigationTitle(Text("Text Classifier"))
    }
}


struct GrayNumberStepperCard: View {
    @State var text: String
    @State var geo: GeometryProxy
    @State var upperRange: Int
    @State var lowerRange: Int
    @Binding var value: Int
    
    var body: some View {
        HStack{
            Text(text)
                .font(.custom("OpenSans-SemiBold", size: 14))
                .foregroundColor(.accentColor)
            
            Spacer()
            
            Stepper(value: $value, in: lowerRange...upperRange) {
                Text("\(self.value)")
            }.padding()
        }.frame(width: geo.size.width, height: 15)
        .padding()
        .background(
            RoundedRectangle(cornerRadius: 4)
                .foregroundColor(Color(hex: "F0F5F5"))
        )
        .padding(.horizontal)
        .padding(.vertical, 5)
    }
}

Asperi Asperi · Accepted Answer · 2020-09-24T03:25:33

You don't need GeometryReader in this layout at all, it only confuses automatic layout.

Here is modified code. Tested with Xcode 12 / iOS 14

struct TextClassifierMMLView: View {
    @State var nLayers = 5
    var body: some View {
            ScrollView{
                 VStack{
                      GrayNumberStepperCard(text: "Layers", upperRange: 1000, lowerRange: 1, value: self.$nLayers).padding()
                 }
        }.navigationTitle(Text("Text Classifier"))
    }
}


struct GrayNumberStepperCard: View {
    @State var text: String
    @State var upperRange: Int
    @State var lowerRange: Int
    @Binding var value: Int

    var body: some View {
        HStack{
            Text(text)
                .font(.custom("OpenSans-SemiBold", size: 14))
                .foregroundColor(.accentColor)

            Spacer()

            Stepper(value: $value, in: lowerRange...upperRange) {
                Text("\(self.value)")
            }.padding()
        }.frame(height: 15)
        .padding()
        .background(
            RoundedRectangle(cornerRadius: 4)
                .foregroundColor(Color.red)
        )
        .padding(.horizontal)
        .padding(.vertical, 5)
    }
}

SwiftUI View gets offset to the right when using Geometry Reader and ScrollVIew

1 Answers