对于 Swift 5.2 和 iOS 13.4，根据您的需要，您可以使用以下示例之一将您的 VStack 与顶部前导约束和全尺寸框架对齐。
请注意，下面的代码 sn-ps 都导致相同的显示，但不保证VStack 的有效框架，也不保证调试视图层次结构时可能出现的View 元素的数量。
1。使用frame(minWidth:idealWidth:maxWidth:minHeight:idealHeight:maxHeight:alignment:)方法
最简单的方法是将VStack 的框架设置为最大宽度和高度，并在frame(minWidth:idealWidth:maxWidth:minHeight:idealHeight:maxHeight:alignment:) 中传递所需的对齐方式：
struct ContentView: View {
var body: some View {
VStack(alignment: .leading) {
Text("Title")
.font(.title)
Text("Content")
.font(.body)
}
.frame(
maxWidth: .infinity,
maxHeight: .infinity,
alignment: .topLeading
)
.background(Color.red)
}
}
2。使用Spacers 强制对齐
您可以将 VStack 嵌入到完整大小的 HStack 中，并使用尾随和底部 Spacers 强制您的 VStack 顶部前导对齐：
struct ContentView: View {
var body: some View {
HStack {
VStack(alignment: .leading) {
Text("Title")
.font(.title)
Text("Content")
.font(.body)
Spacer() // VStack bottom spacer
}
Spacer() // HStack trailing spacer
}
.frame(
maxWidth: .infinity,
maxHeight: .infinity
)
.background(Color.red)
}
}
3。使用ZStack 和全尺寸背景View
此示例显示如何将您的 VStack 嵌入到具有顶部前导对齐的 ZStack 中。请注意Color 视图如何用于设置最大宽度和高度：
struct ContentView: View {
var body: some View {
ZStack(alignment: .topLeading) {
Color.red
.frame(maxWidth: .infinity, maxHeight: .infinity)
VStack(alignment: .leading) {
Text("Title")
.font(.title)
Text("Content")
.font(.body)
}
}
}
}
4。使用GeometryReader
GeometryReader 有以下declaration：
将其内容定义为自身大小和坐标空间的函数的容器视图。 [...] 这个视图返回一个灵活的首选尺寸给它的父布局。
下面的代码 sn-p 显示了如何使用 GeometryReader 将您的 VStack 与前导约束和全尺寸框架对齐：
struct ContentView : View {
var body: some View {
GeometryReader { geometryProxy in
VStack(alignment: .leading) {
Text("Title")
.font(.title)
Text("Content")
.font(.body)
}
.frame(
width: geometryProxy.size.width,
height: geometryProxy.size.height,
alignment: .topLeading
)
}
.background(Color.red)
}
}
5。使用overlay(_:alignment:)方法
如果您想将您的VStack 与现有全尺寸View 之上的前导约束对齐，您可以使用overlay(_:alignment:) 方法：
struct ContentView: View {
var body: some View {
Color.red
.frame(
maxWidth: .infinity,
maxHeight: .infinity
)
.overlay(
VStack(alignment: .leading) {
Text("Title")
.font(.title)
Text("Content")
.font(.body)
},
alignment: .topLeading
)
}
}
显示：