Spacer not working with Form inside a VStack

Question

I'm trying to get a circle on top with the form content down below, right above my TabBar. I can somewhat force this by using .frame() but I'm not a big fan of that. It seems like there should be a simpler way in order to align it to the bottom.

My understanding is that Spacer() should push the form towards the bottom and leave the circle at the top, but this doesn't seem to be the case.

var body: some View {
    VStack {
        Circle().foregroundColor(.yellow).overlay(VStack {
            Text("Example")
        }).foregroundColor(.primary)
        
        Spacer()
        
        Form {
            TextField("test", text: $a)
            TextField("test2", text: $b)
        }
    }
}

Answer 1

All scrollviews (which Form is built on) and shapes (which Circle is) are greedy in layout priority. They don't have inner limitations, so if there's available space they are going take it.

Spacer is greedy too, but it has lower priority than other greedy views.

That's why in your case, Form and Circle are splitting available space 50% to 50%.

You need to restrict both their heights to make it work.

VStack {
    Circle().foregroundColor(.yellow).overlay(VStack {
        Text("Example")
    }).foregroundColor(.primary)
    .frame(height: UIScreen.main.bounds.width)
    
    Spacer()
    
    Form {
        TextField("test", text: $a)
        TextField("test2", text: $b)
    }.frame(height: 150)
}