I have a date selector in a view and, once the user enters a date and saves I display a new view with a toggle. Ideally, once the users flips the toggle I'd like to be able to set a reminder using the date field already entered.
I have created an ObservableObject
import SwiftUI
import Combine
class UpdateVM: ObservableObject{
#Published var reminderDate = Date() {didSet {
print("set")
}
which I declare in the View as:
#ObservedObject var updateVM = UpdateVM()
if(self.isToggle){
updateVM.reminderDate = flossTheCat.reminderDate!
}
I get an error "Type '()' cannot conform to 'View'; only struct/enum/class types can conform to protocols"
This works fine in the action area of a button press but I don't see if it's possible to react to a toggle flip - is the toggle just designed to reflect UI changes and should I implement a button instead ? Definitely having a hard time adjusting to the SwiftUI paradigm even if it makes sense overall
Thanks !
per the request - here is where it does work as I hoped it would (via a button)
trailing: Button(action: {
do {
let flossingReminders = FlossingPets.init(context: self.context)
self.flossingVM.reminderDate = self.flossingDate
if self.context.hasChanges {
try self.context.save()
}
}catch {
print(error)
}
Related
The SwiftUI PhotoPicker is great for creating a button/label to press & then show a Photo Picker when the label is pressed. However, I'd like to invoke a photo picker not after the Picker's label is pressed, but after a conditional test has passed.
For example, if the user clicks on a button that would invoke a Photo Picker, I'd like to first check to see if the record the image will be attached to has been saved. If the record has been saved, I want to launch the picker. If it hasn't been saved, I'll show an alert asking if they want to save or cancel. If they select save, I'll save the record, THEN I'd like to invoke the photo picker automatically.
So can I invoke the Picker programmatically rather than have the user click it? Thanks for advice!
From iOS 16 you can do this by using the photosPicker(isPresented:
struct DemoView: View {
#ObservedObject var viewModel: DemoViewModel
var body: some View {
VStack {
Text("Demo Project")
}
.photosPicker(isPresented: $viewModel.shouldPresentPhotoPicker, selection: $viewModel.selectedPickerItem)
}
}
class DemoViewModel: ObservableObject {
#Published var shouldPresentPhotoPicker = false
#Published var selectedPickerItem: PhotosPickerItem?
func saveTheRecord() {
/// Make an async call, and wait
shouldPresentPhotoPicker = true // Shows the Picker
}
}
I have a VM that is implemented as follows:
LoginViewModel
class LoginViewModel: ObservableObject {
var username: String = ""
var password: String = ""
}
In my ContentView, I use the VM as shown below:
#StateObject private var loginVM = LoginViewModel()
var body: some View {
NavigationView {
Form {
TextField("User name", text: $loginVM.username)
TextField("Password", text: $loginVM.password)
Every time I type something in the TextField it shows the following message in the output window:
Binding<String> action tried to update multiple times per frame.
Binding<String> action tried to update multiple times per frame.
Binding<String> action tried to update multiple times per frame.
It is a message and not an error.
If I decorate my username and password properties with #Published then the message goes away but the body is rendered each time I type in the TextField.
Any ideas what is going on and whether I should use #Published or not. I don't think I will gain anything from putting the #Published attribute since this is a one-way binding and I don't want to display anything on the view once the username changes.
If I decorate my username and password properties with #Published then the message goes away
This is the correct solution. You need to use #Published on those properties because that is how SwiftUI gets notified when the properties change.
the body is rendered each time I type in the TextField
That is fine. Your body method is not expensive to compute.
I don't think I will gain anything from putting the #Published attribute since this is a one-way binding
You cannot be sure SwiftUI will work correctly (now or in future releases) if you don't use #Published. SwiftUI expects to be notified when the value of a Binding changes, even when a built-in SwiftUI component like TextField causes the change.
For the simple case - the state is kept in the same view or in a ModelSupport class, consists of strings or other primitive types, and there's only one of each, #Published will work fine.
I got this error with a model class containing an array of structs and using a List, and every time you type inside a TextField inside a list (or every time you select an item in a list), the view gets refreshed, and the error gets triggered.
I am thus using a DelayedTextField:
struct DelayedTextField: View {
var title: String = ""
#Binding var text: String
#State private var tempText: String = ""
var body: some View {
TextField(title, text: $tempText, onEditingChanged: { editing in
if !editing {
$text.wrappedValue = tempText
}
})
.onAppear {
tempText = text
}
}
}
and the binding update error is no more.
What is the correct way to implement a Picker component with specific logic within a Section element?
I would like to have each type displayed in a separate row.
var types = ["Books", "Films", "Music"]
var body: some View {
Form {
Section(header: Text("Type")) {
TextField("Type", text: $newCategoryType)
// Picker
}
}
}
First you must have a #State property that can be updated based on what selection the user makes, say in this case we have this
#State private var selectedType = "Books"
Then you will implement a Picker SwiftUI struct as follows
Picker("Please choose a type", selection: $selectedType) {
ForEach(types, id: \.self) {
Text($0)
}
}
Note that the \.self is really important for ForEach to distinguish between each element inside the list, without which the Picker won't perform the selection action correctly.
The above is enough for doing the job of displaying each option as a row since that is the default behaviour of ForEach
Additionally if you want to customise the look and feel of the picker
you would like to see .pickerStyle() view modifier, for which the docs and examples are mentioned
Also
Tip: Because pickers in forms have this navigation behavior, it’s important you present them in a NavigationView on iOS otherwise you’ll find that tapping them doesn’t work. This might be one you create directly around the form, or you could present the form from another view that itself was wrapped in a NavigationView.
Is there a way to make a #Published variable that only publishes its value when the new value is different from the old one?
Right now if we have
#Published var test: Bool = false
and we do
test = false
test = false
test = false
the publisher is called 3 times. This is quite annoying as it sometimes causes my SwiftUI Views to be recreated because somewhere higher up in the hierarchy a publisher was set to the value it previously was set, trough another publisher that was triggered (and that destroys text field inputs because view models through the hierarchy are recreated when that happens).
is there a way of only publishing when it goes from false to true or vice versa?
An example scenario:
We create a user object in our app, and we want to add a car to the user. The app should immediately show the "add car" view if no car is found, otherwise show the main application view. For that we have a listener somewhere. On our top level view we have:
#ObservedObject var viewModel = UserViewModel()
var body: some View {
if !viewModel.hasVehicles {
return AnyView(AddVehicleView(viewModel:AddVehicleViewModel())
} else {
return AnyView(UserMainView(user: user))
}
}
}
in our UserViewModel we have
class UserViewModel: ObservableObject {
#Published var hasVehicles: Bool = false
some code that updates that boolean when certain listeners trigger.
Inside AddVehicleView we have a form that allows the user to fill out some text fields and save the vehicle.
Now imagine that for some reason the code that updates the hasVehicles property is triggered, but there still are no vehicles. What happens:
hasVehicles = false
and the top level view is re-evaluated, resulting in return AnyView(AddVehicleView(viewModel:AddVehicleViewModel()) being executed, and my form with text fields is emptied.
I suppose in this case I could solve it by putting AddVehicleViewModel() as a property inside the View struct, but that wouldn't solve it in the case when we want this to be executed multiple times, as that would mean next time the view gets built it will show the data of the last time we created that view, as we reuse the view model.
Use Combine's removeDuplicates() operator in the code that updates the property. For example, the view model could create a publisher that updates a boolean property based on the value of two other boolean properties:
#Published var hasTrucks: Bool
#Published var hasCars: Bool
#Published var hasVehicles: Bool
func createVehiclePublisher() {
Publishers.CombineLatest($hasTrucks, $hasCars)
.map { $0 || $1 }
.removeDuplicates()
.assign(to: &$hasVehicles)
}
Using removeDuplicates() causes hasVehicles to only be updated when there would be a change in its value.
Try to use regular property with manual publisher activation, like
class UserViewModel: ObservableObject {
var hasVehicles: Bool = false {
willSet {
if hasVehicles != newValue {
objectWillChange.send()
}
}
}
// ... other code
}
I have the following SwiftUI View:
struct ProductView: View {
#ObservedObject var productViewModel: ProductViewModel
var body: some View {
VStack {
ZStack(alignment: .top) {
if(self.productViewModel.product != nil) {
URLImage(url: self.productViewModel.product!.imageurl, itemColor: self.productViewModel.selectedColor)
}
else {
Image("loading")
}
}
}
}
that observes a ProductViewModel
class ProductViewModel: ObservableObject {
#Published var selectedColor: UIColor = .white
#Published var product: Product?
private var cancellable: AnyCancellable!
init(productFuture: Future<Product, Never>) {
self.cancellable = productFuture.sink(receiveCompletion: { comp in
print(comp)
}, receiveValue: { product in
self.product = product
print(self.product) // this prints the expected product. The network call works just fine
})
}
The Product is a Swift struct that contains several string properties:
struct Product {
let id: String
let imageurl: String
let price: String
}
It is fetched from a remote API. The service that does the fetching returns a Combine future and passes it to the view model like so:
let productFuture = retrieveProduct(productID: "1")
let productVM = ProductViewModel(productFuture: productFuture)
let productView = ProductView(productViewModel: productViewModel)
func retrieveProduct(productID: String) -> Future<Product, Never>{
let future = Future<Product, Never> { promise in
// networking logic that fetches the remote product, once it finishes the success callback is invoked
promise(.success(product))
}
return future
}
For the sake of brevity, I've excluded the networking and error handling logic since it is irrelevant for the case at hand. To reproduce this as quickly as possible, just initialize a mock product with some dummy values and pass it to the success callback with a delay like this:
let mockproduct = Product(id: "1", imageurl: "https://exampleurl.com", price: "$10")
DispatchQueue.main.asyncAfter(deadline: .now() + 2.0, execute: {
promise(.success(mockproduct))
})
Once the product arrives over the network, it is assigned to the published product property.
The fetching works and the correct value is assigned to the published property. Obviously this happens after the view has been created since the network call takes some time. However, the View never updates even though the published object is changed.
When I pass the product directly through the View Model initializer rather than the future, it works as expected and the view displays the correct product.
Any suggestions on why the view does not react to changes in the state of the view model when it is updated asynchronously through the combine future?
EDIT: When I asked this question I had the ProductViewModel + ProductView nested inside another view. So basically the productview was only a part of a larger CategoryView. The CategoryViewmodel initialized both the ProductViewModel and the ProductView in a dedicated method:
func createProductView() -> AnyView {
let productVM = productViewModels[productIndex]
return AnyView(ProductView(productViewModel: productVM))
}
which was then called by the CategoryView on every update. I guess this got the Published variables in the nested ProductViewModel to not update correctly because the view hierarchy from CategoryView downwards got rebuilt on every update. Accordingly, the method createProductView got invoked on every new update, resulting in a completely new initialization of the ProductView + ProductViewModel.
Maybe someone with more experience with SwiftUI can comment on this.
Is it generally a bad idea to have nested observable objects in nested views or is there a way to make this work that is not an antipattern?
If not, how do you usually solve this problem when you have nested views that each have their own states?
I have been iterating on patterns like this to find what I think works best. Not sure what the problem is exactly. My intuition suggests that SwiftUI is having trouble making updates on the != nil part.
Here is the pattern that I have been using which has been working.
Define an enum for states in your networking logic
public enum NetworkingModelViewState {
case loading
case hasData
case noResults
case error
}
Add the enumeration as a variable on your "View Model"
class ProductViewModel: ObservableObject {
#Published public var state: NetworkingModelViewState = .loading
}
Update the state as you progress through your networking
self.cancellable = productFuture.sink(receiveCompletion: { comp in
print(comp)
}, receiveValue: { product in
self.product = product
self.state = NetworkingModelViewState.hasData
print(self.product) // this prints the expected product. The network call works just fine
})
Now make a decision in your SwiftUI based on the Enum value
if(self.productViewModel.state == NetworkingModelViewState.hasData) {
URLImage(url: self.productViewModel.product!.imageurl, itemColor: self.productViewModel.selectedColor)
}
else {
Image("loading")
}
Musings ~ It's hard to debug declarative frameworks. They are powerful and we should keep learning them but be aware of getting stuck. Moving too SwiftUI has forced me to really think about MVVM. My takeaway is that you really need to separate out every possible variable that controls your UI. You should not rely on checks outside of reading a variable. The Combine future pattern has a memory leak that Apple will fix next release. Also, you will be able to switch inside SwiftUI next release.