CODEWITHSUNDEEP
iosswiftswiftui
Alina Rosa
Alina Rosa

Reputation: 59

How to stop TextField from misaligning the elements?

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: enter image description here

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:

enter image description here

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.

Upvotes: 1

Views: 43

Answers (1)

Asperi
Asperi

Reputation: 257693

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

Upvotes: 2

Related Questions