Spacer 不能与 VStack 内的 Form 一起使用 [英] Spacer not working with Form inside a VStack

问题描述

我试图在顶部创建一个圆圈，表单内容位于下方，就在 TabBar 的正上方.我可以通过使用 .frame() 来强制执行此操作，但我不喜欢这样做.似乎应该有一种更简单的方法将其与底部对齐.

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.

我的理解是 Spacer() 应该将表单推向底部并将圆圈留在顶部，但事实并非如此.

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

推荐答案

所有的滚动视图(Form 已经建立)和形状(Circle 是)都贪婪布局优先.他们没有内在的限制，所以如果有可用的空间，他们就会接受

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

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

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

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

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

您需要限制它们的高度才能使其正常工作.

You need to restrict both their height 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)
}

这篇关于Spacer 不能与 VStack 内的 Form 一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！