SwiftUI中如何根据Picker选择跳转至不同视图？

方法一：使用NavigationStack路径绑定 + navigationDestination #

这是SwiftUI 4+推荐的现代导航方式，通过绑定导航路径并定义视图映射关系实现跳转。

修改后的完整代码：

import SwiftUI

struct PickerViews: View {
    @State var selectedView = 0
    @State private var navigationPath = NavigationPath()
    
    var body: some View {
        NavigationStack(path: $navigationPath) {
            Picker(selection: $selectedView, label: Text("Picko")){
                Text("View1")
                    .tag(0)
                Text("View2")
                    .tag(1)
                Text("View3")
                    .tag(2)
            }
            .pickerStyle(SegmentedPickerStyle())
            .navigationTitle("Picker")
            // 监听Picker选择变化，将选中标签加入导航路径
            .onChange(of: selectedView) { newValue in
                navigationPath.append(newValue)
            }
            // 定义标签与目标视图的对应关系
            .navigationDestination(for: Int.self) { tag in
                switch tag {
                case 0: View1()
                case 1: View2()
                case 2: View3()
                default: Text("未知视图")
                }
            }
        }
    }
}

struct View1: View {
    var body: some View {
        Text("View1")
            .navigationTitle("View1")
    }
}

struct View2: View {
    var body: some View {
        Text("View2")
            .navigationTitle("View2")
    }
}

struct View3: View {
    var body: some View {
        Text("View3")
            .navigationTitle("View3")
    }
}

方法二：通过.onChange触发NavigationLink激活状态 #

如果你习惯传统的导航链接控制逻辑，可以用状态变量控制隐藏的NavigationLink是否激活：

修改后的完整代码：

import SwiftUI

struct PickerViews: View {
    @State var selectedView = 0
    @State private var isNavigating = false
    
    var body: some View {
        NavigationStack {
            Picker(selection: $selectedView, label: Text("Picko")){
                Text("View1")
                    .tag(0)
                Text("View2")
                    .tag(1)
                Text("View3")
                    .tag(2)
            }
            .pickerStyle(SegmentedPickerStyle())
            .navigationTitle("Picker")
            // 选中项变化时触发导航
            .onChange(of: selectedView) { _ in
                isNavigating = true
            }
            // 隐藏的导航链接，通过isActive控制跳转
            NavigationLink(
                destination: destinationView(),
                isActive: $isNavigating,
                label: { EmptyView() }
            )
        }
    }
    
    // 根据选中标签返回对应视图
    private func destinationView() -> some View {
        switch selectedView {
        case 0: View1()
        case 1: View2()
        case 2: View3()
        default: Text("未知视图")
        }
    }
}

struct View1: View {
    var body: some View {
        Text("View1")
            .navigationTitle("View1")
    }
}

struct View2: View {
    var body: some View {
        Text("View2")
            .navigationTitle("View2")
    }
}

struct View3: View {
    var body: some View {
        Text("View3")
            .navigationTitle("View3")
    }
}

补充说明 #

• 方法一更适合复杂导航场景，支持多级跳转、栈管理等操作，符合SwiftUI最新设计理念。
• 方法二更贴近早期SwiftUI导航逻辑，适合简单的单级跳转需求。

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