Property wrapper to observe other classes, and have them updated in view

Update current view when something gets updated in other classses.

1. Set up

var body: some View {
	NavigationStack{
		List{...}
	}
}

swift

b. custom data type

struct FruitModel: Identifiable {
	let id: String = UUID().uuidString
	let name: String
	let count: Int
}

swift

Now fruit model has string id, name and count

c. Create an array of fruit model

@State var fruitArray: [FruitModel] = [
	FruitModel(name: "Apple", count: 5)
]

swift

d. add data into List

List{
	ForEach(fruitArray) { fruit in
		HStack{
		Text("\(fruit.count)")
			Text(fruit.name)
				.font(.headline)
				.bold()
		}
	}
}

swift

inside the Hstatck text will bring the data from the fruitArray

e. onAppear function

.onAppear{
	getFruits()
}


    func getFruits() {
        let fruit1 = FruitModel(name: "Orange", count: 3)
        let fruit2 = FruitModel(name: "Banana", count: 6)
        let fruit3 = FruitModel(name: "Grape", count: 9)
        
        fruitArray.append(fruit1)
        fruitArray.append(fruit2)
        fruitArray.append(fruit3)
    }

swift

f. onDelete

ForEach{...
}.onDelete(perform: deleteFruit)


func deleteFruit(indexSet: IndexSet) {
	fruitArray.remove(atOffsets: indexSet)
}

swift

2. Create a custom class to hold extra data

a. Create a class outside of current View

class FruitViewModel {
	@Published var fruitArray: [FruitModel] = []
}

swift

@Published works same as state.

b. import the class into a current View

strcut ContentView: View {
	var fruitViewModel: FruitViewModel = FruitViewModel()


...
}

swift

c. bring the fruitArray function into the class

class FruitViewModel{
    
   @Published var fruitArray: [FruitModel] = []
    
    func getFruits() {
        let fruit1 = FruitModel(name: "Orange", count: 3)
        let fruit2 = FruitModel(name: "Banana", count: 6)
        let fruit3 = FruitModel(name: "Grape", count: 9)
        
        fruitArray.append(fruit1)
        fruitArray.append(fruit2)
        fruitArray.append(fruit3)
    }
    
    func deleteFruit(indexSet: IndexSet) {
        fruitArray.remove(atOffsets: indexSet)
    }
    
}

swift

d. change the fruitArray → fruitViewModel.data or fruitViewModel.function

     NavigationStack{
            List{
                ForEach(fruitViewModel.fruitArray) { fruit in
                    HStack {
                        Text("\(fruit.count)")
                            .foregroundStyle(.yellow)
                        Text(fruit.name)
                            .font(.headline)
                            .bold()
                    }
                }
                .onDelete(perform: fruitViewModel.deleteFruit)
            }
            .navigationTitle("Fruit List")
            .listStyle(DefaultListStyle())
            
            .onAppear{
                fruitViewModel.getFruits()
            }
        }

swift

⚠️

But, we can not still see the updated data in our view

e. Add @ObservedObejct on fruitViewModel & @ObservableObejct on FruitViewModel

class FruitViewModel: ObservableObject{
}

@ObservedObject var fruitViewModel...

swift

f. Add isLoading

        
        isLoading = true
        DispatchQueue.main.asyncAfter(deadline: .now() + 3.0) {
            self.fruitArray.append(fruit1)
            self.fruitArray.append(fruit2)
            self.fruitArray.append(fruit3)
            self.isLoading = false
        }

swift

           List{
                
                if fruitViewModel.isLoading{
                    ProgressView()
                } else {
                    ForEach(fruitViewModel.fruitArray) { fruit in
                        HStack {
                            Text("\(fruit.count)")
                                .foregroundStyle(.yellow)
                            Text(fruit.name)
                                .font(.headline)
                                .bold()
                        }
                    }
                    .onDelete(perform: fruitViewModel.deleteFruit)
                }
            }

swift

3. @StateObject

Why is important?

Whenever the view get updated and reloaded, @ObservedObject also gets reloaded. When user wants to reload the page but data should be remained, @StateObject is persist.

@StateObject var fruitViewModel: FruitViewModel = FruitViewModel()

swift

→ @StateObject → INIT

→ @ObservedObejct → Subview

a. Create a Random Screen

struct RandomScreen: View {
    
    @Environment(\.dismiss) var dismiss
    
    var body: some View {
        ZStack{
            Color.green.ignoresSafeArea()
            
            Button(action: {
                dismiss()
            }, label: {
                Text("GO BACK")
                    .foregroundStyle(.white)
                    .font(.largeTitle)
                    .fontWeight(/*@START_MENU_TOKEN@*/.bold/*@END_MENU_TOKEN@*/)
            })
        }
    }
}

swift

            .toolbar(content: {
                ToolbarItem(placement: .topBarTrailing) {
                    NavigationLink(destination: RandomScreen()) {
                        Image(systemName: "plus")
                    }
                }
            })

swift

C. delete onAppear and create a custom init() in FruitViewModel

init(){
	getFruits()
}

swift

d. Change the random screen to have array of fruitviewmodel

struct RandomScreen: View {
    
    @Environment(\.dismiss) var dismiss
    @ObservedObject var fruitViewModel: FruitViewModel
    
    var body: some View {
        ZStack{
            
            VStack{
                ForEach(fruitViewModel.fruitArray) { fruit in
                    Text(fruit.name)
                        .foregroundStyle(.white)
                        .font(.headline)
                }
                Spacer()
            }
        }
    }
}

swift

            .toolbar(content: {
                ToolbarItem(placement: .topBarTrailing) {
                    NavigationLink(
                        destination: RandomScreen(
                        fruitViewModel: FruitViewModel()
                        )) {
                        Image(systemName: "plus")
                    }
                }
            })

swift

Today, I learned about ObservableObject

and StateObject. These are property

wrappers that observe other classes

and update them in the view.

Whenever the view is updated and

reloaded, @ObservedObject also gets

reloaded. If you want to reload the

page but keep the data intact,

@StateObject is preferred.

You can use the custom dataset

from current view or in another view.

This way, you can update the dataset

and preserve the data when transitioning

to a different view with their data set.

#visionOS #AppleVisionPro #VisionPro #SpatialApp #SwiftUI #AppDevelopment

@StateObject & @ObservableObject

1. Set up

a. Create a navigation Stack

b. custom data type

c. Create an array of fruit model

d. add data into List

e. onAppear function

f. onDelete

2. Create a custom class to hold extra data

a. Create a class outside of current View

b. import the class into a current View

c. bring the fruitArray function into the class

d. change the fruitArray → fruitViewModel.data or fruitViewModel.function

e. Add @ObservedObejct on fruitViewModel & @ObservableObejct on FruitViewModel

f. Add isLoading

3. @StateObject

a. Create a Random Screen

C. delete onAppear and create a custom init() in FruitViewModel

d. Change the random screen to have array of fruitviewmodel

e. Add navigation link to have fruitviewmodel

Subscribe to our newsletter

You might also like:

N - Voice Record

MagnificationGesture

.onLongPressGesture

SwiftUI_visionOS_Note

@StateObject & @ObservableObject

1. Set up

2. Create a custom class to hold extra data

3. @StateObject

a. Create a Random Screen

b. Add a toolbar that link to Random Screen

C. delete onAppear and create a custom init() in FruitViewModel

d. Change the random screen to have array of fruitviewmodel

e. Add navigation link to have fruitviewmodel

Subscribe to our newsletter

You might also like:

N - Voice Record

MagnificationGesture

.onLongPressGesture