SwiftUI Picker通过NavigationLink跳转后无法更改选中值？

问题现象 #

编写的ExampleView在预览中运行正常，但通过ParentView里的NavigationLink跳转进入后，分段Picker出现冻结：点击其他选项无法更改selectedTab的值，视图也不会切换，视觉上默认选项始终保持选中状态。使用.onChange监听selectedTab也没有输出，说明状态完全没有更新。

相关代码 #

ExampleView代码 #

import SwiftUI

struct ExampleView: View {
    @State private var selectedTab: String = "tab1"

    var body: some View {
        VStack {
            Picker("Mode", selection: $selectedTab) {
                Text("tab1").tag("tab1")
                Text("tab2").tag("tab2")
                Text("tab3").tag("tab3")
            }
            .pickerStyle(.segmented)
            .padding([.horizontal, .top])
        
            Form {
                switch selectedTab {
                    case "tab1":
                        TabOneView()
                    case "tab2":
                        TabTwoView()
                    case "tab3":
                        TabThreeView()
                    default:
                        TabOneView()
                }
            }
        }
        .navigationTitle("Title")
        .navigationBarTitleDisplayMode(.inline)
    }
}

ParentView代码 #

struct ParentView: View {
    var body: some View {
        Form {
            // some other code
        
            Section(header: Text("SUBVIEWS")) {
                NavigationLink {
                    ExampleView()
                } label: {
                    Text("Example")
                }
                NavigationLink {
                    Example2View()
                } label: {
                    Text("Example2")
                }
            }
        }
        .navigationTitle("ParentView")
        .navigationBarTitleDisplayMode(.inline)
    }
}

问题原因 #

这是由于视图层级冲突导致的：

1. 跳转后的ExampleView用VStack嵌套了Picker和Form，而Form本质是带样式的ScrollView，会拦截上层视图的手势事件，导致Picker的点击无法触发状态更新。
2. 旧版NavigationView（iOS15及以下）与这种嵌套结构组合时，更容易出现手势传递的异常。

解决方案 #

方案1：将Picker移入Form内部（推荐） #

把Picker放到Form的Section中，避免层级冲突：

import SwiftUI

struct ExampleView: View {
    @State private var selectedTab: String = "tab1"

    var body: some View {
        Form {
            // 将Picker放到Form的Section里
            Section {
                Picker("Mode", selection: $selectedTab) {
                    Text("tab1").tag("tab1")
                    Text("tab2").tag("tab2")
                    Text("tab3").tag("tab3")
                }
                .pickerStyle(.segmented)
            }
            
            // 原内容Section
            Section {
                switch selectedTab {
                    case "tab1":
                        TabOneView()
                    case "tab2":
                        TabTwoView()
                    case "tab3":
                        TabThreeView()
                    default:
                        TabOneView()
                }
            }
        }
        .navigationTitle("Title")
        .navigationBarTitleDisplayMode(.inline)
    }
}

方案2：使用NavigationStack（iOS16+） #

如果需要保留原视图结构，可在父视图中使用新版NavigationStack替代旧的导航容器，修复手势传递问题：

struct ParentView: View {
    var body: some View {
        NavigationStack { // 添加NavigationStack
            Form {
                // some other code
            
                Section(header: Text("SUBVIEWS")) {
                    NavigationLink {
                        ExampleView()
                    } label: {
                        Text("Example")
                    }
                    NavigationLink {
                        Example2View()
                    } label: {
                        Text("Example2")
                    }
                }
            }
            .navigationTitle("ParentView")
            .navigationBarTitleDisplayMode(.inline)
        }
    }
}

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