update View when view model's, publish object's, property is updated - swiftui

How to update view, when view models publish var's (user's) , name property is updated. I do know why its happening but what is the best way to update the view in this case.
class User {
var id = "123"
#Published var name = "jhon"
}
class ViewModel : ObservableObject {
#Published var user : User = User()
}
struct ContentView: View {
#ObservedObject var viewModel = ViewModel()
var body: some View {
userNameView
}
var userNameView: some View {
Text(viewModel.user.name)
.background(Color.red)
.onTapGesture {
viewModel.user.name += "update"
print( viewModel.user.name)
}
}
}
so one way i do it, is by using onReceive like this,
var body: some View {
userNameView
.onReceive(viewModel.user.$name){ output in
let tmp = viewModel.user
viewModel.user = tmp
print("onTapGesture",output)
}
}
but it is not a good approach it will update all view using users properties.
should i make a #state var for the name?
or should i just make a ObservedObject for user as well?

Make you class conform to ObservableObject
class User: ObservableObject {
var id = "123"
#Published var name = "jhon"
}
But he catch with that is that you have to observe it directly you can't chain it in a ViewModel
Use #ObservedObject var user: User in a View

You should use struct:
import SwiftUI
struct User {
var id: String
var name: String
}
class ViewModel : ObservableObject {
#Published var user : User = User(id: "123", name: "Mike")
}
struct ContentView: View {
#ObservedObject var viewModel: ViewModel = ViewModel()
var body: some View {
userNameView
}
var userNameView: some View {
Text(viewModel.user.name)
.background(Color.red)
.onTapGesture {
viewModel.user.name += " update"
print( viewModel.user.name)
}
}
}

Related

Infinite loop when setting a #Published property

I have a simple view that shows some photos, through a list. Clicking on any row should display a detailed view of that photo. I'm using the MVVM pattern. However, an infinite loop occurs when I try to set the “selectedPhoto” property of the view model. Is there any way to avoid this loop without having to create a property in the detailed view itself?
Here is the Photo struct:
struct Photo: Identifiable {
var id = UUID()
var name: String
}
Here is the ContentView with an extension (the “updatePhoto” method is causing the infinite loop):
struct ContentView: View {
#StateObject private var viewModel = ViewModel()
var body: some View {
NavigationView {
List {
ForEach(viewModel.photos) { selectedPhoto in
showDetailView(with: selectedPhoto)
}
}
.navigationTitle("Favorite Photo")
}
}
}
extension ContentView {
func showDetailView(with selectedPhoto: Photo?) -> some View {
if let selectedPhoto = selectedPhoto {
viewModel.updatePhoto(selectedPhoto)
}
return DetailView(viewModel: viewModel)
}
}
Here is the view model:
class ViewModel: ObservableObject {
#Published var photos = [
Photo(name: "Photo 1"),
Photo(name: "Photo 2"),
Photo(name: "Photo 3")
]
#Published var selectedPhoto: Photo?
func updatePhoto(_ selectedPhoto: Photo?) {
self.selectedPhoto = selectedPhoto
}
}
And here is the DetailView:
struct DetailView: View {
#ObservedObject private var viewModel: ViewModel
init(viewModel: ViewModel) {
self.viewModel = viewModel
}
var body: some View {
Text(viewModel.selectedPhoto?.name ?? "Unknown photo name")
}
}
Try this approach, using a NavigationLink to present the DetailView,
and passing the selectedPhoto to it using #State var selectedPhoto: Photo.
struct Photo: Identifiable {
let id = UUID()
var name: String
}
class ViewModel: ObservableObject {
#Published var photos = [Photo(name: "Photo 1"),Photo(name: "Photo 2"),Photo(name: "Photo 3")]
}
struct DetailView: View {
#State var selectedPhoto: Photo
var body: some View {
Text(selectedPhoto.name)
}
}
struct ContentView: View {
#StateObject var viewModel = ViewModel()
var body: some View {
NavigationView {
List {
ForEach(viewModel.photos) { selectedPhoto in
NavigationLink(selectedPhoto.name, destination: DetailView(selectedPhoto: selectedPhoto))
}
}
.navigationTitle("Favorite Photo")
}
}
}
Note that NavigationView is being deprecated and you will have to use NavigationStack instead.

SwiftUI - Binding in ObservableObject

Let's say we have a parent view like:
struct ParentView: View {
#State var text: String = ""
var body: some View {
ChildView(text: $text)
}
}
Child view like:
struct ChildView: View {
#ObservedObject var childViewModel: ChildViewModel
init(text: Binding<String>) {
self.childViewModel = ChildViewModel(text: text)
}
var body: some View {
...
}
}
And a view model for the child view:
class ChildViewModel: ObservableObject {
#Published var value = false
#Binding var text: String
init(text: Binding<String>) {
self._text = text
}
...
}
Making changes on the String binding inside the child's view model makes the ChildView re-draw causing the viewModel to recreate itself and hence reset the #Published parameter to its default value. What is the best way to handle this in your opinion?
Cheers!
The best way is to use a custom struct as a single source of truth, and pass a binding into child views, e.g.
struct ChildViewConfig {
var value = false
var text: String = ""
// mutating funcs for logic
mutating func reset() {
text = ""
}
}
struct ParentView: View {
#State var config = ChildViewConfig()
var body: some View {
ChildView(config: $config)
}
}
struct ChildView: View {
#Binding var config: ChildViewConfig
var body: some View {
TextField("Text", text: $config.text)
...
Button("Reset") {
config.reset()
}
}
}
"ViewConfig can maintain invariants on its properties and be tested independently. And because ViewConfig is a value type, any change to a property of ViewConfig, like its text, is visible as a change to ViewConfig itself." [Data Essentials in SwiftUI WWDC 2020].

How to use #FocusState with view models?

I'm using view models for my SwiftUI app and would like to have the focus state also in the view model as the form is quite complex.
This implementation using #FocusState in the view is working as expected, but not want I want:
import Combine
import SwiftUI
struct ContentView: View {
#ObservedObject private var viewModel = ViewModel()
#FocusState private var hasFocus: Bool
var body: some View {
Form {
TextField("Text", text: $viewModel.textField)
.focused($hasFocus)
Button("Set Focus") {
hasFocus = true
}
}
}
}
class ViewModel: ObservableObject {
#Published var textField: String = ""
}
How can I put the #FocusState into the view model?
Assuming you have in ViewModel as well
class ViewModel: ObservableObject {
#Published var hasFocus: Bool = false
...
}
you can use it like
struct ContentView: View {
#ObservedObject private var viewModel = ViewModel()
#FocusState private var hasFocus: Bool
var body: some View {
Form {
TextField("Text", text: $viewModel.textField)
.focused($hasFocus)
}
.onChange(of: hasFocus) {
viewModel.hasFocus = $0 // << write !!
}
.onAppear {
self.hasFocus = viewModel.hasFocus // << read !!
}
}
}
as well as the same from Button if any needed.
I faced the same problem and ended up writing an extension that can be reused to sync both values. This way the focus can also be set from the view model side if needed.
class ViewModel: ObservableObject {
#Published var hasFocus: Bool = false
}
struct ContentView: View {
#ObservedObject private var viewModel = ViewModel()
#FocusState private var hasFocus: Bool
var body: some View {
Form {
TextField("Text", text: $viewModel.textField)
.focused($hasFocus)
}
.sync($viewModel.hasFocus, with: _hasFocus)
}
}
extension View {
func sync<T: Equatable>(_ binding: Binding<T>, with focusState: FocusState<T>) -> some View {
self
.onChange(of: binding.wrappedValue) {
focusState.wrappedValue = $0
}
.onChange(of: focusState.wrappedValue) {
binding.wrappedValue = $0
}
}
}

How can you make use of a #Binding var state change in a model object?

I have a view with some controls for choosing a date property. I would like to use that date property in a sibling's view model to search in CoreData for a Schedule object for that date, or create one in case there is none - a searchOrCreate method. (I wished I could use #FetchRequest for this but I haven't yet found a way)
I've made the date a #Binding var so I can get the view update in the Child2 view, but I haven't found a way to pass the state changes to its model for it to do a searchOrCreate, as didSet does not work on bindings. Am I not approaching this correctly, and should I just use an #Environment variable or something else?
struct ParentView: View {
#State var day: Date = Date().noon
var body: some View {
VStack() {
Child1View(day: $day)
Child2View(day: day)
}
}
}
struct Child1View: View {
#Binding var day: Date
// code to select day
}
struct Child2View: View {
var day: Date // I do not need to update the day in this view,
//just display it and use it in an object, so I did not use #Binding
#StateObject private var viewModel = Child2ViewModel()
...
}
class Child2ViewModel: ObservableObject {
var day: Date {
didSet {
// call searchOrCreate in CoreData for the Schedule object
}
#Published var schedule: Schedule
}
What I have discovered works is if I make the viewModel be a part of the parent view and pass it down, however it feels like this breaks encapsulation. Ideally I would want Child2View to just get a date and do its thing from there.
struct ParentView: View {
#StateObject var viewModel = Child2ViewModel()
var body: some View {
VStack() {
Child1View(day: $viewModel.day)
Child2View(viewModel: viewModel)
}
}
}
struct Child2View: View {
#ObservedObject private var viewModel: Child2ViewModel
...
}
class Child2ViewModel: ObservableObject {
#Published var day = Date().noon {
didSet {
// call searchOrCreate in CoreData for the Schedule object
}
#Published var schedule: Schedule
}
You can use onReceive to capture the changes of the parent variable and pass it to the ViewModel:
import Combine
import SwiftUI
struct ParentView: View {
#State var day: Date = Date()
var body: some View {
VStack {
Child1View(day: $day)
Child2View(day: day)
}
}
}
struct Child2View: View {
#StateObject private var viewModel = Child2ViewModel()
var day: Date
var body: some View {
Text("Child2View")
.onReceive(Just(day)) { // whenever the parent `day` changes, update the viewModel
guard viewModel.day != $0 else { return }
viewModel.day = $0
}
}
}

Swiftui #EnvironmentObject update in View

I am using an #EnvironmentObject (which is the ViewModel) and I have a demoData() function.
When I press it the data does change but my View is not updated.
How do I get the data to change in the View?
Thank you.
The view information:
import Combine
import SwiftUI
struct MainView: View {
#EnvironmentObject var entry:EntryViewModel
var body: some View {
TextField("Beg Value", text: self.$entry.data.beg)
TextField("Beg Value", text: self.$entry.data.end)
Button(action: { self.entry.demoData() }) { Text("Demo Data") }
}
}
ViewModel:
class EntryViewModel: ObservableObject {
#Published var data:EntryData = EntryData()
func demoData() {
var x = Int.random(in: 100000..<120000)
x = Int((Double(x)/100).rounded()*100)
data.beg = x.withCommas()
x = Int.random(in: 100000..<120000)
x = Int((Double(x)/100).rounded()*100)
data.end = x.withCommas()
}
Model:
EntryData:ObservableObject {
#Published var beg:String = ""
#Published var end:String = ""
}
This is because EntryData is a class and if you change its properties it will still be the same object.
This #Published will only fire when you reassign the data property:
#Published var data: EntryData = EntryData()
A possible solution is to use a simple struct instead of an ObservableObject class:
struct EntryData {
var beg: String = ""
var end: String = ""
}
When a struct is changed, it's copied and therefore #Published will send objectWillChange.