要了解为什么会发生这种情况，您可以向VStack或ZStack添加背景

ZStack {
  VStack {
    //Text items
  }
}
.background(.red)

您将注意到（可能意想不到）的是，堆栈只有包含文本项所需的大小。
当您向堆栈添加对齐方式时，它会将堆栈中的内容与相对较小堆栈的指定边缘对齐。它不会将堆栈与屏幕边缘对齐，也不会更改堆栈的大小。您实际上要做的是对齐堆栈，而不是对齐内容。
为了与屏幕顶部对齐，您可以使堆栈填充屏幕的整个高度。通过在VStack底部添加一个Spacer()，它将填充剩余的垂直空间，并将内容向上推，或者将一个frame与.infinitymaxHeight:以及顶部对齐的内容应用到VStack。

VStack {
    Text("Hello World!")
    Spacer()
}

VStack {
    Text("Hello World!")
}
.frame(maxHeight: .infinity, alignment: .top)

或者，如果视图需要，您可以对包含文本堆栈的第二个堆栈执行类似的操作，如下所示：

var body: some View {
    VStack {
        welcomeText
        Spacer()
    }
}

var welcomeText: some View {
    VStack {
        Text("Welcome Back!")
            .font(.title)
            .fontWeight(.bold)
            .multilineTextAlignment(.center)
            .padding(.bottom, 5.0)
        
        
        Text("Please sign in to your account")
            .font(.subheadline)
            .fontWeight(.bold)
            .foregroundColor(Color.gray)
            .multilineTextAlignment(.center)
    }
}

您可以通过几种方式来实现这一点，但最明显的方式是在VStack的底部添加一个Spacer()
就像这样：

struct RegisterSignInScreen: View {
    var body: some View {
        VStack {
            Text("Welcome Back!")    
            Text("Please sign in to your account")

            Spacer() // <- HERE
        }
    }
}

这将把VStack中的内容推到顶部。
或者，您可以添加框架修饰符，强制VStack高度，然后使用.frame添加对齐方式

struct RegisterSignInScreen: View {
    var body: some View {
        VStack {
            Text("Welcome Back!")
            Text("Please sign in to your account")
        }
        .frame(maxHeight: .infinity, alignment: .top) // <- HERE
    }
}

ZStack(alignment: .top)的工作原理，但和你想的不一样）
努力做到：

ZStack(alignment: .top){ 

}
.background(Color.green)

你就会明白为什么会这样：）
你需要使用间隔：）

VStack {
    YourView()
    Spacer()
}