SwiftUI布局问题：如何让VStack1居中、VStack2置于屏幕底部？

你只需要调整外层VStack的结构，通过添加Spacer()分配垂直空间就能实现需求，同时修复背景图片的溢出问题，具体修改如下：

修改后的完整代码 #

import SwiftUI
struct ContentView: View {

    @State private var email: String = ""
    @State private var passord: String = ""
    var body: some View {
        
        ZStack {
            Image("corner")
                .resizable()
                .scaledToFill()
                .edgesIgnoringSafeArea(.all) // 让图片延伸到安全区外
                .clipped() // 裁剪超出屏幕的部分
            
            VStack {
                Spacer() // 填充顶部空间，将VStack1向下推
                
                VStack  { //VStack1
                    
                    TextField("Email", text: $email)
                        .frame(width: 300, height: 40)
                        .textFieldStyle(.roundedBorder)
                        .bold(true)
                    SecureField("Password", text: $passord)
                        .frame(width: 300, height: 40)
                        .textFieldStyle(.roundedBorder)
                        .bold(true)
                    Button {
                        //Do something
                    } label: {
                        Text("Forgot your password ?")
                            .underline()
                            .foregroundColor(.white)
                    }
                }
                
                Spacer() // 填充VStack1与VStack2之间的空间，将VStack2推至底部
                
                VStack { // VStack2
                    Text("Not registered ?")
                        .font(.title2)
                        .foregroundColor(.white)
                    Button("Sign up") {}
                        .frame(width: 200, height: 37)
                        .foregroundColor(.white)
                        .background(Color(.orange))
                        .cornerRadius(20)
                }
                .padding(.bottom, 20) // 给底部添加内边距，避免紧贴屏幕边缘
            }
        }
    }
}

关键调整说明 #

• 两个Spacer()会自动填充垂直方向的剩余空间，让VStack1处于屏幕垂直居中位置，同时把VStack2挤压到屏幕底部。
• 给背景图片添加.edgesIgnoringSafeArea(.all)和.clipped()，解决图片超出屏幕显示范围的问题。
• 给VStack2添加.padding(.bottom, 20)，避免注册按钮紧贴屏幕底部，提升视觉体验。

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