SwiftUI - ObservableObject、EnvironmentObject、SummaryView

Question

在创建代码之后，我想创建一个摘要视图，它允许我查看在选取器中选择的值。我该怎么做呢？我读了一些关于@ObservableObject和@EnvironmentObject的论坛，但我不能理解...非常感谢:)

import SwiftUI

//SUMMARYPAGE
struct SummaryView: View {
    var body: some View {
        NavigationView {
            Form {
                VStack(alignment: .leading, spacing: 6) {
                    Text("First Animal: \("firstAnimalSelected")")
                    Text("First Animal: \("secondAnimalSelected")")
                }
            }
        }
    }
}

struct SummaryView_Previews: PreviewProvider {
    static var previews: some View {
        SummaryView()
    }
}

enum Animal: String, CaseIterable {
    case select
    case bear
    case cat
    case dog
    case lion
    case tiger
}

struct ContentView: View {

    @State private var firstAnimal = Animal.allCases[0]
    @State private var secondAnimal = Animal.allCases[0]

    var body: some View {
        NavigationView {
            Form {
                Section(header: Text("Animals")
                    .foregroundColor(.black)
                    .font(.system(size: 15))
                    .fontWeight(.bold)) {
                        Picker(selection: $firstAnimal, label: Text("Select first animal")) {
                            ForEach(Animal.allCases, id: \.self) { element in
                                Text(element.rawValue.capitalized)
                            }
                        }
                        Picker(selection: $secondAnimal, label: Text("Select second animal")) {
                            ForEach(Animal.allCases.filter { $0 != firstAnimal || firstAnimal == .select }, id: \.self) { element2 in
                                Text(element2.rawValue.capitalized)
                            }
                        }
                }.font(.system(size: 15))
            }.navigationBarTitle("List", displayMode: .inline)
        }
    }
}

Answer 1

您可以将@State属性移动到ObservableObject

class ViewModel: ObservableObject {
    @Published var firstAnimal = Animal.allCases[0]
    @Published var secondAnimal = Animal.allCases[0]
}

并从@EnvironmentObject访问它们

struct ContentView: View {
    @EnvironmentObject var viewModel: ViewModel
    
    var body: some View {
        ...
        Picker(selection: $viewModel.firstAnimal, label: Text("Select first animal")) {
            ForEach(Animal.allCases, id: \.self) { element in
                Text(element.rawValue.capitalized)
            }
        }
    }
}

struct SummaryView: View {
    @EnvironmentObject var viewModel: ViewModel
    
    var body: some View {
        NavigationView {
            Form {
                VStack(alignment: .leading, spacing: 6) {
                    Text("First Animal: \(viewModel.firstAnimal.rawValue)")
                    Text("Second Animal: \(viewModel.secondAnimal.rawValue)")
                }
            }
        }
    }
}

记住要将ViewModel注入到根视图中：

ContentView().environmentObject(ViewModel())