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

所有滚动视图（其Form基础）和形状（其Circle本身）在布局优先级上都是贪婪的。他们没有内部限制，所以如果有可用空间，他们就会利用它。

Spacer也是贪婪的，但它的优先级低于其他贪婪的视图。

这就是为什么在您的情况下，Form将Circle可用空间分割为 50% 到 50%。

您需要限制他们的高度才能使其发挥作用。

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)
}