尝试使用下面选项的.frame修饰符:

.frame(
      minWidth: 0,
      maxWidth: .infinity,
      minHeight: 0,
      maxHeight: .infinity,
      alignment: .topLeading
    )

struct ContentView: View {
  var body: some View {
    VStack(alignment: .leading) {
      Text("Hello World")
        .font(.title)
      Text("Another")
        .font(.body)
      Spacer()
    }
    .frame(
      minWidth: 0,
      maxWidth: .infinity,
      minHeight: 0,
      maxHeight: .infinity,
      alignment: .topLeading
    )
    .background(Color.red)
  }
}

这被描述为一个灵活的框架(请参阅文档)，它将拉伸以填充整个屏幕，当它有额外的空间时，它将在其中居中其内容。

你可以通过使用几何阅读器来实现

GeometryReader

代码:

struct ContentView : View {
    var body: some View {
        GeometryReader { geometry in
            VStack {
               Text("Turtle Rock").frame(width: geometry.size.width, height: geometry.size.height, alignment: .topLeading).background(Color.red)
            }
        }
    }
}

你的输出如下:

只需添加颜色。清除到VStack的底部，就这么简单:)

struct ContentView: View {
   var body: some View {
     VStack(alignment: .leading) {
       Text("Title")

       Color.clear
     }
     .background(Color.red)
   }
 }

在Swift 5.2和iOS 13.4中，根据你的需要，你可以使用下面的例子之一来对齐你的VStack与顶部领先约束和全尺寸框架。

请注意，下面的代码片段都产生相同的显示，但不能保证VStack的有效帧或调试视图层次结构时可能出现的View元素的数量。

1. 使用frame(minWidth:idealWidth:maxWidth:minHeight:idealHeight:maxHeight:alignment:)方法

最简单的方法是设置你的VStack的帧的最大宽度和高度，并在帧中传递所需的对齐(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. 使用间隔来强制对齐

你可以将你的VStack嵌入到一个完整大小的HStack中，并使用尾部和底部间隔来强制你的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和一个全尺寸的背景视图

这个例子展示了如何将你的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有以下声明:

容器视图，将其内容定义为其自身大小和坐标空间的函数。[…这个视图返回一个灵活的首选大小给它的父布局。

下面的代码片段展示了如何使用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，你可以使用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
            )
    }

}

显示:

有更好的办法!

为了让VStack填充它的父文件的宽度，你可以使用一个几何阅读器并设置框架。(.relativeWidth(1.0)应该工作，但显然不是现在)

struct ContentView : View {
    var body: some View {
        GeometryReader { geometry in
            VStack {
                Text("test")
            }
                .frame(width: geometry.size.width,
                       height: nil,
                       alignment: .topLeading)
        }
    }
}

为了让VStack成为实际屏幕的宽度，你可以在设置框架时使用uisscreen .main.bounds.width，而不是使用GeometryReader，但我猜你可能想要父视图的宽度。

此外，这种方式有一个额外的好处，就是不需要在VStack中添加空格，如果你添加了一个带有Spacer()的HStack，因为它是VStack的内容，这可能会发生(如果你有空格)。

更新-没有更好的方法了!

在检查了被接受的答案后，我意识到被接受的答案实际上是行不通的!乍一看，它似乎工作，但如果你更新VStack有一个绿色背景，你会注意到VStack仍然是相同的宽度。

struct ContentView : View {
    var body: some View {
        NavigationView {
            VStack(alignment: .leading) {
                Text("Hello World")
                    .font(.title)
                Text("Another")
                    .font(.body)
                Spacer()
                }
                .background(Color.green)
                .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .topLeading)
                .background(Color.red)
        }
    }
}

这是因为.frame(…)实际上是在向视图层次结构中添加另一个视图，而该视图最终会填满屏幕。然而，VStack仍然没有。

这个问题在我的回答中似乎也一样，可以使用与上面相同的方法进行检查(在.frame(…)之前和之后放置不同的背景颜色。看起来实际上扩大VStack的唯一方法是使用间隔器:

struct ContentView : View {
    var body: some View {
        VStack(alignment: .leading) {
            HStack{
                Text("Title")
                    .font(.title)
                Spacer()
            }
            Text("Content")
                .lineLimit(nil)
                .font(.body)
            Spacer()
        }
            .background(Color.green)
    }
}

另一种可行且可能更直观的堆放方式如下:

struct ContentView: View {
    var body: some View {
        HStack() {
            VStack(alignment: .leading) {
                Text("Hello World")
                    .font(.title)
                Text("Another")
                    .font(.body)
                Spacer()
            }
            Spacer()
        }.background(Color.red)
    }
}

如果需要，还可以通过删除Spacer()来轻松地重新定位内容。