I am trying to learn SwiftUI and MVVM by coding a little game and ran into a problem.
I want to show popups once my model reached certain points. So I coded a popup with a #Binding var of type Bool that decides whether the popup is shown or not. My main view has an #State var showPopup that is "bonded" to the popup view.
To see if I got it right, I created a #Published var "test" in my viewmodel and put .onReceive(viewModel.$test){show in showDrink = show} behind my popup, which just works fine.
What I can't seem to figure out, is how to connect the var from my viewmodel to the model.
Here is the relevant part of my model:
struct game {
.
.
var modelShowPopup: Bool = false
}
Here of my viewmodel:
class game: ObservableObject{
//#Published private var test: Bool = false <- just for testing
#Published private var model: game = game()
var vmShowPopup: Bool{
get {
game.modelShowPopup
}
set(vmShowPopup) {
game.modelShowPopup = vmShowPopup
}
}
and here of the view:
struct BusDriverView: View {
#ObservedObject var viewModel: BusDriver
#State var showPopup: Bool = false
var portraitLayout: some View{
ZStack{
deckbody
// this worked:
popup(title: "", message: "", buttonText: "", show: $showPopup).onReceive(viewModel.$test){show in showPopup = show}
// this gets me Error(Instance method 'onReceive(_:perform:)' requires that 'Binding<Bool>' conform to 'Publisher'):
popup(title: "", message: "", buttonText: "", show: $showPopup).onReceive($viewModel.vmShowPopup){show in showPopup = show}
}
}
}
It seems to me that I took a wrong approach, but I don't know how to implement it in the MVVM style. I would be very happy if someone could help me.
Thank you in advance and kind regards,
Victor
Related
in this script the TextField is shown, but it resets to "player 1" after every keystroke. Can anyone help me?
import SwiftUI
class Player: ObservableObject {
#Published var playerData = "player 1"
}
let player = Player()
struct ContentView: View {
#ObservedObject var player: Player
var body: some View {
TextField("player", text: $player.playerData)
}
}
Tried with other code, but without success.
class Player: ObservableObject {
#Published var playerData = "player 1"
static let shared = Player()
}
struct ContentView: View {
#ObservedObject var player = Player.shared
var body: some View {
TextField("player", text: $player.playerData)
}
}
However, usually the model store would be an environmentObject PlayerStore and would contain an array of Player model structs.
I can't update the color of my Text base on the current status of my object.
The text should change color base on the variable status true or false.
I try below to simplify the code of where the data come from.
My contentview:
struct ContentView: View {
#StateObject var gm = GameManager()
#State var openSetting = false
var body: some View {
Button {
openSetting.toggle()
} label: {
Text("Setting")
}
}
}
ContentView has a SettingView where I'm selecting setting and where I want to update my textColor based on the status of object
struct SettingView: View {
#StateObject var gm : GameManager
var body: some View {
ScrollView(.horizontal, showsIndicators: true) {
HStack(spacing: 20) {
ForEach(gm.cockpit.ecamManager.door.doorarray) { doorName in
Button {
gm.close(door: doorName.doorName)
} label: {
Text(doorName.doorName)
// Here where I want to change color
.foregroundColor(doorName.isopen ? .orange : .green)
}
}
}
}
}
}
The data come from GameManager which inside has a variable called cockpit:
class GameManager: NSObject, ObservableObject, ARSessionDelegate, ARSCNViewDelegate {
#Published var cockpit = MakeCockpit() // create the cockpit
// do other stuff
}
MakeCockpit :
class MakeCockpit: SCNNode, ObservableObject {
#Published var ecamManager = ECAMManager()
// do other stuff
ECAMManager:
class ECAMManager: ObservableObject {
#Published var door = ECAMDoor()
#Published var stanby = ECAMsby()
}
And Finally... the Array I want to watch is in ECAMDoor class:
class ECAMDoor: ObservableObject {
#Published var doorarray : [Door] = [] // MODEL
}
Now everything work fine as expected but the #Publish of the door array not update my color in the setting view. I need to close the view and open again to se the color update.
Is someone can tell me where I mistake? I probably missed something .. hope I been clear (to many instance of class inside other class)
Using a TextField on a mac app, when I hit 'return' it resets to its original value, even if the underlying binding value is changed.
import SwiftUI
class ViewModel {
let defaultS = "Default String"
var s = ""
var sBinding: Binding<String> {
.init(get: {
print("Getting binding \(self.s)")
return self.s.count > 0 ? self.s : self.defaultS
}, set: {
print("Setting binding")
self.s = $0
})
}
}
struct ContentView: View {
#State private var vm = ViewModel()
var body: some View {
TextField("S:", text: vm.sBinding)
.padding()
}
}
Why is this? Shouldn't it 'get' the binding value and use that? (i.e. shouldn't I see my print statement "Getting binding" in the console after I hit 'return' on the textfield?).
Here you go!
class ViewModel: ObservableObject {
#Published var s = "Default String"
}
struct ContentView: View {
#StateObject private var vm = ViewModel()
var body: some View {
TextField("S:", text: $vm.s)
.padding()
}
}
For use in multiple views, in every view where you'd like to use the model add:
#EnvironmentObject private var vm: ViewModel
But don't forget to inject the model to the main view:
ContentView().environmentObject(ViewModel())
I have a view with a separate view model for it's logic. In my view model I've created a binding and I want the Toggle in my View to reflect and act on this. But it the moment, the view reads the initial state of my binding, but it does not allow me to update it (I can't move the toggle box). And I have no idea why this is.
This is my View (simplified):
public var viewModel: MyViewModel // passed as a dependency to my view
var body: some View {
Toggle("Test", isOn: viewModel.isOn)
}
This is the code in my ViewModel:
public var isOn: Binding<Bool> = .constant(false) {
didSet {
print("Binding in practice!")
}
}
As I said, the code runs, and the initial value for isOn is respected: if I set it to .constant(true) or .constant(false) the checkbox is in the correct state. But I am not allowed to change the checkbox. Also the print()-statement is never executed. So it seems to me there are 2 problems:
I cannot change the state for isOn
The didSet is not executed
Can anyone point me in the right direction?
Edit:
So, actually some of you pointed my in the direction I've already tried and that did not work. In the above writing I simplified my use case, but it's actually a bit more abstract than that: I've got a protocol for my View Model that I use as a dependency. What I've got working now (with binding and observing) is the following:
ViewModelProtocol + ViewModel:
public protocol ViewModelProtocol: ObservableObject {
var isOn: Binding<Bool> { get }
}
public class ViewModel: ViewModelProtocol {
private var _isOn: Bool = false
public var isOn: Binding<Bool> {
Binding<Bool>(
get: { self._isOn },
set: {
self._isOn = $0
// custom code
}
)
}
// More code that has #Published properties
}
View:
struct MyView<Model>: View where Model: ViewModelProtocol {
#ObservedObject var viewModel: Model
var body: some View {
Toggle("Test", isOn: viewModel.isOn)
// More code that uses #Published properties
}
}
Once again, I simplified the example and stripped out all clutter, but with this setup I am able to do what I want. However, I'm still not sure if this is the correct way to do this.
The implementation of making my view generic is based on https://stackoverflow.com/a/59504489/1471590
If you want to drive your view from the properties of the view model, then make it an ObservableObject
class ViewModel: ObservableObject {
#Published var isOn = false {
didSet {
print("Binding in practice")
}
}
}
And in your view, you can bind the toggle to this value:
struct ContentView: View {
#StateObject private var viewModel = ViewModel()
var body: some View {
Toggle("Test", isOn: $viewModel.isOn)
}
}
After some more tinkering and the response of #RajaKishan I came up with the following solution that works:
private var _isOn: Bool = false
public var isOn: Binding<Bool> {
Binding<Bool>(
get: { self._isOn },
set: {
self._isOn = $0
print("Room for custom logic")
}
)
}
Aim:
I have a model which is an ObservableObject. It has a Bool property, I would like to use this Bool property to initialise a #Binding variable.
Questions:
How to convert an #ObservableObject to a #Binding ?
Is creating a #State the only way to initialise a #Binding ?
Note:
I do understand I can make use of #ObservedObject / #EnvironmentObject, and I see it's usefulness, but I am not sure a simple button needs to have access to the entire model.
Or is my understanding incorrect ?
Code:
import SwiftUI
import Combine
import SwiftUI
import PlaygroundSupport
class Car : ObservableObject {
#Published var isReadyForSale = true
}
struct SaleButton : View {
#Binding var isOn : Bool
var body: some View {
Button(action: {
self.isOn.toggle()
}) {
Text(isOn ? "On" : "Off")
}
}
}
let car = Car()
//How to convert an ObservableObject to a Binding
//Is creating an ObservedObject or EnvironmentObject the only way to handle a Observable Object ?
let button = SaleButton(isOn: car.isReadyForSale) //Throws a compilation error and rightly so, but how to pass it as a Binding variable ?
PlaygroundPage.current.setLiveView(button)
Binding variables can be created in the following ways:
#State variable's projected value provides a Binding<Value>
#ObservedObject variable's projected value provides a wrapper from which you can get the Binding<Subject> for all of it's properties
Point 2 applies to #EnvironmentObject as well.
You can create a Binding variable by passing closures for getter and setter as shown below:
let button = SaleButton(isOn: .init(get: { car.isReadyForSale },
set: { car.isReadyForSale = $0} ))
Note:
As #nayem has pointed out you need #State / #ObservedObject / #EnvironmentObject / #StateObject (added in SwiftUI 2.0) in the view for SwiftUI to detect changes automatically.
Projected values can be accessed conveniently by using $ prefix.
You have several options to observe the ObservableObject. If you want to be in sync with the state of the object, it's inevitable to observe the state of the stateful object. From the options, the most commons are:
#State
#ObservedObject
#EnvironmentObject
It is upto you, which one suits your use case.
No. But you need to have an object which can be observed of any change made to that object in any point in time.
In reality, you will have something like this:
class Car: ObservableObject {
#Published var isReadyForSale = true
}
struct ContentView: View {
// It's upto you whether you want to have other type
// such as #State or #ObservedObject
#EnvironmentObject var car: Car
var body: some View {
SaleButton(isOn: $car.isReadyForSale)
}
}
struct SaleButton: View {
#Binding var isOn: Bool
var body: some View {
Button(action: {
self.isOn.toggle()
}) {
Text(isOn ? "Off" : "On")
}
}
}
If you are ready for the #EnvironmentObject you will initialize your view with:
let contentView = ContentView().environmentObject(Car())
struct ContentView: View {
#EnvironmentObject var car: Car
var body: some View {
SaleButton(isOn: self.$car.isReadyForSale)
}
}
class Car: ObservableObject {
#Published var isReadyForSale = true
}
struct SaleButton: View {
#Binding var isOn: Bool
var body: some View {
Button(action: {
self.isOn.toggle()
}) {
Text(isOn ? "On" : "Off")
}
}
}
Ensure you have the following in your SceneDelegate:
// Create the SwiftUI view that provides the window contents.
let contentView = ContentView()
.environmentObject(Car())
In my case i used .constant(viewModel) to pass viewModel to ListView #Binding var viewModel
Example
struct CoursesView: View {
#StateObject var viewModel = CoursesViewModel()
var body: some View {
ZStack {
ListView(viewModel: .constant(viewModel))
ProgressView().opacity(viewModel.isShowing)
}
}
}
struct ListView: View {
#Binding var viewModel: CoursesViewModel
var body: some View {
List {
ForEach(viewModel.courses, id: \.id) { course in
Text(couse.imageUrl)
}
}
}
}