SwiftUI中iPad端Spacer导致元素被推出屏幕的问题

问题原因 #

iPad与iPhone的屏幕宽高比差异明显，你的外层VStack未明确声明填充整个可用高度，导致Spacer的拉伸行为超出预期，将内容推出屏幕。iPhone因高度足够，布局表现正常，但iPad的宽屏特性让未约束高度的VStack无法合理分配空间。

修复方案 #

给外层VStack添加frame(maxHeight: .infinity)，强制它填充ZStack的整个高度，这样Spacer会在顶部欢迎区域和底部按钮区域之间合理分配剩余空间：

struct WelcomeView: View {
    @State private var showSignIn = false
    @ObservedObject var appState: AppState

    init(appState: AppState) {
        self.appState = appState
    }

    var body: some View {
        ZStack {
            Image("bkgphoto")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .edgesIgnoringSafeArea(.all)
        
            VStack(spacing: 30) {
                VStack(spacing: 0) {
                    Text("WELCOME TO")
                        .foregroundColor(.white)
                    Image("logo")
                        .padding(.top, 10)
                }
                .padding(.top, 60)
                
                Spacer()
                
                VStack(spacing: 16) {
                    Button(action: {
                        // Sign up action
                    }) {
                        Text("SIGN UP")
                            .foregroundColor(.white)
                            .frame(maxWidth: .infinity)
                            .padding(.vertical, 12)
                            .background(Color.black)
                            .cornerRadius(4)
                    }
                    
                    Button(action: {
                        showSignIn = true
                    }) {
                        Text("SIGN IN")
                            .foregroundColor(.white)
                            .frame(maxWidth: .infinity)
                            .padding(.vertical, 12)
                            .background(Color.black)
                            .cornerRadius(4)
                    }
                    .fullScreenCover(isPresented: $showSignIn, onDismiss: {
                        appState.checkAuthenticationStatus()
                    }) {
                        SignInView()
                            .environmentObject(appState)
                    }
                    
                    VStack {
                        Text("By continuing, you agree to our ") +
                            Text("Terms of Service").fontWeight(.bold).underline() +
                            Text(" and acknowledge that you have read our ") +
                            Text("Privacy Policy").fontWeight(.bold).underline() +
                            Text(".")
                    }
                    .foregroundColor(.black)
                    .multilineTextAlignment(.center)
                }
                .padding(.horizontal, 20)
                .padding(.bottom, 40)
            }
            .padding(.top, 40)
            .frame(maxHeight: .infinity) // 关键修复：强制VStack占满可用高度
        }
    }
}

补充说明 #

如果希望更贴合设备安全区域，也可将外层VStack的padding(.top,40)替换为padding(.top, UIApplication.shared.windows.first?.safeAreaInsets.top ?? 40)，但通常frame(maxHeight: .infinity)已能解决跨设备布局问题，让Spacer在iPhone和iPad上的行为保持一致。

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