如何通过NavigationLink实现按钮点击及变量值驱动的多视图导航？

一、点击按钮跳转至不同视图 #

方式1：自定义按钮 + 隐藏NavigationLink（灵活控制按钮样式） #

适合需要自定义按钮外观的场景，通过状态变量控制导航触发：

import SwiftUI

struct ContentView: View {
    @State private var goToViewA = false
    @State private var goToViewB = false
    
    var body: some View {
        NavigationStack {
            VStack(spacing: 20) {
                // 自定义样式的按钮
                Button("前往视图A") {
                    goToViewA = true
                }
                .padding()
                .background(Color.blue)
                .foregroundColor(.white)
                .cornerRadius(8)
                
                Button("前往视图B") {
                    goToViewB = true
                }
                .padding()
                .background(Color.green)
                .foregroundColor(.white)
                .cornerRadius(8)
                
                // 隐藏的NavigationLink，通过状态变量控制跳转
                NavigationLink(destination: ViewA(), isActive: $goToViewA) {
                    EmptyView()
                }
                NavigationLink(destination: ViewB(), isActive: $goToViewB) {
                    EmptyView()
                }
            }
            .navigationTitle("首页")
        }
    }
}

// 目标视图示例
struct ViewA: View {
    var body: some View {
        Text("视图A内容")
            .navigationTitle("视图A")
    }
}

struct ViewB: View {
    var body: some View {
        Text("视图B内容")
            .navigationTitle("视图B")
    }
}

方式2：直接使用NavigationLink作为按钮（简洁快速） #

如果不需要复杂按钮样式，直接用NavigationLink自带的按钮样式即可：

NavigationStack {
    VStack(spacing: 20) {
        NavigationLink("前往视图A", destination: ViewA())
            .buttonStyle(.borderedProminent)
        
        NavigationLink("前往视图B", destination: ViewB())
            .buttonStyle(.bordered)
    }
    .navigationTitle("首页")
}

二、根据变量值导航至对应视图 #

iOS 16+ 推荐写法：使用navigationDestination #

利用navigationDestination绑定变量，自动匹配对应视图，代码更简洁：

import SwiftUI

struct ContentView: View {
    // 定义枚举标记目标视图类型
    enum TargetView {
        case viewA, viewB, viewC
    }
    
    @State private var selectedTarget: TargetView?
    
    var body: some View {
        NavigationStack {
            VStack(spacing: 20) {
                Button("随机跳转视图") {
                    // 模拟变量值变化，这里随机选择目标视图
                    selectedTarget = [.viewA, .viewB, .viewC].randomElement()
                }
                .buttonStyle(.borderedProminent)
            }
            .navigationTitle("首页")
            // 根据变量值匹配对应的导航目标
            .navigationDestination(item: $selectedTarget) { target in
                switch target {
                case .viewA:
                    ViewA()
                case .viewB:
                    ViewB()
                case .viewC:
                    ViewC()
                }
            }
        }
    }
}

// 新增视图C示例
struct ViewC: View {
    var body: some View {
        Text("视图C内容")
            .navigationTitle("视图C")
    }
}

iOS 15及以下兼容写法：隐藏NavigationLink + 计算属性 #

通过计算属性根据变量值返回目标视图，配合状态变量控制跳转：

import SwiftUI

struct ContentView: View {
    enum TargetView {
        case viewA, viewB, viewC
    }
    
    @State private var selectedTarget: TargetView?
    @State private var isNavigating = false
    
    var body: some View {
        NavigationView {
            VStack(spacing: 20) {
                Button("随机跳转视图") {
                    selectedTarget = [.viewA, .viewB, .viewC].randomElement()
                    isNavigating = true
                }
                .buttonStyle(.borderedProminent)
                
                // 隐藏的NavigationLink，指向计算出的目标视图
                NavigationLink(
                    destination: targetView,
                    isActive: $isNavigating
                ) {
                    EmptyView()
                }
            }
            .navigationTitle("首页")
        }
    }
    
    // 根据变量值返回对应视图
    private var targetView: some View {
        switch selectedTarget {
        case .viewA:
            ViewA()
        case .viewB:
            ViewB()
        case .viewC:
            ViewC()
        case nil:
            Text("无效目标")
                .navigationTitle("错误")
        }
    }
}

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