SwiftUI三级联动Picker更新异常问题求助

我是Swift新手，设置了三个层级关联的Picker：

• Picker 1（战争阶段）的选择决定Picker 2（阵营）的可选选项
• Picker 2的选择决定Picker 3（兵力部署图）的可选选项

按顺序选择时各Picker显示正常，但修改Picker 1的选择后，Picker 2的选项会更新，Picker 3却无法同步更新；修改Picker 2的选择时，Picker 3能正常更新。尝试过拆分选项数组、用if else手动控制，结果依旧相同。

原代码 #

import SwiftUI

struct Testing_View: View {

    @State private var warPeriods = ""
    @State private var selectedNation = ""
    @State private var forceDiagram = ""
    
    // 战争阶段选项
    let periods = ["Early War", "Mid-War", "Late War"]
    
    // 阵营选项（按战争阶段分组）
    let nations: [String: [String]] = [
        "Early War": ["Early American", "Early Axis-Allies", "Early British", "Early German", "Early Soviet"],
        "Mid-War": ["Eastern Front", "North Africa"],
        "Late War": ["American", "Axis-Allies", "British", "German", "Soviet"]
    ]
    
    // 兵力部署图选项（按阵营分组）
    let diagrams: [String: [String]] = [
        "Early American" : ["E-Day: American", "EBulge: American"],
        "Early Axis-Allies" : ["EBagration: Axis-Allies"],
        "Early British": ["ED-Day: British", "EBulge: British"],
        "Early German": ["ED-Day: German", "ED-Day: Waffen-SS", "EBagration: German", "EBulge: German", "EBerlin: German"],
        "Early Soviet": ["EBagration: Soviet", "EBerlin: Soviet"],
        "Eastern Front" : ["German: Ghost Panzers", "German: Iron Cross", "Soviet: Enemy at the Gate", "Soviet: Red Banner"],
        "North Africa" : ["British: Armoured Fist", "German: Afrika Korps", "Italian: Avanti", "American: Fighting First"],
        "American" : ["D-Day: American", "Bulge: American"],
        "Axis-Allies" : ["Bagration: Axis-Allies"],
        "British": ["D-Day: British", "Bulge: British"],
        "German": ["D-Day: German", "D-Day: Waffen-SS", "Bagration: German", "Bulge: German", "Berlin: German"],
        "Soviet": ["Bagration: Soviet", "Berlin: Soviet"]
    ]
    
    var body: some View {
        NavigationView {
            Form {
                Picker("Select War Period:", selection: $warPeriods) {
                    ForEach(periods, id: \.self) {
                        Text($0)
                    }
                }
                
                Picker("Select Nation:", selection: $selectedNation) {
                    ForEach(nations[warPeriods] ?? [], id: \.self) { subOption in
                        Text(subOption)
                    }
                }
                
                Picker("Select Force Diagram:", selection: $forceDiagram) {
                    ForEach(diagrams[selectedNation] ?? [], id: \.self) { subSubOption in
                        Text(subSubOption)
                    }
                }
            }
        }
    }
}

#Preview {
    Testing_View()
}

解决方案 #

问题核心 #

修改Picker 1时，selectedNation的旧值可能不在新战争阶段的阵营列表中，且SwiftUI未检测到selectedNation的变化，导致Picker 3的数据源未触发更新；同时初始空字符串也会引发异常。

修复步骤 #

1. 监听Picker 1的变化，重置后续状态：用onChange(of:)监听warPeriods，一旦变化就重置selectedNation和forceDiagram，确保联动层级完全刷新。
2. 设置合理初始值：给三个状态变量设置默认的初始选项，避免空字符串导致的显示问题。

修改后的完整代码 #

import SwiftUI

struct Testing_View: View {

    // 设置初始默认值，对应第一个战争阶段的第一个选项
    @State private var warPeriods = "Early War"
    @State private var selectedNation = "Early American"
    @State private var forceDiagram = "E-Day: American"
    
    // 战争阶段选项
    let periods = ["Early War", "Mid-War", "Late War"]
    
    // 阵营选项（按战争阶段分组）
    let nations: [String: [String]] = [
        "Early War": ["Early American", "Early Axis-Allies", "Early British", "Early German", "Early Soviet"],
        "Mid-War": ["Eastern Front", "North Africa"],
        "Late War": ["American", "Axis-Allies", "British", "German", "Soviet"]
    ]
    
    // 兵力部署图选项（按阵营分组）
    let diagrams: [String: [String]] = [
        "Early American" : ["E-Day: American", "EBulge: American"],
        "Early Axis-Allies" : ["EBagration: Axis-Allies"],
        "Early British": ["ED-Day: British", "EBulge: British"],
        "Early German": ["ED-Day: German", "ED-Day: Waffen-SS", "EBagration: German", "EBulge: German", "EBerlin: German"],
        "Early Soviet": ["EBagration: Soviet", "EBerlin: Soviet"],
        "Eastern Front" : ["German: Ghost Panzers", "German: Iron Cross", "Soviet: Enemy at the Gate", "Soviet: Red Banner"],
        "North Africa" : ["British: Armoured Fist", "German: Afrika Korps", "Italian: Avanti", "American: Fighting First"],
        "American" : ["D-Day: American", "Bulge: American"],
        "Axis-Allies" : ["Bagration: Axis-Allies"],
        "British": ["D-Day: British", "Bulge: British"],
        "German": ["D-Day: German", "D-Day: Waffen-SS", "Bagration: German", "Bulge: German", "Berlin: German"],
        "Soviet": ["Bagration: Soviet", "Berlin: Soviet"]
    ]
    
    var body: some View {
        NavigationView {
            Form {
                Picker("选择战争阶段:", selection: $warPeriods) {
                    ForEach(periods, id: \.self) {
                        Text($0)
                    }
                }
                // 监听战争阶段变化，重置后续选择
                .onChange(of: warPeriods) { newPeriod in
                    // 重置为新战争阶段的第一个阵营（如果存在）
                    selectedNation = nations[newPeriod]?.first ?? ""
                    // 同时重置兵力部署图
                    forceDiagram = diagrams[selectedNation]?.first ?? ""
                }
                
                Picker("选择阵营:", selection: $selectedNation) {
                    ForEach(nations[warPeriods] ?? [], id: \.self) { subOption in
                        Text(subOption)
                    }
                }
                // 监听阵营变化，重置兵力部署图
                .onChange(of: selectedNation) { newNation in
                    forceDiagram = diagrams[newNation]?.first ?? ""
                }
                
                Picker("选择兵力部署图:", selection: $forceDiagram) {
                    ForEach(diagrams[selectedNation] ?? [], id: \.self) { subSubOption in
                        Text(subSubOption)
                    }
                }
            }
        }
    }
}

#Preview {
    Testing_View()
}

关键改动说明 #

• 给三个@State变量设置了符合默认逻辑的初始值，避免空状态异常。
• 给第一个Picker添加onChange监听，切换战争阶段时自动将阵营和兵力部署图重置为新分组的第一个选项，确保三级联动完全同步。
• 给第二个Picker添加onChange监听，切换阵营时自动重置兵力部署图，强化联动逻辑。

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