如何在iPad端SwiftUI中设置Navigation Link避免导航按钮出现在侧边栏

问题根因 #

iPadOS 默认会对SwiftUI的导航组件做自动适配，将NavigationView/NavigationStack切换为分栏样式，根视图的导航跳转默认会被归类到侧边栏区域，导致点击无响应或跳转逻辑不符合预期。

实现步骤 #

• 显式指定导航视图为栈式样式，关闭iPadOS的自动分栏适配，即可让导航跳转逻辑和iPhone端保持一致，不同系统版本的实现代码如下：

  // MARK: iOS 16+ 推荐写法（使用NavigationStack）
  @main
  struct YourApp: App {
      var body: some Scene {
          WindowGroup {
              NavigationStack {
                  WelcomeView()
                      // 隐藏欢迎页导航栏，符合需求
                      .toolbar(.hidden, for: .navigationBar)
              }
          }
      }
  }
  
  // MARK: 兼容iOS 15及更低版本写法（使用NavigationView）
  @main
  struct YourApp: App {
      var body: some Scene {
          WindowGroup {
              NavigationView {
                  WelcomeView()
                      .navigationBarHidden(true)
              }
              // 关键配置：强制使用栈式导航，禁止iPad自动切换为分栏侧边栏样式
              .navigationViewStyle(.stack)
          }
      }
  }
  

• 欢迎页内的跳转逻辑直接使用常规NavigationLink即可，无需额外配置，点击后会正常推入对应页面，不会被收纳到侧边栏：

  struct WelcomeView: View {
      var body: some View {
          VStack(spacing: 30) {
              // 此处放置欢迎页logo、slogan等自定义内容
              NavigationLink("登录") {
                  LoginView() // 你的登录页实现
              }
              NavigationLink("注册") {
                  RegisterView() // 你的注册页实现
              }
          }
          .padding()
      }
  }
  

• 注意不要在欢迎页层级同时混用NavigationStack和NavigationSplitView，否则会强制触发iPad的分栏逻辑，导致导航异常。
• 若登录完成后需要切换到带侧边栏的分栏导航主界面，直接在登录成功回调中替换根视图即可，两套导航逻辑互不干扰。

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