Adjusting width / horizontalAlignment with SwiftUI - swift

Question

I have the following layout achieved in SwiftUI:
VStack {
TextField(...)
TextField(...)
Button(...)
}
I tried making my VStack to be 50% of the superview, so I added the following modifier:
VStack { ... }
.relativeWidth(0.5)
Not quite 50% of the superview, but I'm more interested in achieve horizontal centering. Anyone know how to achieve that in SwiftUI?
There's a alignmentGuide(_:computeValue:) modifier that's available, but I'm struggling to give the correct inputs to satisfy the compiler.

Answer 1

I'd use some spacers and HStack ...
struct LoginView: View {
#State var myText: String = ""
var body: some View {
HStack {
Spacer()
VStack {
TextField($myText, placeholder: Text("Email"))
.textFieldStyle(.roundedBorder)
.textContentType(.username)
TextField($myText, placeholder: Text("Password"))
.textFieldStyle(.roundedBorder)
.textContentType(.password)
Button(action: {
// Do your login thing here
}) {
Text("Login")
}
}
Spacer()
}
}
}

Answer 2

It seems to be center aligned already. Letting the HStack know how much width to occupy would finish the job perfectly. Above code by #SMP after modifications and without spacers would look like this:
struct LoginView : View {
#State var myText: String = ""
var body: some View {
HStack {
VStack {
TextField($myText, placeholder: Text("Email"))
.textFieldStyle(.roundedBorder)
.textContentType(.username)
TextField($myText, placeholder: Text("Password"))
.textFieldStyle(.roundedBorder)
.textContentType(.password)
Button(action: {
// Do your login thing here
}) {
Text("Login")
}
}
.relativeWidth(0.7)
}
.relativeWidth(1)
}
}