HStack TextFields

How do I make it so that these two textfields aren't connected? They should have two separate backgrounds.

Answered by BabyJ in 717839022

Something like this?

Just remove

frame(width: 50)

To see it better, set background color:

struct ContentView: View {
    @State var totalTime = ""
    @State var servings = ""

    var body: some View {
        Form {
            HStack {
                TextField("Total Time in Minutes", text: $totalTime)
                    .background(Color.blue)
                // .frame (width: 50)
                TextField("Servings", text: $servings)
                    .background(Color.red)
                //  .frame (width: 50)
            }
        }
    }
}

That didn't work

You can also do this:

    var body: some View {
        Form {
            HStack {
                TextField("Total Time in Minutes", text: $totalTime)
                    .background(Color.green)
                TextField("Servings", text: $servings)
                    .background(Color.yellow)
                  .multilineTextAlignment(.trailing)
            }
        }
    }

And get:

If that's not what you want, please show exactly what you want. If OK, don't forget to close the thread.

There's no way to show it because SwiftUI won't allow it. Do you see the white space between the yellow and green? I don't want that. I want there to be gray in between them. Similar to the way they would be if they were stacked vertically:

Is it what you want ?

Then just set the color of HStack

    var body: some View {
        Form {
            HStack {
                TextField("Total Time in Minutes", text: $totalTime)
                    .background(Color.green)

                TextField("Servings", text: $servings)
                    .background(Color.yellow)
                  .multilineTextAlignment(.trailing)
            }
            .background(Color.yellow)
        }
    }

If you want a lightgray separation,

extension Color {
    static let lightGray = Color(red: 0.8, green: 0.8, blue: 0.8) // adapt to exact color you want
}

and set for HStack

            .background(Color.lightGray)
Accepted Answer

Something like this?

HStack TextFields
 
 
Q