SwiftUI中Picker与Form组件异常问题求助

嘿，我仔细看了你的代码和遇到的问题，这俩都是早期SwiftUI版本（Xcode 11.3）里的典型坑，再加上代码里的导航结构问题导致的，下面给你拆解原因和具体的修复方案：

问题b：切换Action后出现空白界面（核心原因：NavigationView嵌套混乱） #

你现在的代码里嵌套了好几个NavigationView：ContentView的每个Tab项里都有自己的NavigationView，CreateFirewallPolicyView作为跳转目标又被包在父级导航里。早期SwiftUI对嵌套导航视图的支持特别差，当你切换Action触发字段显示/隐藏时，视图重建会把导航栈搞乱，直接就出现空白界面了。

修复方案：只保留最外层的一个NavigationView
把多余的导航视图都删掉，让整个App的导航结构保持单一层级：

1. 修改ContentView，把NavigationView移到TabView外面：

struct ContentView: View {
    @State var selectedTab = 1
    var body: some View {
        NavigationView { // 最外层只保留一个导航视图
            TabView(selection: $selectedTab){
                CreateView(selectedTab: $selectedTab)
                    .tabItem {
                        Image(systemName: "plus")
                        Text("Create")
                    }.tag(0)
                ListView()
                    .tabItem {
                        Image(systemName: "cloud")
                        Text("List")
                    }.tag(1)
            }
            .navigationBarTitle("My virtual datacenter")
        }
    }
}

2. 移除CreateView里的NavigationView：

struct CreateView: View {
    @Binding var selectedTab: Int
    var body: some View {
        List{
            Text("Server")
            NavigationLink(destination: CreateFirewallPolicyView(selectedTab: $selectedTab)){
                Text("Firewall Policy")
            }
        }
        .navigationBarTitle("Select the element you want to create", displayMode: .inline)
    }
}

3. 移除ListView里的NavigationView：

struct ListView: View {
    var body: some View {
        List{
            Section(header: Text("Servers")){
                Text("Server 1")
                Text("Server 2")
            }
            Section(header: Text("Firewall policies")){
                Text("Firewall 1")
                Text("Firewall 2")
            }
        }
        .navigationBarTitle("My virtual datacenter", displayMode: .large)
    }
}

问题a：Picker无法重复选择值（原因：条件渲染导致Picker状态丢失） #

你把Protocol Picker放在了if selectedAction == .allow的条件块里，当切换Action到Deny再切回Allow时，这个Picker会被完全销毁再重建。早期SwiftUI的Picker在这种场景下会出现绑定失效的问题，导致选值后无法再次修改。

修复方案：避免销毁Picker，用透明度/禁用控制显示
不要直接移除视图，而是用opacity和disabled来控制字段的显示状态，这样Picker的绑定状态会一直保持稳定：

// 把原来的if语句替换成下面的代码
Group {
    TextField("Allowed IP", text: $allowed_ip)
    Picker(selection: $selectedProtocol, label: Text("Protocol")) {
        ForEach(NetworkProtocol.allCases, id:\.self) { fw_protocol in
            Text(fw_protocol.name)
        }
    }
    TextField("Ports", text: $ports)
}
.opacity(selectedAction == .allow ? 1 : 0) // 隐藏但不销毁视图
.disabled(selectedAction != .allow) // 非Allow状态下禁用输入

另外，还可以给Rule结构体显式实现Hashable（虽然自动合成也能用，但显式实现能避免潜在的状态同步问题）：

struct Rule: Codable, Hashable, Identifiable {
    let id: String
    var `protocol`: NetworkProtocol
    var port: String?
    var portFrom: Int?
    var portTo: Int?
    var source: String?
    var description: String?
    var action: RuleAction
    
    // 显式实现Hashable，确保基于唯一ID判断
    func hash(into hasher: inout Hasher) {
        hasher.combine(id)
    }
    
    static func == (lhs: Rule, rhs: Rule) -> Bool {
        return lhs.id == rhs.id
    }
}

额外建议 #

• 尽量升级Xcode到最新版本（至少Xcode 12+），早期SwiftUI的很多Bug在后续版本里都被修复了，能减少很多奇怪的视图问题。
• 在Form里控制字段显示时，优先用opacity/disabled而不是条件语句直接移除视图，这样能保持视图树的稳定性，避免状态丢失。

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