SwiftUI中NavigationView嵌套ScrollView时顶部出现空白的问题排查

这个问题我太熟了！你遇到的顶部空白，其实是NavigationView默认的导航栏预留空间在作祟——哪怕你没写任何导航栏相关的代码，它也会自动给顶部留一块位置，和ScrollView结合的时候就会显露出这块空白。

给你两个最常用的解决办法，按需选就行：

方法一：直接隐藏导航栏 #

如果你的页面不需要导航栏，直接给NavigationView内部的内容加上.navigationBarHidden(true)（iOS16及以上推荐用.toolbar(.hidden, for: .navigationBar)，兼容性更好）。修改后的代码如下：

struct SignUpView: View {
    @State var username: String = ""
    @State var email: String = ""
    @State var password: String = ""
    @State var confrim_password = ""
    
    var body: some View {
        NavigationView {
            ScrollView {
                VStack {
                    Image("logo_transparent").resizable().scaledToFit()
                        .frame(width: 200, height: 200, alignment: .top)
                    Text("Sign up")
                        .bold()
                        .font(.system(size: 40))
                    TextField("Usename", text: $username)
                        .frame(height: 45)
                        .textFieldStyle(PlainTextFieldStyle())
                        .padding([.horizontal], 4)
                        .cornerRadius(16)
                        .overlay(RoundedRectangle(cornerRadius: 16).stroke(Color.gray))
                        .padding([.horizontal], 24)
                    TextField("Email", text: $email)
                        .frame(height: 45)
                        .textFieldStyle(PlainTextFieldStyle())
                        .padding([.horizontal], 4)
                        .cornerRadius(16)
                        .overlay(RoundedRectangle(cornerRadius: 16).stroke(Color.gray))
                        .padding([.horizontal], 24)
                        .padding(.top, 13)
                    SecureField("Password", text: $password)
                        .frame(height: 45)
                        .textFieldStyle(PlainTextFieldStyle())
                        .padding([.horizontal], 4)
                        .cornerRadius(16)
                        .overlay(RoundedRectangle(cornerRadius: 16).stroke(Color.gray))
                        .padding([.horizontal], 24)
                        .padding(.top, 13)
                    SecureField("Confirm Password", text: $confrim_password)
                        .frame(height: 45)
                        .textFieldStyle(PlainTextFieldStyle())
                        .padding([.horizontal], 4)
                        .cornerRadius(16)
                        .overlay(RoundedRectangle(cornerRadius: 16).stroke(Color.gray))
                        .padding([.horizontal], 24)
                        .padding(.top, 13)
                        .padding(.bottom, 25)
                    Text("Sign up")
                        .bold()
                        .font(.system(size: 25))
                        .foregroundColor(.white)
                        .padding()
                        .frame(width: 220, height: 50)
                        .background(Color.blue)
                        .cornerRadius(40)
                    NavigationLink(destination: LoginView().navigationBarHidden(true)) {
                        Text("Already have an account? Sing in")
                            .bold()
                            .font(.system(size: 20))
                            .padding(.bottom, 300)
                    }
                    .padding(.top, 20)
                }
            }
            // 重点：添加这行隐藏导航栏
            .navigationBarHidden(true)
            // iOS16+ 推荐用下面这行替代上面的
            // .toolbar(.hidden, for: .navigationBar)
        }
    }
}

struct SignUpView_Previews: PreviewProvider {
    static var previews: some View {
        SignUpView()
    }
}

方法二：让ScrollView忽略顶部安全区域 #

如果之后可能需要显示导航栏，只是现在想去掉空白，可以让ScrollView忽略顶部的安全区域约束，这样它会顶到屏幕最上方：

ScrollView {
    // 原VStack内容
}
.edgesIgnoringSafeArea(.top)

不过这个方法要注意，后续如果添加导航栏，可能需要再调整布局，避免内容被导航栏遮挡。

简单总结下：NavigationView默认会为导航栏预留高度，ScrollView默认会遵守这个布局，所以就出现了顶部空白。用上面两种方法就能轻松解决啦！

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