2

我试图在我的 TabBar 正上方的表单内容下方获得一个圆圈。我可以通过使用来强迫它，.frame()但我不是它的忠实粉丝。似乎应该有一种更简单的方法来将其与底部对齐。

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

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

4

3 回答 3

2

所有滚动视图（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)
}

于 2021-08-18T17:20:48.450 回答
1

解决这个问题的一种方法是使用SwiftUI-Introspect，因为没有固定的大小，所以在所有设备上看起来都不错。

您可以通过从底层获取Form's来实现这一点。contentHeightUITableView

例子：

struct ContentView: View {
    @State private var a = ""
    @State private var b = ""

    @State private var contentHeight: CGFloat?

    var body: some View {
        VStack {
            Circle()
                .foregroundColor(.yellow)
                .overlay(
                    VStack {
                        Text("Example")
                    }
                )
                .foregroundColor(.primary)
                .aspectRatio(1, contentMode: .fit)

            Spacer()

            Form {
                TextField("test", text: $a)

                TextField("test2", text: $b)
            }
            .introspectTableView { tableView in
                contentHeight = tableView.contentSize.height
            }
            .frame(height: contentHeight)
        }
    }
}

结果：

结果

于 2021-08-18T18:10:40.677 回答
0

Forms，如Lists，展开以占用父视图中的所有可用空间。如果您将模拟器切换到 Light Mode，您将在TextFields. 那是你的形式。

然后发生的事情是Spacer()被压缩成虚无。解决此问题的最简单方法是.frame(height: ???)在Spacer()将导致垫片占用该空间量并将您Form向下推的情况下放置一个。需要注意的是，它还会将您的圈子向上推并缩小。我不知道这对您来说是否是个问题，因为这是一个简单的、可重复的示例，但如果需要，您可以.frame()在上视图中设置 a。

        VStack {
            Circle().foregroundColor(.yellow).overlay(VStack {
                Text("Example")
            }).foregroundColor(.primary)
            .frame(width: 300)
            
            Spacer()
                .frame(height: 100)
            
            Form {
                TextField("test", text: $a)
                TextField("test2", text: $b)
            }
        }
于 2021-08-18T17:20:32.740 回答