SwiftUI中点击按钮切换NavigationView页面的实现方法

核心要点 #

• 所有需导航跳转的页面必须嵌套在NavigationStack（iOS 16+）或NavigationView（iOS 13-15）中，否则NavigationLink无法生效。
• 导航容器既可以放在ContentView中作为根视图，也可以在APP入口结构中配置，推荐后者统一管理整个APP的导航上下文。

修改后的代码示例（iOS 16+） #

import SwiftUI

// 第一个引导页面
struct Acquaintance1: View {
    // 编程式导航状态变量（替代直接嵌套NavigationLink的可选方案）
    @State private var navigateToView1_1 = false
    
    var body: some View {
        NavigationStack {
            ZStack {
                // 背景图
                Image("scren1")
                    .resizable()
                    .scaledToFill()
                    .ignoresSafeArea()
                
                // 跳转按钮
                Button {
                    // 触发触觉反馈
                    let impactMed = UIImpactFeedbackGenerator(style: .heavy)
                    impactMed.impactOccurred()
                    // 触发页面跳转
                    navigateToView1_1 = true
                } label: {
                    Image(systemName: "arrow.right.square.fill")
                        .font(.system(size: 50))
                        .foregroundColor(.orange)
                        .position(x: 349, y: 621)
                }
                // 绑定编程式导航
                .navigationDestination(isPresented: $navigateToView1_1) {
                    View1_1()
                }
            }
            // 隐藏默认导航栏（根据需求选择）
            .navigationBarHidden(true)
        }
    }
}

// 第二个页面
struct View1_1: View {
    var body: some View {
        NavigationStack {
            NavigationLink("跳转到View1_2", destination: View1_2())
                .navigationTitle("View1_1")
        }
    }
}

// 第三个页面
struct View1_2: View {
    var body: some View {
        Text("最后一页")
            .navigationTitle("View1_2")
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        Acquaintance1()
    }
}

代码说明 #

1. 导航容器配置：在Acquaintance1中添加NavigationStack，确保页面处于导航上下文内。iOS 15及以下版本可替换为NavigationView。
2. 跳转实现方式：
   • 示例用了编程式导航（通过@State变量控制navigationDestination），更灵活适配复杂逻辑。
   • 也可以直接用NavigationLink包裹按钮，简化写法：

     NavigationLink(destination: View1_1()) {
         Image(systemName: "arrow.right.square.fill")
             .font(.system(size: 50))
             .foregroundColor(.orange)
             .position(x: 349, y: 621)
     }
     

3. 触觉反馈保留：保留了你原本的震动触发逻辑，不影响跳转功能。

结构选择建议 #

• 简单APP：直接在ContentView中放置NavigationStack，将Acquaintance1作为根视图即可，代码简洁易维护。
• 复杂APP：建议在APP入口文件中配置导航容器，示例如下：

  @main
  struct YourApp: App {
      var body: some Scene {
          WindowGroup {
              NavigationStack {
                  Acquaintance1()
              }
          }
      }
  }
  

  这样所有子页面自动继承导航上下文，无需在每个页面重复添加导航容器。

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