This is the code I have:
import SwiftUI
import Combine
struct ContentView: View {
#State var searchText: String = ""
#State private var editMode = EditMode.inactive
#ObservedObject var contentVM = ContentVM()
var body: some View {
if self.contentVM.loading {
Text("Loading")
} else {
Text("Not loading")
}
}
}
final class ContentVM: ObservableObject {
#Published var loading = true
private var timer: Timer = Timer()
init() {
self.timer = Timer.scheduledTimer(withTimeInterval: 1.0, repeats: false) { timer in
self.loading = false
print("Not loading any more")
}
}
}
I can see that the console prints out "Not loading any more" correctly, but the content view does not update to show the "Not loading" text.
Edit: It seems objectWillChange.send() does the job, but I feel like a primitive such as a boolean should automatically notify once updated. Am I incorrect?
Related
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
}
}
}
The desired action in the following alert (in a SwiftUI View) only runs after the primaryButton ("Yes") is tapped a second time (on the second appearance of the alert):
.alert(isPresented: $viewModel.showingAlert) {
Alert(
title: Text("Confirm your Selection"),
message: Text("Are you sure?"),
primaryButton: .default (Text("Yes")) {
handleGameOver()
},
secondaryButton: .destructive (
Text("No (try again)"))
)
}
As you can see below, handleGameOver() updates two bools in viewModel, which is "observed" by an SKScene where "showingSolution == true" adds a childNode to the scene.
func handleGameOver() {
viewModel.showingSolution = true
viewModel.respondToTap = false
gameOver = true
}
For Further Reference...
Here is how I have things set up:
The GameViewModel:
final class GameViewModel: ObservableObject {
#Published var showingAlert = false
#Published var tapOnTarget = false
#Published var respondToTap = true
#Published var showingSolution = false
}
In the SwiftUI View:
struct GameView: View {
#ObservedObject var viewModel: GameViewModel
#Binding var showingGameScene : Bool
#Binding var gameOver: Bool
var scene: SKScene {
let scene = GameScene()
scene.size = CGSize(width: 400, height: 300)
scene.scaleMode = .aspectFit
scene.backgroundColor = UIColor(.clear)
scene.viewModel = viewModel
return scene
}
var body: some View { ...
SpriteView(scene: scene)
...
Finally, in the SKScene:
class GameScene: SKScene {
var viewModel: GameViewModel?
...
"showingAlert" is set to true with "viewModel?.showingAlert = true" in "touchesBegan."
I can't be way off, since things work on the second attempt. But clearly that's not good enough.
What am I doing wrong?🤔
Chastened by a comment from Cuneyt, I revisited my problematic post and was able to spot my error in the process:
In the GameView, I was using
#ObservedObject var viewModel: GameViewModel
The object is created in the GameView, so I needed to use:
#StateObject var viewModel: GameViewModel
The discussion at
What is the difference between ObservedObject and StateObject in SwiftUI
was helpful.
GIF of Entire Screen Refreshing
I am currently learning combine and MVVM. My problem is when I try to use a timer.publish, eventually I'm going to create a stop button, it causes the entire screen to refresh instead of the Text I have .onReceive.
I was hoping someone could provide me some insight on how I'm using publishers and observers incorrectly.
View:
import SwiftUI
import Combine
struct ApptCardView: View {
#ObservedObject var apptCardVM: ApptCardViewModel
#State var currentDate = Date()
let timer = Timer.publish(every: 1, on: .main, in: .common).autoconnect()
var body: some View {
VStack {
Text("\(currentDate)")
.onReceive(timer) { input in
self.currentDate = input
}
Picker("Seizure Type", selection: $apptCardVM.typeIndex) {
ForEach(0..<apptCardVM.typeChoice.count) {
Text(self.apptCardVM.typeChoice[$0])
}
}.pickerStyle(SegmentedPickerStyle())
}
}
}
View Model:
import Foundation
import Combine
class ApptCardViewModel: ObservableObject, Identifiable {
#Published var appt: ApptEvent
#Published var typeChoice = ["Quick", "Long", "FullService"]
#Published var typeIndex: Int = 0
private var cancellables = Set<AnyCancellable>()
init(appt: ApptEvent) {
self.appt = appt
}
}
If you want to refresh only a part of body, then separate that part into dedicated subview, eg:
struct ApptCardView: View {
#ObservedObject var apptCardVM: ApptCardViewModel
var body: some View {
VStack {
CurrentDateView() // << here !!
Picker("Seizure Type", selection: $apptCardVM.typeIndex) {
ForEach(0..<apptCardVM.typeChoice.count) {
Text(self.apptCardVM.typeChoice[$0])
}
}.pickerStyle(SegmentedPickerStyle())
}
}
}
struct CurrentDateView: View {
#State private var currentDate = Date()
let timer = Timer.publish(every: 1, on: .main, in: .common).autoconnect()
var body: some View {
Text("\(currentDate)")
.onReceive(timer) { input in
self.currentDate = input // << refresh only own body !!
}
}
}
I have a button that triggers my view state. As I have now added a network call, I would like my view model to replace the #State with its #Publihed variable to perform the same changes.
How to use my #Published in the place of my #State variable?
So this is my SwiftUI view:
struct ContentView: View {
#ObservedObject var viewModel = OnboardingViewModel()
// This is the value I want to use as #Publisher
#State var isLoggedIn = false
var body: some View {
ZStack {
Button(action: {
// Before my #State was here
// self.isLoggedIn = true
self.viewModel.login()
}) {
Text("Log in")
}
if isLoggedIn {
TutorialView()
}
}
}
}
And this is my model:
final class OnboardingViewModel: ObservableObject {
#Published var isLoggedIn = false
private var subscriptions = Set<AnyCancellable>()
func demoLogin() {
AuthRequest.shared.login()
.sink(
receiveCompletion: { print($0) },
receiveValue: {
// My credentials
print("Login: \($0.login)\nToken: \($0.token)")
DispatchQueue.main.async {
// Once I am logged in, I want this
// value to change my view.
self.isLoggedIn = true } })
.store(in: &subscriptions)
}
}
Remove state and use view model member directly, as below
struct ContentView: View {
#ObservedObject var viewModel = OnboardingViewModel()
var body: some View {
ZStack {
Button(action: {
self.viewModel.demoLogin()
}) {
Text("Log in")
}
if viewModel.isLoggedIn { // << here !!
TutorialView()
}
}
}
}
Hey Roland I think that what you are looking for is this:
$viewMode.isLoggedIn
Adding the $ before the var will ensure that SwiftUI is aware of its value changes.
struct ContentView: View {
#ObservedObject var viewModel = OnboardingViewModel()
var body: some View {
ZStack {
Button(action: {
viewModel.login()
}) {
Text("Log in")
}
if $viewMode.isLoggedIn {
TutorialView()
}
}
}
}
class OnboardingViewModel: ObservableObject {
#Published var isLoggedIn = false
func login() {
isLoggedIn = true
}
}
I'm trying to fill up a Picker with data fetched asynchronously from external API.
This is my model:
struct AppModel: Identifiable {
var id = UUID()
var appId: String
var appBundleId : String
var appName: String
var appSKU: String
}
The class that fetches data and publish is:
class AppViewModel: ObservableObject {
private var appStoreProvider: AppProvider? = AppProvider()
#Published private(set) var listOfApps: [AppModel] = []
#Published private(set) var loading = false
fileprivate func fetchAppList() {
self.loading = true
appStoreProvider?.dataProviderAppList { [weak self] (appList: [AppModel]) in
guard let self = self else {return}
DispatchQueue.main.async() {
self.listOfApps = appList
self.loading = false
}
}
}
init() {
fetchAppList()
}
}
The View is:
struct AppView: View {
#ObservedObject var appViewModel: AppViewModel = AppViewModel()
#State private var selectedApp = 0
var body: some View {
ActivityIndicatorView(isShowing: self.appViewModel.loading) {
VStack{
// The Picker doesn't bind with appViewModel
Picker(selection: self.$selectedApp, label: Text("")) {
ForEach(self.appViewModel.listOfApps){ app in
Text(app.appName).tag(app.appName)
}
}
// The List correctly binds with appViewModel
List {
ForEach(self.appViewModel.listOfApps){ app in
Text(app.appName.capitalized)
}
}
}
}
}
}
While the List view binds with the observed object appViewModel, the Picker doesn't behave in the same way. I can't realize why. Any help ?
I filed bug report, FB7670992. Apple responded yesterday, suggesting that I confirm this behavior in iOS 14, beta 1. It appears to now have been resolved.
struct ContentView: View {
#ObservedObject var viewModel = ViewModel()
var body: some View {
Picker("", selection: $viewModel.wheelPickerValue) {
ForEach(viewModel.objects) { object in
Text(object.string)
}
}
.pickerStyle(WheelPickerStyle())
.labelsHidden()
}
}
Where
struct Object: Identifiable {
let id = UUID().uuidString
let string: String
}
class ViewModel: ObservableObject {
private var counter = 0
#Published private(set) var objects: [Object] = []
#Published var segmentedPickerValue: String = ""
#Published var wheelPickerValue: String = ""
fileprivate func nextSetOfValues() {
let newCounter = counter + 3
objects = (counter..<newCounter).map { value in Object(string: "\(value)") }
let id = objects.first?.id ?? ""
segmentedPickerValue = id
wheelPickerValue = id
counter = newCounter
}
init() {
let timer = Timer.scheduledTimer(withTimeInterval: 2, repeats: true) { [weak self] timer in
guard let self = self else { timer.invalidate(); return }
self.nextSetOfValues()
}
timer.fire()
}
}
Results in:
I can't put this into your code because it is incomplete but here is a sample.
Pickers aren't meant to be dynamic. They have to be completely reloaded.
class DynamicPickerViewModel: ObservableObject {
#Published private(set) var listOfApps: [YourModel] = []
#Published private(set) var loading = false
fileprivate func fetchAppList() {
loading = true
DispatchQueue.main.async() {
self.listOfApps.append(YourModel.addSample())
self.loading = false
}
}
init() {
fetchAppList()
}
}
struct DynamicPicker: View {
#ObservedObject var vm = DynamicPickerViewModel()
#State private var selectedApp = ""
var body: some View {
VStack{
//Use your loading var to reload the picker when it is done
if !vm.loading{
//Picker is not meant to be dynamic, it needs to be completly reloaded
Picker(selection: self.$selectedApp, label: Text("")) {
ForEach(self.vm.listOfApps){ app in
Text(app.name!).tag(app.name!)
}
}
}//else - needs a view while the list is being loaded/loading = true
List {
ForEach(self.vm.listOfApps){ app in
Text(app.name!.capitalized)
}
}
Button(action: {
self.vm.fetchAppList()
}, label: {Text("fetch")})
}
}
}
struct DynamicPicker_Previews: PreviewProvider {
static var previews: some View {
DynamicPicker()
}
}