SwiftUI ScrollView pushes the subview to leading edge of the device - swiftui

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