SwiftUI中如何将文本对齐到屏幕顶部？

你的问题在于默认情况下，VStack仅会包裹自身内容的高度，并且在父容器中居中显示。单纯将其放入设置了.top对齐的ZStack无法生效，因为ZStack默认也会适应内部内容的尺寸，不会自动占满整个屏幕空间。

以下是两种可行的解决方法：

方法一：让VStack占满垂直空间并设置顶部对齐 #

通过给VStack添加frame(maxHeight: .infinity, alignment: .top)修饰符，使其占据所有可用的垂直空间，同时将内部内容对齐到顶部：

import SwiftUI

struct RegisterSignInScreen: View {
    var body: 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)
        }
        .frame(maxHeight: .infinity, alignment: .top)
    }
}

struct RegisterSignInScreen_Previews: PreviewProvider {
    static var previews: some View {
        RegisterSignInScreen()
    }
}

方法二：使用Spacer将内容推至顶部 #

在VStack的末尾添加Spacer()，它会自动占据剩余的垂直空间，从而把上方的文本内容推到屏幕顶部：

import SwiftUI

struct RegisterSignInScreen: View {
    var body: 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)
            
            Spacer()
        }
    }
}

struct RegisterSignInScreen_Previews: PreviewProvider {
    static var previews: some View {
        RegisterSignInScreen()
    }
}

两种方法都能实现文本对齐到屏幕顶部的效果，你可以根据自己的布局需求选择使用。

内容的提问来源于stack exchange，提问作者Moies Bautista