objectWillChange do not update view - ios

I have ViewModel which looks like this:
class ItemsListViewModel : ObservableObject{
var response : ItemsListResponse? = nil
var itemsList : [ListItem] = []
var isLoading = true
let objectWillChange = PassthroughSubject<Void, Never>()
func getItems() {
self.isLoading = true
ApiManager.shared.getItems()
.sink(receiveCompletion: {completion in
}, receiveValue: {
self.response = data
self.isLoading = false
self.objectWillChange.send()
})
}
}
When I receive data from network request I use self.objectWillChange.send() to notify view, but view do not react to this.
My views :
ItemsView
struct ItemsView: View {
var body: some View {
VStack{
Text("Some Title")
ItemsListView()
}
}
}
ItemsListView
struct ItemsListView: View {
#ObservedObject var myViewModel = ItemsListViewModel()
var body: some View {
VStack{
Text("\(self.myViewModel.response?.total")
}.onAppear{
self.myViewModel.getItems()
}
}
}
But the interesting thing, that if I use ItemsListView not inside
ItemsView everything works perfectly. How can i solve this problem?

try this ( i simplified just your model to test in playground)
you can copy directly the code in playground and check
struct Model {
var items : [String]
}
class ItemsListViewModel : ObservableObject {
#Published var items : [String] = ["Test 1", "Test2"]
}
let myViewModel = ItemsListViewModel()
struct ItemsView: View {
var body: some View {
VStack{
Text("Some Title")
ItemsListView().environmentObject(myViewModel)
}
}
}
struct ItemsListView: View {
#EnvironmentObject private var model : ItemsListViewModel
var body: some View {
VStack{
Text("\(model.items.count)")
}
}
}
struct ContentView: View {
var body: some View {
ItemsView()
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView().environmentObject(myViewModel)
}
}

Using #Published for properties of ObservableObject does fix your issue. See simplified below demo:
import SwiftUI
import Combine
class ItemsListViewModel : ObservableObject{
#Published var response = ""
var isLoading = true
func getData() {
self.isLoading = true
DispatchQueue.main.async {
Just("test")
.sink(receiveCompletion: {completion in
}, receiveValue: { data in
self.response = data
self.isLoading = false
})
}
}
}
struct ItemsListView: View {
#ObservedObject var myViewModel = ItemsListViewModel()
var body: some View {
VStack{
Text("\(self.myViewModel.response)")
}.onAppear{
self.myViewModel.getData()
}
}
}
struct ItemsView: View {
var body: some View {
VStack{
Text("Some Title")
ItemsListView()
}
}
}
struct TestPublished: View {
var body: some View {
ItemsView()
}
}
struct TestPublished_Previews: PreviewProvider {
static var previews: some View {
TestPublished()
}
}

Related

SwiftUI MVVM Binding List Item

I am trying to create a list view and a detailed screen like this:
struct MyListView: View {
#StateObject var viewModel: MyListViewModel = MyListViewModel()
LazyVStack {
// https://www.swiftbysundell.com/articles/bindable-swiftui-list-elements/
ForEach(viewModel.items.identifiableIndicies) { index in
MyListItemView($viewModel.items[index])
}
}
}
class MyListViewModel: ObservableObject {
#Published var items: [Item] = []
...
}
struct MyListItemView: View {
#Binding var item: Item
var body: some View {
NavigationLink(destination: MyListItemDetailView(item: $item), label: {
...
})
}
}
struct MyListItemDetailView: View {
#Binding var item: Item
#StateObject var viewModel: MyListViewItemDetailModel
init(item: Binding<Item>) {
viewModel = MyListViewItemDetailModel(item: item)
}
var body: some View {
...
}
}
class MyListViewItemDetailModel: ObservableObject {
var item: Binding<Item>
...
}
I am not sure what's wrong with it, but I found that item variables are not synced with each other, even between MyListItemDetailView and MyListItemDetailViewModel.
Is there anyone who can provide the best practice and let me know what's wrong in my implmentation?
I think you should think about a minor restructure of your code, and use only 1
#StateObject/ObservableObject. Here is a cut down version of your code using
only one StateObject source of truth:
Note: AFAIK Binding is meant to be used in View struct not "ordinary" classes.
PS: what is identifiableIndicies?
import SwiftUI
#main
struct TestApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
struct Item: Identifiable {
let id = UUID().uuidString
var name: String = ""
}
struct MyListView: View {
#StateObject var viewModel: MyListViewModel = MyListViewModel()
var body: some View {
LazyVStack {
ForEach(viewModel.items.indices) { index in
MyListItemView(item: $viewModel.items[index])
}
}
}
}
class MyListViewModel: ObservableObject {
#Published var items: [Item] = [Item(name: "one"), Item(name: "two")]
}
struct MyListItemView: View {
#Binding var item: Item
var body: some View {
NavigationLink(destination: MyListItemDetailView(item: $item)){
Text(item.name)
}
}
}
class MyAPIModel {
func fetchItemData(completion: #escaping (Item) -> Void) {
// do your fetching here
completion(Item(name: "new data from api"))
}
}
struct MyListItemDetailView: View {
#Binding var item: Item
let myApiModel = MyAPIModel()
var body: some View {
VStack {
Button(action: fetchNewData) {
Text("Fetch new data")
}
TextField("edit item", text: $item.name).border(.red).padding()
}
}
func fetchNewData() {
myApiModel.fetchItemData() { itemData in
item = itemData
}
}
}
struct ContentView: View {
var body: some View {
NavigationView {
MyListView()
}.navigationViewStyle(.stack)
}
}
EDIT1:
to setup an API to call some functions, you could use something like this:
class MyAPI {
func fetchItemData(completion: #escaping (Item) -> Void) {
// do your stuff
}
}
and use it to obtain whatever data you require from the server.
EDIT2: added some code to demonstrate the use of an API.

SwiftUI manipulate items from a struct from a view

I'd like the ability to edit and put into a new view the 'expenses' the user adds. I've been having problems accessing the data after a new expense has been added. I am able to delete the items and add them up but I'd like to click on the 'expenses' and see and edit the content in them Image of the view
//Content View
import SwiftUI
struct ExpenseItem: Identifiable, Codable {
let id = UUID()
let name: String
let type: String
let amount: Int
}
class Expenses: ObservableObject {
#Published var items = [ExpenseItem]() {
didSet {
let encoder = JSONEncoder()
if let encoded = try?
encoder.encode(items) {
UserDefaults.standard.set(encoded, forKey: "Items")
}
}
}
init() {
if let items = UserDefaults.standard.data(forKey: "Items") {
let decoder = JSONDecoder()
if let decoded = try?
decoder.decode([ExpenseItem].self, from: items) {
self.items = decoded
return
}
}
}
// Computed property that calculates the total amount
var total: Int {
self.items.reduce(0) { result, item -> Int in
result + item.amount
}
}
}
struct ContentView: View {
#ObservedObject var expenses = Expenses()
#State private var showingAddExpense = false
var body: some View {
NavigationView {
List {
ForEach(expenses.items) { item in
HStack {
VStack {
Text(item.name)
.font(.headline)
Text(item.type)
}
Spacer()
Text("$\(item.amount)")
}
}
.onDelete(perform: removeItems)
// View that shows the total amount of the expenses
HStack {
Text("Total")
Spacer()
Text("\(expenses.total)")
}
}
.navigationBarTitle("iExpense")
.navigationBarItems(trailing: Button(action: {
self.showingAddExpense = true
}) {
Image(systemName: "plus")
}
)
.sheet(isPresented: $showingAddExpense) {
AddView(expenses: self.expenses)
}
}
}
func removeItems(at offsets: IndexSet) {
expenses.items.remove(atOffsets: offsets)
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
//AddExpense
import SwiftUI
struct AddView: View {
#Environment(\.presentationMode) var presentationMode
#ObservedObject var expenses: Expenses
#State private var name = ""
#State private var type = "Personal"
#State private var amount = ""
static let types = ["Business", "Personal"]
var body: some View {
NavigationView {
Form {
TextField("Name", text: $name)
Picker("Type", selection: $type) {
ForEach(Self.types, id: \.self) {
Text($0)
}
}
TextField("Amount", text: $amount)
.keyboardType(.numberPad)
}
.navigationBarTitle("Add new expense")
.navigationBarItems(trailing: Button("Save") {
if let actualAmount = Int(self.amount) {
let item = ExpenseItem(name: self.name, type: self.type, amount: actualAmount)
self.expenses.items.append(item)
self.presentationMode
.wrappedValue.dismiss()
}
})
}
}
}
struct AddView_Previews: PreviewProvider {
static var previews: some View {
AddView(expenses: Expenses())
}
}
Remove #observedObject in AddView.
A view cannot change an ObservableObject. ObservableObject is used for being notified when a value is changed.
When you pass the expenses class to AddView, you are giving it a reference. Therefore, AddView can change the expenses, and consequently update ContentView.

Making a combine passthrough publisher less global

Swift 5, iOS 13
I want to use passthroughSubject publisher; but I my gut tells me its a global variable and as such very poor practice. How can make this global variable less global, while still being usable. Here's some code to show what I talking about.
I know there are a dozen other ways to do this, but I wanted to create some simple code to illustrate the issue.
import SwiftUI
import Combine
let switcher = PassthroughSubject<Void,Never>()
struct SwiftUIViewF: View {
#State var nextPage = false
var body: some View {
VStack {
Text("Switcher")
.onReceive(switcher) { (_) in
self.nextPage.toggle()
}
if nextPage {
Page1ViewF()
} else {
Page2ViewF()
}
}
}
}
struct Page1ViewF: View {
var body: some View {
Text("Page 1")
.onTapGesture {
switcher.send()
}
}
}
struct Page2ViewF: View {
var body: some View {
Text("Page 2")
.onTapGesture {
switcher.send()
}
}
}
struct SwiftUIViewF_Previews: PreviewProvider {
static var previews: some View {
SwiftUIViewF()
}
}
Here is possible solution - to hold it in parent and inject into child views:
struct SwiftUIViewF: View {
let switcher = PassthroughSubject<Void,Never>()
#State var nextPage = false
var body: some View {
VStack {
Text("Switcher")
.onReceive(switcher) { (_) in
self.nextPage.toggle()
}
if nextPage {
Page1ViewF(switcher: switcher)
} else {
Page2ViewF(switcher: switcher)
}
}
}
}
struct Page1ViewF: View {
let switcher: PassthroughSubject<Void,Never>
var body: some View {
Text("Page 1")
.onTapGesture {
self.switcher.send()
}
}
}
struct Page2ViewF: View {
let switcher: PassthroughSubject<Void,Never>
var body: some View {
Text("Page 2")
.onTapGesture {
self.switcher.send()
}
}
}
An example using #EnvironmentObject.
Let SDK take care of observing / passing things for you, rather than setting up yourself.
Especially when your usage is a simple toggle.
import SwiftUI
import Combine
final class EnvState: ObservableObject { #Published var nextPage = false }
struct SwiftUIViewF: View {
#EnvironmentObject var env: EnvState
var body: some View {
VStack {
Text("Switcher")
if env.nextPage {
Page1ViewF()
} else {
Page2ViewF()
}
}
}
}
struct Page1ViewF: View {
#EnvironmentObject var env: EnvState
var body: some View {
Text("Page 1")
.onTapGesture {
env.nextPage.toggle()
}
}
}
struct Page2ViewF: View {
#EnvironmentObject var env: EnvState
var body: some View {
Text("Page 2")
.onTapGesture {
env.nextPage.toggle()
}
}
}
struct SwiftUIViewF_Previews: PreviewProvider {
static var previews: some View {
SwiftUIViewF().environmentObject(EnvState())
}
}

How to use NavigationLink to detect name of click NavigationView item

How can the destination of a NavigationLink can modified to detect which item within a list was clicked? An if statement of some sort would be very helpful but all items currently do the same thing.
import SwiftUI
let textTitle = NSLocalizedString("PageTitle", comment: "")
let textItemA = NSLocalizedString("ItemA", comment: "")
let textItemB = NSLocalizedString("ItemB", comment: "")
let textItemC = NSLocalizedString("ItemC", comment: "")
struct ItemMain: Identifiable {
var id = UUID()
var name: String
}
let myItems: [MyItem] = [
MyItem(name: textItemA),
MyItem(name: textItemB),
MyItem(name: textItemC)]
struct ContentView: View {
#State private var showingAlert = false
var body: some View {
NavigationView{
List(myItems) { myItem in
NavigationLink(destination: MyDetailView(myItem: myItem)) {
Text(myItem.name)
}
}
.navigationBarTitle(textTitle)
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
struct MyDetailView: View {
var myItem: MyItem
var body: some View {
Text(myIem.name)
}
}
I customized your MyItem model as it is not provided by you
enum MyItemType {
case navigation
case alert
}
struct MyItem: Identifiable {
let id = UUID()
let name: String
var type: MyItemType = .alert
}
And made changed to your ContentView
struct ContentView: View {
#State private var showingAlert = false
var body: some View {
NavigationView{
listView
.navigationBarTitle(textTitle)
}
.alert(isPresented: $showingAlert) {
//Customise your alert according to your need
Alert(title: Text("Alert"))
}
}
private var listView: some View {
List(myItems) { myItem in
if myItem.type == .navigation {
NavigationLink(destination: MyDetailView(myItem: myItem)) {
Text(myItem.name)
}
} else {
Button(action: {
self.showingAlert = true
}) {
Text(myItem.name)
}
}
}
}
}
And lastly your myItems array:
let myItems: [MyItem] = [
MyItem(name: textItemA, type: MyItemType.navigation),
MyItem(name: textItemB),
MyItem(name: textItemC)
]
You can use if statement inside the ForEach to specify special cases:
List(myItems) { myItem in
if (myItem.name == "ItemA") //<<< Here goes your if
{
NavigationLink(destination: MyDetailView(myItem: myItem)) {
Text(myItem.name)
}
}
else
{
//show your alert here

How to bind objects using MVVM design pattern?

I'm trying to change below code(1.) to MVVM architecture(2.) but can't figure out how to bind objects.
I think the problem is FirstView only pass value but not actually a Binding Object, I tried some different ways but always stuck on don't know how to assign Binding Object to #Published.
Could somebody please give a few hints?
(Works fine)
struct FirstView: View {
#State var showSecondView = false
var body: some View {
Button(action: {
self.showSecondView.toggle()
}) {
Text("Show second view")
}
.sheet(isPresented: $showSecondView) {
SecondView(showSecondView: self.$showSecondView)
}
}
}
struct SecondView: View {
#Binding var showSecondView: Bool
var body: some View {
Button(action: {
self.showSecondView.toggle()
}) {
Text("Dismiss")
}
}
}
(MVVM)
struct FirstView: View {
#ObservedObject var vm = FirstViewModel()
var body: some View {
Button(action: {
self.vm.showSecondView.toggle()
}) {
Text("Show second view")
}
.sheet(isPresented: $vm.showSecondView) {
SecondView2(vm: SecondViewModel(showSecondView: self.vm.showSecondView))
}
}
}
class FirstViewModel: ObservableObject {
#Published var showSecondView = false
}
struct SecondView: View {
#ObservedObject var vm: SecondViewModel
var body: some View {
Button(action: {
self.vm.showSecondView.toggle()
}) {
Text("Dismiss")
}
}
}
class SecondViewModel: ObservableObject {
#Published var showSecondView: Bool
//Right here, i'm not sure how to bind 'showSecondView' from FirstView
init(showSecondView: Bool) {
self.showSecondView = showSecondView
}
}
You can pass directly the Binding<Bool> to the second VM but in this way, there's no need to have #Published var and it also doesn't need to be ObservableObject and marked as #ObservedObject. There might be a better solution to this.
struct FirstView: View {
#ObservedObject var vm = FirstViewModel()
var body: some View {
Button(action: {
self.vm.showSecondView.toggle()
}) {
Text("Show second view")
}
.sheet(isPresented: $vm.showSecondView) {
SecondView(vm: SecondViewModel(showSecondView: self.$vm.showSecondView))
}
}
}
class FirstViewModel: ObservableObject {
#Published var showSecondView = false
}
struct SecondView: View {
var vm: SecondViewModel
var body: some View {
Button(action: {
self.vm.showSecondView.wrappedValue.toggle()
}) {
Text("Dismiss")
}
}
}
class SecondViewModel {
var showSecondView: Binding<Bool>
init(showSecondView: Binding<Bool>) {
self.showSecondView = showSecondView
}
}

Resources