Can't seem to utilize Spacer() between text() and textfield()

Question

I can't seem to get the Spacer() function to work when I'm within an HStack and trying to create space between my Text and Textfield views. The Spacer works to space out other areas of the view, but whenever I attempt to space between these two elements, it doesn't work.

Here is the code I'm working with:

    VStack(alignment: .leading, spacing: 0) {
        Rectangle()
            .frame(height: 2, alignment: .top)
            .foregroundColor(Color("grey2"))
        Text("Tickets")
            .kerning(0.5)
            .scaledFont(name: "Gotham Medium", size: 18)
            .foregroundColor(Color("grey4"))
            .padding(.horizontal)
            .padding(.bottom, 3)
            .padding(.top, 35)
        Rectangle()
            .frame(height: 2, alignment: .top)
            .foregroundColor(Color("grey2"))

        HStack {
            Text("Ticket URL")
                .kerning(0.5)
                .scaledFont(name: "Gotham Book", size: 16)
                .foregroundColor(Color("spaceblack"))

            Spacer()

            TextField("Enter URL", text: $url)
        }
        .background(Color.blue)
        .padding()

        Rectangle()
            .frame(height: 2, alignment: .top)
            .foregroundColor(Color("grey2"))
    }
    .frame(maxWidth: .infinity)
    .background(Color.red)

Answer 1

try adding .fixedSize() modifier to your TextField

   TextField("Enter URL", text: $url)
       .fixedSize()

or set a frame like so

   TextField("Enter URL", text: $url)
       .frame(width:200, height:50, alignment:.leading)

The problem is that TextField and Spacer() would take all available space and in this case TextField gets the priority; However, if you specify a fixed size or a frame to it then TextField won't stretch to take full space instead it will be fixed.

.fixedSize would allow your TextField to start small but eventually it will keep stretching the more text you write which can cause unwanted behavior.

.frame will fix your size to the provided width and hence there won't be any stretch and Spacer will have priority to take available space.