SwiftUI注册后页面跳转异常求助：跳转失败或自动返回

问题场景 #

开发用户登录应用，支持邮箱未关联活跃账号时注册新账号。点击注册按钮后，本该跳转至收集姓名、年龄的UserProfile视图，但存在跳转失败或跳转后自动返回注册视图的问题；同时NavigationView中出现未知空白页面（如图）。

现有登录视图代码 #

@State var email: String = ""
@State var password: String = ""
@State var UserProfileActive = false
 NavigationView{
 Button(action:
            { if email != "" && password != ""{
                    Auth.auth().createUser(withEmail: email, password: password){authResult, error in
                            if let e = error{
                                 print(e)
                            }
                          //successfully register.     
                          else{
                           //Here I should transition to UserProfile() View
                                 UserProfileActive = true
                                        NavigationLink(destination: UserProfile(), isActive: $UserProfileActive) {
                                             EmptyView()
                                        }
                                    }
                                }
                                
                            }}
                    ) {
                        SIGNUP()
                    }
}

异常页面截图 #

问题分析与修复方案 #

1. 跳转失败/自动返回问题 #

• 问题根源：NavigationLink被放在了按钮的异步回调中，SwiftUI要求视图必须在初始视图层级中声明，动态在闭包内创建的视图无法被正确纳入视图树，触发导航后也会因视图刷新被销毁，导致自动返回。
• 修复方案：
  将NavigationLink移出异步回调，直接放在NavigationView的视图层级中，仅通过修改状态变量触发导航。修正后代码示例：

  @State var email: String = ""
  @State var password: String = ""
  @State var userProfileActive = false // 遵循Swift变量名小写开头规范
  
  var body: some View {
      NavigationView {
          VStack {
              // 此处放置邮箱、密码输入框
              Button(action: {
                  guard !email.isEmpty, !password.isEmpty else { return }
                  Auth.auth().createUser(withEmail: email, password: password) { authResult, error in
                      if let e = error {
                          print(e)
                      } else {
                          self.userProfileActive = true
                      }
                  }
              }) {
                  SIGNUP()
              }
  
              // 固定声明NavigationLink，用状态变量控制激活状态
              NavigationLink(destination: UserProfile(), isActive: $userProfileActive) {
                  EmptyView()
              }
          }
      }
  }
  

2. NavigationView未知空白页面问题 #

• 问题根源：iOS 16+中NavigationView已被NavigationStack替代，旧API在视图结构不规范时易出现空白页；另外直接在NavigationView内放置按钮，未用容器视图（如VStack）填充，也会导致布局异常产生空白区域。
• 修复方案：
  • 若适配iOS 16+，直接替换NavigationView为NavigationStack；
  • 确保NavigationView内的内容用VStack/HStack等容器包裹，填充整个视图空间。

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