SwiftUI - ObservableObject, EnvironmentObject, SummaryView

Question

After creating the code, i would like to create a summary view that allows me to view the values that have been chosen in the picker. How can I do? I read some forums about @ObservableObject and about @EnvironmentObject, but I can't understand ... Thanks very much :)

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)
        }
    }
}

score 0 · Answer 1 · answered Jul 22 '20 at 19:35

You can move your @State properties to an ObservableObject:

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

and access them from an @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)")
                }
            }
        }
    }
}

Remember to inject your ViewModel to your root view:

ContentView().environmentObject(ViewModel())

SwiftUI - ObservableObject, EnvironmentObject, SummaryView

1 Answers1