如何在 SwiftUI 中顯示來自多個枚舉選擇器選擇的詳細信息屏幕

Question

我正在使用 swiftui 來更新可以根據用戶選擇器選擇顯示詳細信息屏幕的應用程序。 我為每個詳細信息屏幕（大約 50 個）創建了一個視圖，並且我有一個多選擇器供用戶選擇 select 要顯示的詳細信息屏幕。 使用選擇器中的選擇來顯示適當的詳細視圖的最佳方式是什么。

這是多選擇器的簡化示例：

struct PickerMenu: View {

    enum HypoHyper: String, CaseIterable, Identifiable {
        case Hypo
        case Hyper

        var id: String { self.rawValue }
    }

    enum Lytes: String, CaseIterable, Identifiable {
        case Na
        case K

        var id: String { self.rawValue }
    }

    enum Details: String, CaseIterable, Identifiable {
        case Causes
        case Signs

        var id: String { self.rawValue }
    }


    @State var selectedHypoHyper = HypoHyper.Hyper
    @State var selectedLyte = Lytes.Na
    @State var selectedDetail = Details.Causes


    var body: some View {
        GeometryReader { geometry in
            HStack {
                Picker(selection: self.$selectedHypoHyper, label: Text("")) {
                    ForEach(HypoHyper.allCases) { hypoHyper in
                        Text(hypoHyper.rawValue).tag(hypoHyper.rawValue)
                    }
                }
                .frame(width: geometry.size.width/3, height: 150, alignment: .center)
                .clipped( )
                Picker(selection: self.$selectedLyte, label: Text("")) {
                    ForEach(Lytes.allCases) { lyte in
                        Text(lyte.rawValue).tag(lyte.rawValue)
                    }
                }
                .frame(width: geometry.size.width/3, height: 150, alignment: .center)
                .clipped( )
                Picker(selection: self.$selectedDetail, label: Text("")) {
                    ForEach(Details.allCases) { detail in
                        Text(detail.rawValue).tag(detail.rawValue)
                    }
                }
                .frame(width: geometry.size.width/3, height: 150, alignment: .center)
                .clipped( )
            }

        }
    }
}

Answer 1

有多種方法可以做到這一點，這是一個簡單的方法：（注意我必須修改 Pickers）

@main
struct TestApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

struct ContentView: View {
    var body: some View {
        NavigationView {
            PickerMenu()
        }.navigationViewStyle(StackNavigationViewStyle())
    }
}

// put these outside the PickerMenu for other views to use
enum HypoHyper: String, CaseIterable, Identifiable {
    case Hypo
    case Hyper
    var id: String { self.rawValue }
}

enum Lytes: String, CaseIterable, Identifiable {
    case Na
    case K
    var id: String { self.rawValue }
}

enum Details: String, CaseIterable, Identifiable {
    case Causes
    case Signs
    var id: String { self.rawValue }
}

struct PickerMenu: View {
    
    @State var selectedHypoHyper: HypoHyper = HypoHyper.Hyper
    @State var selectedLyte = Lytes.Na
    @State var selectedDetail = Details.Causes
    @State var showDetailView = false
    
    var body: some View {
        VStack (spacing: 30) {
            GeometryReader { geometry in
                HStack {
                    Picker("", selection: $selectedHypoHyper) {
                        ForEach(HypoHyper.allCases, id: \.id) { hypoHyper in
                            Text(hypoHyper.rawValue).tag(hypoHyper)
                        }
                    }
                    .frame(width: geometry.size.width/3, height: 150, alignment: .center)
                    .clipped( )
                    Picker("", selection: $selectedLyte) {
                        ForEach(Lytes.allCases, id: \.id) { lyte in
                            Text(lyte.rawValue).tag(lyte)
                        }
                    }
                    .frame(width: geometry.size.width/3, height: 150, alignment: .center)
                    .clipped( )
                    Picker("", selection: $selectedDetail) {
                        ForEach(Details.allCases, id: \.id) { detail in
                            Text(detail.rawValue).tag(detail)
                        }
                    }
                    .frame(width: geometry.size.width/3, height: 150, alignment: .center)
                    .clipped( )
                }
            }
            
            Button("Show Detail View") {
                showDetailView = true
            }
            
            NavigationLink("", destination: SomeDetailView(
                selectedHypoHyper: $selectedHypoHyper,
                selectedLyte: $selectedLyte,
                selectedDetail: $selectedDetail), isActive: $showDetailView)
        }
    }
}

struct SomeDetailView: View {
    @Binding var selectedHypoHyper: HypoHyper
    @Binding var selectedLyte: Lytes
    @Binding var selectedDetail: Details
    
    var body: some View {
        // here determine which view you want to show based on the selections, eg a switch(...) {..}
        Text("selectedHypoHyper: \(selectedHypoHyper.rawValue)")
        Text("selectedLyte: \(selectedLyte.rawValue)")
        Text("selectedDetail: \(selectedDetail.rawValue)")
    }
}

Answer 2

這有幫助嗎，這里我們使用switch語句並根據上下文返回view （或NavigationLink ）

switch (selectedHypoHyper, selectedLyte, selectedDetail) {
case (.Hyper, .Na, .Causes): EmptyView()
case (.Hyper, .Na, .Signs): EmptyView()
case (.Hyper, .K, .Causes): EmptyView()
case (.Hyper, .K, .Signs): EmptyView()
// Continue with other cases ...
default: EmptyView()
}