How to stop TextField from misaligning the elements? - ios

Question

I'm working on a proof of concept app in SwiftUI and I came up with an idea for a settings pane looking like this:
Now I want the user to be able to tap the colored "Option X" to change the text. I thought I'd just replace Text() with TextField() but if I do this it produces a view like this:
Here is the code I'm using for the view:
HStack(){
Spacer()
ZStack{
Rectangle()
.fill(Color(txtBgCol!))
.frame(width: 300, height: 475)
.cornerRadius(25)
.shadow(radius: 3)
VStack{
Group{
Spacer()
// preset 1
TextField(presets[0].name, text: $presets[0].name)
//Text(presets[0].name)
.foregroundColor(.white)
.padding()
.background(presets[0].color)
.cornerRadius(200)
.shadow(radius: 3)
.font(.body)
Text("Some settings here")
.foregroundColor(Color(txtCol!))
.padding()
.font(.body)
}
Group{
Spacer()
// preset 2
Text(presets[1].name)
.foregroundColor(.white)
.padding()
.background(presets[1].color)
.cornerRadius(200)
.shadow(radius: 3)
.font(.body)
Text("Some settings here")
.foregroundColor(Color(txtCol!))
.padding()
.font(.body)
}
Group{
Spacer()
// preset 3
Text(presets[2].name)
.foregroundColor(.white)
.padding()
.background(presets[2].color)
.cornerRadius(200)
.shadow(radius: 3)
.font(.body)
Text("Some settings here")
.foregroundColor(Color(txtCol!))
.padding()
.font(.body)
}
Spacer()
}
}
Spacer().frame(width: 30)
}
I'm not sure why changing the Text() to TextField() would mess up everything and I'd be glad to learn more about SwiftUI intricacies, as I am pretty new to this.

Answer 1

TextField by default expands to max available width, so instead of limit only background rectangle, you should limit container
ZStack{
Rectangle()
.fill(Color(txtBgCol!))
.frame(width: 300, height: 475)
.cornerRadius(25)
.shadow(radius: 3)
VStack{
// .. other code here
}
.frame(width: 300, height: 475) // << this restricts TextField expanding