Trouble passing data between views using EnvironmentObject in SwiftUI - swift

I'm having trouble passing data through different views with EnvironmentObject. I have a file called LineupDetails that contains the following:
import SwiftUI
class TeamDetails: ObservableObject {
let characterLimit = 3
#Published var TeamName: String = "" {
didSet {
if TeamName.count > characterLimit {
TeamName = String(TeamName.prefix(characterLimit))
}
}
}
#Published var TeamColor: Color = .blue
#Published var hitter1First: String = ""
#Published var hitter1Last: String = ""
#Published var hitter2First: String = ""
#Published var hitter2Last: String = ""
#Published var hitter3First: String = ""
#Published var hitter3Last: String = ""
#Published var hitter4First: String = ""
#Published var hitter4Last: String = ""
#Published var hitter5First: String = ""
#Published var hitter5Last: String = ""
#Published var hitter6First: String = ""
#Published var hitter6Last: String = ""
#Published var hitter7First: String = ""
#Published var hitter7Last: String = ""
#Published var hitter8First: String = ""
#Published var hitter8Last: String = ""
#Published var hitter9First: String = ""
#Published var hitter9Last: String = ""
#Published var Hitter1Pos = "P"
#Published var Hitter2Pos = "C"
#Published var Hitter3Pos = "1B"
#Published var Hitter4Pos = "2B"
#Published var Hitter5Pos = "3B"
#Published var Hitter6Pos = "SS"
#Published var Hitter7Pos = "LF"
#Published var Hitter8Pos = "CF"
#Published var Hitter9Pos = "RF"
}
These variables are edited through a form in SetHomeLineup. I have excluded the parts of the view not related to the problem, marking them with ...:
struct SetHomeLineup: View {
#EnvironmentObject var HomeTeam: TeamDetails
...
var body: some View {
HStack {
TextField("Name", text: $HomeTeam.hitter1First)
TextField("Last Name", text: $HomeTeam.hitter1Last)
Picker(selection: $HomeTeam.Hitter1Pos, label: Text("")) {
ForEach(positions, id: \.self) {
Text($0)
}
}
}
HStack {
TextField("Name", text: $HomeTeam.hitter2First)
TextField("Last Name", text: $HomeTeam.hitter2Last)
Picker(selection: $HomeTeam.Hitter2Pos, label: Text("")) {
ForEach(positions, id: \.self) {
Text($0)
}
}
}
...
}
// and textfields so on until Hitter9, first and last
Now, when I try to include the inputted values of the above text fields to a different view, with code like this, the view always appears empty to match the default value of the string.
struct GameView: View {
#EnvironmentObject var HomeTeam: TeamDetails
...
var body: some View {
Text(HomeTeam.hitter1First)
}
}
Can someone tell me what I'm doing wrong? I tried using a similar code in a fresh project and it seemed to work just fine, so I'm stumped.
EDIT:
My views are instantiated like so:
The first view of the app is the SetAwayLineup, which includes a NavigationLink to SetHomeLineup like so.
var details = TeamDetails()
NavigationLink(destination: SetHomeLineup().environmentObject(details), isActive: self.$lineupIsReady) {
Similarly, SetHomeLineup includes a navigation link to GameView like so
var details = TeamDetails()
NavigationLink(destination: GameView().environmentObject(details), isActive: self.$lineupIsReady) {
Both screens have an EnvironmentObject of AwayLineup and HomeLineup that I'm trying to call into GameView.

Hopefully this simplifies it
The trunk is injected in the NavigationView and doesn't need to be re-injected. Even if one of the children doesn't use it. Truck belongs to the NavigationView
Then I have created 2 branches A and B that have their own Objects A cannot see Bs and vicecersa.
Each branch has access to their object and the sub-branches (NavigationLink) can be connected to the branch's object by injecting it.
import SwiftUI
struct TreeView: View {
#StateObject var trunk: Trunk = Trunk()
var body: some View {
NavigationView{
List{
NavigationLink(
destination: BranchAView(),
label: {
Text("BranchA")
})
NavigationLink(
destination: BranchBView(),
label: {
Text("BranchB")
})
}.navigationTitle("Trunk")
}
//Available to all items in the NavigationView
//With no need to re-inject for all items of the navView
.environmentObject(trunk)
}
}
///Has no access to BranchB
struct BranchAView: View {
#StateObject var branchA: BranchA = BranchA()
#EnvironmentObject var trunk: Trunk
var body: some View {
VStack{
Text(trunk.title)
Text(branchA.title)
NavigationLink(
destination: BranchAAView()
//Initial injection
.environmentObject(branchA)
,
label: {
Text("Go to Branch AA")
})
}.navigationTitle("BranchA")
}
}
//Has no access to BranchA
struct BranchBView: View {
#StateObject var branchB: BranchB = BranchB()
#EnvironmentObject var trunk: Trunk
var body: some View {
VStack{
Text(trunk.title)
Text(branchB.title)
NavigationLink(
destination: BranchBBView()
//Initial injection
.environmentObject(branchB),
label: {
Text("Go to Branch BB")
})
}.navigationTitle("BranchB")
}
}
struct BranchAAView: View {
#EnvironmentObject var branchA: BranchA
#EnvironmentObject var trunk: Trunk
var body: some View {
VStack{
Text(trunk.title)
Text(branchA.title)
NavigationLink(
destination: BranchAAAView()
//Needs re-injection because it is a NavigationLink sub-branch
.environmentObject(branchA)
,
label: {
Text("Go to AAA")
})
}.navigationTitle("BranchAA")
}
}
struct BranchAAAView: View {
#EnvironmentObject var branchA: BranchA
#EnvironmentObject var trunk: Trunk
var body: some View {
VStack{
Text(trunk.title)
Text(branchA.title)
}.navigationTitle("BranchAAA")
}
}
struct BranchBBView: View {
var body: some View {
VStack{
Text("I don't need to use the trunk or branch BB")
//No need to re-inject it is the same branch
BranchBBBView()
}.navigationTitle("BranchBB")
}
}
struct BranchBBBView: View {
#EnvironmentObject var branchB: BranchB
#EnvironmentObject var trunk: Trunk
var body: some View {
VStack{
Text("BranchBBBView").font(.title).fontWeight(.bold)
Text(trunk.title)
Text(branchB.title)
}.navigationTitle("BranchBB & BranchBBB")
}
}
struct TreeView_Previews: PreviewProvider {
static var previews: some View {
TreeView()
}
}
class Trunk: ObservableObject {
var title: String = "Trunk"
}
class BranchA: ObservableObject {
var title: String = "BranchA"
}
class BranchB: ObservableObject {
var title: String = "BranchB"
}

You need to make sure that you're passing the same environment object to any views that need to share the same data. That means you should create the object and store it in a variable so that you can pass it to both views. From your comments you have:
NavigationLink(destination: GameView(testUIView:
sampleGameViews[0]).environmentObject(TeamDetails()),
isActive: self.$lineupIsReady { ...
That TeamDetails() constructs a new instance of the TeamDetails class, one that you haven't stored. That means you must also be doing the same for your SetHomeLineup view. Instead, you'll need to create a single instance and keep a reference to it, then pass that reference to any views that you want to share the same data:
var details = TeamDetails()
that should be the only place where you use TeamDetails(); use details when you're setting up your GameView and SetHomeLineup views.
Update: Given your edit, the problem is again clear. You're still instantiating the TeamDetails class twice, so that the two views still get their own separate instances of that class. They need to use the same instance if they're to share information. So there should be only one var details = TeamDetails() line, and the resulting details variable should be used as the environmentObject for both views.
For example, instead of:
var details = TeamDetails()
NavigationLink(destination: SetHomeLineup().environmentObject(details), isActive: self.$lineupIsReady) {...
//...
var details = TeamDetails()
NavigationLink(destination: GameView().environmentObject(details), isActive: self.$lineupIsReady) {
you want:
var details = TeamDetails()
NavigationLink(destination: SetHomeLineup().environmentObject(details), isActive: self.$lineupIsReady) {...
NavigationLink(destination: GameView().environmentObject(details), isActive: self.$lineupIsReady) {
In general, make sure that you have a clear understanding of the difference between reference types and value types, and between a class and an instance of that class. If Mazda Miata is a class, and if I buy a Miata, then the specific car that I've is an instance of the class. If I ask you to wash my car, and I ask someone else to change the oil in my car, I'll end up with one car that's clean and has new oil. What's going on in your code is that you're buying a Miata and asking someone to wash it, and buying another car and asking someone to change the oil. They're two different cars, so they have different states.

Related

SwiftUI passing an observed object into a new view and getting updates

I am very new to swift working on my first app and having trouble having a view update. I am passing an object into a new view, however the new view does not update when there is change in the Firebase Database. Is there a way to get updates on the Gridview? I though by passing the observed object from the StyleboardView it would update the GridView however Gridview does not update. I am having trouble finding a way for the new Gridview to update and reload the images.
struct StyleBoardView: View {
#State private var showingSheet = false
#ObservedObject var model = ApiModel()
#State var styleboardname = ""
let userEmail = Auth.auth().currentUser?.email
var body: some View {
NavigationView {
VStack {
Text("Select Style Board")
List (model.list) {item in
Button(item.styleboardname) {
showingSheet.toggle()
}
.sheet(isPresented: $showingSheet) {
GridView(item: item)
}
}
struct GridView: View {
var item: Todo
#ObservedObject var model = ApiModel()
#State var newImage = ""
#State var loc = ""
#State var shouldShowImagePicker = false
#State var image: UIImage?
var body: some View {
NavigationView {
var posts = item.styleboardimages
VStack(alignment: .leading){
Text(item.styleboardname)
GeometryReader{ geo in
LazyVGrid(columns: [
GridItem(.flexible()),
GridItem(.flexible()),
GridItem(.flexible())
], spacing: 3 ){
ForEach(posts.sorted(by: <), id: \.key) { key, value in
if #available(iOS 15.0, *) {
AsyncImage(url: URL(string: value), transaction: Transaction(animation: .spring())) { phase in
switch phase {
case .empty:
Color.purple.opacity(0.1)
case .success(let image):
image
.resizable()
.scaledToFill()
case .failure(_):
Image(systemName: "exclamationmark.icloud")
.resizable()
.scaledToFit()
#unknown default:
Image(systemName: "exclamationmark.icloud")
}
}
.frame(width: 100, height: 100)
.cornerRadius(20)
You have a few problems with the code. First of all, the original view that creates the view model, or has created for it originally, should own the object. Therefore you declare it as a #StateObject.
struct StyleBoardView: View {
#State private var showingSheet = false
#StateObject var model = ApiModel() // #StateObject here
#State var styleboardname = ""
let userEmail = Auth.auth().currentUser?.email
var body: some View {
NavigationView {
VStack {
Text("Select Style Board")
List ($model.list) { $item in // Change this to pass a Binding
Button(item.styleboardname) {
showingSheet.toggle()
}
.sheet(isPresented: $showingSheet) {
GridView(item: $item, model: model)
}
}
}
}
}
}
Since you are passing to a .sheet, that will not automatically be re-rendered when StyleBoardView's model changes, so you have to use a #Binding to cause GridView to re-render. Lastly, once you have your #StateObject, you pass that to your next view. Otherwise, you continually make new models, so updates to one will not update the other.
struct GridView: View {
#Binding var item: Todo // Make this a #Binding so it reacts to the changes.
#ObservedObject var model: ApiModel // Pass the originally created view model in.
...
var body: some View {
NavigationView {
...
}
}
}
Lastly, you did not post a Minimal, Reproducible Example (MRE). You also did not post the complete GridView struct. You may not even need your view model in that view as you do not use it in what you have posted.
The problem is that you're initializing the model in an ObservedObject, and passing it down to another initialized Observed Object.
What you actually wanna do is use an #StateObject for where you initialize the model. And then use #ObservedObject with the type of the model you're passing down so that:
struct StyleBoardView: View {
#StateObject var model = ApiModel()
/** Code **/
struct GridView: View {
#ObservedObject var model: ApiModel
Notice the difference, an #ObservedObject should never initialize the model, it should only "inherit" (#ObservedObject var model: ApiModel) a model from a parent View, in this case, ApiModel.

Passing a state variable to parent view

I have the following code:
struct BookView: View {
#State var title = ""
#State var author = ""
var body: some View {
TextField("Title", text: $title)
TextField("Author", text: $author)
}
}
struct MainView: View {
#State private var presentNewBook: Bool = false
var body: some View {
NavigationView {
// ... some button that toggles presentNewBook
}.sheet(isPresented: $presentNewBook) {
let view = BookView()
view.toolbar {
ToolbarItem(placement: principal) {
TextField("Title", text: view.$title)
}
}
}
}
}
This compiles but is giving me the following error on runtime:
Accessing State's value outside of being installed on a View. This will result in a constant Binding of the initial value and will not update.
How do I pass a state variable to some other outside view? I can't use ObservableObject on BookView since that would require me to change it from struct to class
In general, your state should always be owned higher up the view hierarchy. Trying to access the child state from a parent is an anti-pattern.
One option is to use #Bindings to pass the values down to child views:
struct BookView: View {
#Binding var title : String
#Binding var author : String
var body: some View {
TextField("Title", text: $title)
TextField("Author", text: $author)
}
}
struct ContentView: View {
#State private var presentNewBook: Bool = false
#State private var title = ""
#State private var author = ""
var body: some View {
NavigationView {
VStack {
Text("Title: \(title)")
Text("Author: \(author)")
Button("Open") {
presentNewBook = true
}
}
}.sheet(isPresented: $presentNewBook) {
BookView(title: $title, author: $author)
}
}
}
Another possibility is using an ObservableObject:
class BookState : ObservableObject {
#Published var title = ""
#Published var author = ""
}
struct BookView: View {
#ObservedObject var bookState : BookState
var body: some View {
TextField("Title", text: $bookState.title)
TextField("Author", text: $bookState.author)
}
}
struct ContentView: View {
#State private var presentNewBook: Bool = false
#StateObject private var bookState = BookState()
var body: some View {
NavigationView {
VStack {
Text("Title: \(bookState.title)")
Text("Author: \(bookState.author)")
Button("Open") {
presentNewBook = true
}
}
}.sheet(isPresented: $presentNewBook) {
BookView(bookState: bookState)
}
}
}
I've altered your example views a bit because to me the structure was unclear, but the concept of owning the state at the parent level is the important element.
You can also pass a state variable among views as such:
let view = BookView(title: "foobar")
view.toolbar {
ToolbarItem(placement: principal) {
TextField("Title", text: view.$title)
}
}
Then, inside of BookView:
#State var title: String
init(title: String) {
_title = State(initialValue: title)
}
Source: How could I initialize the #State variable in the init function in SwiftUI?

How do I instantiate a view with multiple EnvironmentObjects?

I was learning about how EnvironmentObject works for a school project, and I was confused about how to instantiate a view with multiple EnvironmentObjects. For example, the following code:
import SwiftUI
class names: ObservableObject {
#Published var myName = ""
}
struct FirstView: View {
#StateObject var FirstName = names()
var body: some View {
NavigationView {
VStack {
TextField("Type", text: $FirstName.myName)
NavigationLink(destination: SecondView()) {
Text("Second View")
}
}
}.environmentObject(FirstName)
}
}
struct SecondView: View {
#StateObject var LastName = names()
var body: some View {
VStack {
TextField("Type", text: $LastName.myName)
NavigationLink(destination: ThirdView().environmentObject(FirstName).environmentObject(LastName)) {
Text("Third View")
}
}.environmentObject(LastName)
}
}
struct ThirdView: View {
#EnvironmentObject var FirstName: names
#EnvironmentObject var LastName: names
var body: some View {
Text("Full name: \(FirstName.myName) \(LastName.myName)")
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
FirstView()
}
}
I need ThirdView to receive FirstName from FirstView and LastName from SecondView, but I can't instantiate ThirdView from SecondView with the required Environment Objects; this code above crashes with the error "Cannot find FirstName in scope".
Alternatively, If I try to instantiate ThirdView with only LastName as an environment object, the code will present something like "Smith Smith" if I entered "John" in the text field on FirstView and "Smith" in the text field on SecondView.
Can someone tell me what I'm doing wrong? Thank you! :)
Since they are of the same type you can’t have two. SwiftUI can’t tell the difference
//Names for classes and structs should start with an uppercase letter
class PersonModel: ObservableObject {
#Published var firstName = ""
#Published var lastName = ""
}
struct FirstNameView: View {
//variables start with lowercase
#StateObject var person: PersonModel = PersonModel()
var body: some View {
NavigationView {
VStack {
TextField("Type", text: $person.firstName)
NavigationLink(destination: LastNameView()) {
Text("Second View")
}
}
}.environmentObject(person)
}
}
struct LastNameView: View {
#EnvironmentObject var person: PersonModel
var body: some View {
VStack {
TextField("Type", text: $person.lastName)
NavigationLink(destination: FullNameView()) {
Text("Third View")
}
}
}
}
struct FullNameView: View {
#EnvironmentObject var person: PersonModel
var body: some View {
Text("Full name: \(person.firstName) \(person.lastName)")
}
}
environmentObject(_:) modifier method takes an ObservableObject and passes it down the view tree. It works without specifying an environment key because the type of the object is automatically used as the key.
So to resume your last name instance is somehow invalidating your first name instance.
I'd then suggest either to create a model that contains both first and last name or simply use #Environment with a key (as it's suggested by Damiaan Dufaux) if it’s possible to get away with passing a value type, because it’s the safer mechanism.
You are probably looking for EnvironmentKeys.
Use them like this:
private struct FirstNameKey: EnvironmentKey {
static let defaultValue = "No first name"
}
private struct LastNameKey: EnvironmentKey {
static let defaultValue = "No last name"
}
And add them to your EnvironmentValues:
extension EnvironmentValues {
var firstName: String {
get { self[FirstNameKey.self] }
set { self[FirstNameKey.self] = newValue }
}
var lastName: String {
get { self[LastNameKey.self] }
set { self[LastNameKey.self] = newValue }
}
}
They values can then be bound to the environment like this:
var body: some View {
MyCustomView()
.environment(\.firstName, "John")
.environment(\.lastName, "Doe")
}
And retrieved like this:
struct ThirdView: View {
#Environment(\.firstName) var firstName
#Environment(\.lastName) var lastName
var body: some View {
Text("Full name: \(firstName) \(lastName)")
}
}
Side note on conventions
To understand code more easily the Swift.org community asks to
Give types UpperCamelCase names (such as SomeStructure and SomeClass here) to match the capitalization of standard Swift types (such as String, Int, and Bool). Give properties and methods lowerCamelCase names (such as frameRate and incrementCount) to differentiate them from type names.
So it would be better to write your class names as class Names as it greatly improves readability for Swift users.

No ObservableObject of type <TypeName> found. A View.environmentObject(_:) for <TypeName> may be missing as an ancestor of this view

I have three views (AddMatchView, TeamPickerView and TeamsOfCountryView). Everything should work like this: from AddTeamView I go to TeamPickerView, there I select the country and go to TeamsOfCountryView, after tapping on the team I need, both views (TeamPickerView and TeamsOfCountryView) should immediately close thanks to the common Bool variable, and the selected team (an object of the Team type) passed to the parent AddMatchView. But after selecting a team, only TeamsOfCountryView is closed, and an error occurs in TeamPickerView: Fatal error: No ObservableObject of type DBService found. A View.environmentObject (_ :) for DBService may be missing as an ancestor of this view.
Everything worked as it should until I decided to create a ViewModel for my view. i.e. if I transfer #State variables from AddMatchView to TeamPickerView, then errors will not stink, but I use properties from #ObservedObject
Main parent view:
struct AddMatchView: View {
#ObservedObject var viewModel = AddMatchViewModel()
#State isPresented = false //This works!
#State team: Team? //This works!
var body: some View {
//...
Button(action: { viewModel.isPresented.toggle() }){
//...
}.fullScreenCover(isPresented: $viewModel.isPresented) { TeamPickerView(team: $viewModel.home, isPresented: $viewModel.isPresented)}
//.fullScreenCover(isPresented: $isPresented) { TeamPickerView(team: $home, isPresented: $isPresented)} THIS WORKS!!
//...
}
ViewModel after using of which the error began to occur:
class AddMatchViewModel: ObservableObject{
#Published var home: Team?
#Published var isPresented = false
//...
}
TeamsPickerView:
struct TeamPickerView: View {
#EnvironmentObject var db: DBService
#Binding var team: Team?
#Binding var isPresented: Bool
#State private var searchText = ""
var body: some View {
NavigationView {
VStack{
SearchBar(text: $searchText)
Form{
//ERROR in below line after selecting team in child TeamsOfCountryView: No ObservableObject of type DBService found. A View.environmentObject(_:) for DBService may be missing as an ancestor of this view.
List (db.countries.filter({ searchText.isEmpty ? true : $0.name.contains(searchText) })) { country in
NavigationLink(destination: TeamsOfCountryView(countryID: country.documentID, team: $team, isPresented: $isPresented)) {
HStack{
Image(uiImage: Flag(countryCode: country.code)!.image(style: .roundedRect)).resizable().scaledToFit().frame(maxWidth: 30, maxHeight: 30)
Text(country.name)
}
}
}
}
}
.navigationBarTitle(Text("Countries"))
.navigationBarItems(trailing: Button(action: {isPresented = false }){
Text("Close")
})
}
}
}
TeamsOfCountryView:
struct TeamsOfCountryView: View {
#EnvironmentObject var db: DBService
#Binding var team: Team?
#Binding var isPresented: Bool
//...
var body: some View {
VStack{
//...
Form{
List (teams.filter({ searchText.isEmpty ? true : $0.name.contains(searchText) })) { team in
Button(action: {
//After that, an error occurs in the parent TeamPickerView
self.team = team
self.isPresented = false
}){
//...
}
}
}
//...
}
}
LITTLE UPDATE: simplified the example as much as possible
class ViewModel: ObservableObject{
#Published var isPresented = false
}
class EnvObj: ObservableObject{
#Published var foo = "test"
}
struct ContentView: View {
#ObservedObject var viewModel = ViewModel()
//#State var isPresented = false no error if we use it instead of viewModel.isPresented
var body: some View {
Button("Open Child View A"){
viewModel.isPresented.toggle()
}.fullScreenCover(isPresented: $viewModel.isPresented){ChildViewA(isPresented: $viewModel.isPresented)}
}
}
struct ChildViewA: View {
#EnvironmentObject var envObj: EnvObj
#Binding var isPresented: Bool
#State var openChildB = false
var body: some View {
NavigationView{
VStack{
//ERROR HERE: No ObservableObject of type EnvObj found. A View.environmentObject(_:) for EnvObj may be missing as an ancestor of this view.
Text(envObj.foo)
NavigationLink(destination: ChildViewB(isPresented: $isPresented)){
Text("Open Child View B")
}
}
}
}
}
struct ChildViewB: View {
#EnvironmentObject var envObj: EnvObj
#Binding var isPresented: Bool
var body: some View {
Button("Close Child View A and B"){
isPresented = false
}
}
}
You need to inject the #EnvironmentObject into each environment (remember that each .sheet or .fullScreenCover creates a new environment):
Button("Open Child View A"){
viewModel.isPresented.toggle()
}
.fullScreenCover(isPresented: $viewModel.isPresented) {
ChildViewA(isPresented: $viewModel.isPresented)
.environmentObject(EnvObj()) // inject here
}
Note: the EnvironmentObject must be created first. You can't access it by #EnvironmentObject var envObj: EnvObj if it isn't created and injected in the first place.
Also, you don't really need to create your dependencies directly in the fullScreenCover closure. You can put them at the root level and inject accordingly.
My best guess is that you need a strong reference to your DBService object when you pass it in to the ContentView. In the SceneDelegate (or App object) where you declare your content view, instead of ContentView(DBService()) do this:
let dbService = DBService() // <- strong reference, stored property at class/struct level
func scene() {
ContentView(dbService) // <- this is the stored instance, not a brand new DBService
}
// (or)
var body: some Scene {
ContentView(dbService) // <- this is the stored instance, not a brand new DBService
}

How do I change the bool value of an item that comes from a struct and hence update a checklist?

Background
I am trying to build a list with a checkmark/tick box next to it. A struct is used to create the "data" for each item. This is then passed on to a class which holds an array of the items created by the struct. From here I used the observable object protocol and passed the class into a list.
Objective
I would like to be able to individually mark each item as completed when it is done.
Current Analysis
I know the image switches when I manually change the 'completed' value from false to true.
I also tested the onTapAction just to be sure it is working.
I think the problem lies in "self.one.completed.toggle()" or the binding or something I am unaware of.
struct One: Identifiable, Codable {
let id = UUID()
var item: String
var completed:Bool = false
}
class OneList: ObservableObject{
#Published var items1 = [One]()
struct ContentView: View {
#ObservedObject var itemss1 = OneList()
#ObservedObject var itemss2 = TwoList()
#ObservedObject var itemss3 = ThreeList()
#ObservedObject var itemss4 = FourList()
#State private var showingAdditem: Bool = false
#Binding var one:One
var body: some View {
NavigationView{
ZStack{
List{
Section(header: Text("Vital")){
ForEach(itemss1.items1){ item in
HStack{
Image(systemName: self.one.completed ? "checkmark.circle":"circle")
.onTapGesture {
self.one.completed.toggle()
}
Text(item.item)}
P.S. I am relatively new to Swift and Stack overflow so any other suggestions would be appreciated
In my other answer I achieved something like this with ObservableObject protocol for needed object and then playing with EnvironmentObject. Actually I didn't try to do this with other wrappers. Here is the code, where you can see switching images:
import SwiftUI
class One: Identifiable, ObservableObject { // ObservableObject requires class
let id: UUID
var item: String = "[undefined]"
#Published var completed: Bool = false // this will affect the UI
init(item: String, completed: Bool) {
id = UUID()
self.item = item
self.completed = completed
}
}
class OneList: ObservableObject{
#Published var items = [One(item: "first", completed: false),
One(item: "second", completed: false),
One(item: "third", completed: false)]
}
struct CheckboxList: View {
#EnvironmentObject var itemList: OneList
var body: some View {
List {
Section(header: Text("Vital")) {
ForEach(itemList.items.indices) { index in
VitalRow()
.environmentObject(self.itemList.items[index])
.onTapGesture {
self.itemList.items[index].completed.toggle()
}
}
}
}
}
}
struct VitalRow: View {
#EnvironmentObject var item: One
var body: some View {
HStack{
Image(systemName: item.completed ? "checkmark.circle" : "circle")
Text("\(item.item)")
}
}
}
struct CheckboxList_Previews: PreviewProvider {
static var previews: some View {
CheckboxList().environmentObject(OneList())
}
}