CODEWITHSUNDEEP
iosswiftswiftui
ryandu
ryandu

Reputation: 647

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

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)
    }
}

screenshot of view items going off the screen

Upvotes: 1

Views: 1446

Answers (2)

dawn360
dawn360

Reputation: 11

simple fix. set the HStack spacing to 0

HStack(spacing: 0){
...

Upvotes: 0

Asperi
Asperi

Reputation: 257711

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

enter image description here

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)
    }
}

Upvotes: 1

Related Questions