SwiftUI ScrollView pushes the subview to leading edge of the device

Question

I have created a screen with one top bar view and a main body view. The main body contains a registration form. As the form is too big, I have enclosed only the body part by a ScrollView. However, after doing it the form moves to the leading edge of the device. Although the form used to be in the centre of a VStack before. Could anyone please tell me what's the main issue of the ScrollView in this case?

import SwiftUI

struct HubRegistrationView: View {
    var body: some View {
        GeometryReader { geometry in
            VStack (spacing: 0) {
                VStack {
                    HeaderView()
                }
                .frame(width: geometry.size.width)
                .padding()
                .background(Color("B1"))
                ScrollView(.vertical) {
                    ZStack {
                        Image("App Background")
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .offset(y: -geometry.size.height/8)
                        HubFormView()
                    }
                    .frame(width: geometry.size.width)
                }
            }
            .edgesIgnoringSafeArea(.all)
        }
    }
}

struct HubRegistrationView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            HubRegistrationView()
            HubRegistrationView()
                .previewDevice("iPhone 8")
        }
    }
}

import SwiftUI

struct HubFormView: View {
    @State var hubOwner: String = ""

    var body: some View {
        GeometryReader { geometry in
            VStack {
                HStack {
                    Text("Hub Owner")
                        .foregroundColor(Color("T6"))
                        .padding(.leading)
                    Text("|")
                        .frame(width: 1, height: 40)
                        .background(Color("Border1"))
                    TextField("00-00-2020", text: self.$hubOwner)
                }
                .font(.system(size: 13))
                .frame(width: geometry.size.width/1.4, height: 40)
                .overlay(
                    RoundedRectangle(cornerRadius: 8)
                        .stroke(Color("Border1"), lineWidth: 1)
                )

                HStack {
                    Text("Hub Name")
                        .foregroundColor(Color("T6"))
                        .padding(.leading)
                    Text("|")
                        .frame(width: 1, height: 40)
                        .background(Color("Border1"))
                    TextField("Motorcycle", text: self.$hubOwner)
                }
                .font(.system(size: 13))
                .frame(width: geometry.size.width/1.4, height: 40)
                .overlay(
                    RoundedRectangle(cornerRadius: 8)
                        .stroke(Color("Border1"), lineWidth: 1)
                )

                Button(action: {}) {
                    Text("Phone")
                        .foregroundColor(Color("T6"))
                        .padding(.leading)
                    Text("|")
                        .frame(width: 1, height: 40)
                        .background(Color("Border1"))
                    Text("Motorcycle")
                        .foregroundColor(Color("T5"))
                    Spacer()
                    Image(systemName: "chevron.down")
                        .font(.system(size: 20))
                        .padding(.trailing)
                        .foregroundColor(Color("T1"))
                }
                .font(.system(size: 13))
                .frame(width: geometry.size.width/1.4, height: 40)
                .overlay(
                    RoundedRectangle(cornerRadius: 8)
                        .stroke(Color("Border1"), lineWidth: 1)
                )

                Button(action: {}) {
                    Text("Email")
                        .foregroundColor(Color("T6"))
                        .padding(.leading)
                    Text("|")
                        .frame(width: 1, height: 40)
                        .background(Color("Border1"))
                    Text("Motorcycle")
                        .foregroundColor(Color("T5"))
                    Spacer()
                    Image(systemName: "chevron.down")
                        .font(.system(size: 20))
                        .padding(.trailing)
                        .foregroundColor(Color("T1"))
                }
                .font(.system(size: 13))
                .frame(width: geometry.size.width/1.4, height: 40)
                .overlay(
                    RoundedRectangle(cornerRadius: 8)
                        .stroke(Color("Border1"), lineWidth: 1)
                )

                HStack {
                    Text("Street")
                        .foregroundColor(Color("T6"))
                        .padding(.leading)
                    Text("|")
                        .frame(width: 1, height: 40)
                        .background(Color("Border1"))
                    TextField("Shah Makdun Ave, Uttara", text: self.$hubOwner)
                }
                .font(.system(size: 13))
                .frame(width: geometry.size.width/1.4, height: 40)
                .overlay(
                    RoundedRectangle(cornerRadius: 8)
                        .stroke(Color("Border1"), lineWidth: 1)
                )

                HStack {
                    HStack {
                        Text("ZIP Code")
                            .foregroundColor(Color("T6"))
                            .padding(.leading)
                        Text("|")
                            .frame(width: 1, height: 40)
                            .background(Color("Border1"))
                        TextField("1205", text: self.$hubOwner)
                    }
                    .font(.system(size: 13))
                    .frame(width: geometry.size.width/2.9, height: 40)
                    .overlay(
                        RoundedRectangle(cornerRadius: 8)
                            .stroke(Color("Border1"), lineWidth: 1)
                    )

                    Button(action: {}) {
                        Text("City")
                            .foregroundColor(Color("T6"))
                            .padding(.leading)
                        Text("|")
                            .frame(width: 1, height: 40)
                            .background(Color("Border1"))
                        Text("Dhaka")
                            .foregroundColor(Color("T5"))
                        Spacer()
                        Image(systemName: "chevron.down")
                            .font(.system(size: 20))
                            .padding(.trailing)
                            .foregroundColor(Color("T1"))
                    }
                    .font(.system(size: 13))
                    .frame(width: geometry.size.width/2.9, height: 40)
                    .overlay(
                        RoundedRectangle(cornerRadius: 8)
                            .stroke(Color("Border1"), lineWidth: 1)
                    )
                }

                HStack {
                    Text("Trade Licence")
                        .foregroundColor(Color("T6"))
                        .padding(.leading)
                    Text("|")
                        .frame(width: 1, height: 40)
                        .background(Color("Border1"))
                    TextField("Licence No.", text: self.$hubOwner)
                }
                .font(.system(size: 13))
                .frame(width: geometry.size.width/1.4, height: 40)
                .overlay(
                    RoundedRectangle(cornerRadius: 8)
                        .stroke(Color("Border1"), lineWidth: 1)
                )

                HStack {
                    Text("TIN")
                        .foregroundColor(Color("T6"))
                        .padding(.leading)
                    Text("|")
                        .frame(width: 1, height: 40)
                        .background(Color("Border1"))
                    TextField("TIN No.", text: self.$hubOwner)
                }
                .font(.system(size: 13))
                .frame(width: geometry.size.width/1.4, height: 40)
                .overlay(
                    RoundedRectangle(cornerRadius: 8)
                        .stroke(Color("Border1"), lineWidth: 1)
                )

                HStack {
                    Image(systemName: "checkmark.square.fill")
                        .resizable()
                        .frame(width: 15, height: 15)
                    Text("I have accepted the")
                    Text("terms and conditions")
                        .foregroundColor(Color("T2"))
                    Spacer()
                }
                .font(.system(size: 12))
                .padding(.top, 10)
                .frame(width: 300)

                HStack {
                    Spacer()
                    Button(action: {}) {
                        Text("SUBMIT")
                        .foregroundColor(Color("T3"))
                    }
                    .padding()
                    .background(Color("B2"))
                .cornerRadius(6)
                }
                .padding(.top)
                .frame(width: geometry.size.width/1.4, height: 40)
            }
            .padding(.top, 60)
            .padding(.leading, geometry.size.width/7)
        }
    }
}


struct HubFormView_Previews: PreviewProvider {
    static var previews: some View {
        HubFormView()
    }
}




import SwiftUI

struct HeaderView: View {
    var body: some View {
        HStack {
            Image("Back Icon")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(width: 50, height: 50)
            Text("HUB REGISTRATION")
                .font(.system(size: 25))
                .padding()
                .foregroundColor(Color("T3"))
        }
        .padding(.top)
    }
}

struct HeaderView_Previews: PreviewProvider {
    static var previews: some View {
        HeaderView()
    }
}

Answer 1

thx for your code, i had to give them "real" colors so that i could see something and i got this preview now:

But how do you wanna have it?

I tested with 13.4...maybe you have an older iOS version?

ok, i tried this (because you did not show us compilable code) and it is centered...so please give us a reproducable example...

struct ContentView: View {
    var body: some View {
        GeometryReader { geometry in
            VStack (spacing: 0) {
                Spacer()
                VStack {
                    Text("Hello")
                }
                .frame(width: geometry.size.width)
                .padding()
                .background(Color("B1"))
                ScrollView(.vertical) {
                    ZStack {
                        Image("App Background")
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .offset(y: -geometry.size.height/8)
                        Text("aha")
                    }
                    .frame(width: geometry.size.width)
                }
            }
            .edgesIgnoringSafeArea(.all)
        }
    }
}