NavigationLink destination immediately disappear after loading - swift

I'm quite new to Swift and I'm struggling with this implementation. I moved my code to playground so it's easier for you to debug if you copy/paste on your Xcode.
Basically once loading View3 the view immediately disappear and you are pushed back to View2.
I identify the issue to be with the categories array on the View2. If I separate the 3 categories in 3 NavigationLink (instead of looping) the code works just fine.
I just don't understand why this doesn't work and I'd love if you help me find out what's wrong with this implementation?
import UIKit
import Foundation
import SwiftUI
import PlaygroundSupport
struct Article: Identifiable {
var id = UUID()
var title : String
}
struct Category: Identifiable {
var id = UUID()
var name : String
}
class DataManager: ObservableObject{
#Published var articles : [Article] = []
func getArticles(){
let article = Article(title: "Just a test")
if !articles.contains(where: {$0.title == article.title}) {
articles.append(article)
}
}
func clearArticles(){
articles.removeAll()
}
}
struct View1: View{
#StateObject var dataManager = DataManager()
var body: some View {
NavigationView{
List(){
NavigationLink(destination: View2(), label: { Text("View 2") })
}
.navigationBarTitle("View 1")
.listStyle(.insetGrouped)
}
.navigationViewStyle(StackNavigationViewStyle())
.environmentObject(dataManager)
}
}
struct View2: View{
let categories = [
Category(name: "Category 1"),
Category(name: "Category 2"),
Category(name: "Category 3")
]
var body: some View {
List(categories){ category in
NavigationLink(destination: View3(category: category), label: { Text(category.name) })
}
.navigationBarTitle("View 2")
.navigationBarTitleDisplayMode(.inline)
}
}
struct View3: View{
#EnvironmentObject var dataManager: DataManager
let category: Category
var body: some View {
List(dataManager.articles) { article in
HStack {
Text(article.title)
}
}.task{
dataManager.getArticles()
}.onDisappear(){
dataManager.clearArticles()
}
.navigationTitle("View 3")
.navigationBarTitleDisplayMode(.inline)
}
}
PlaygroundPage.current.setLiveView(View1())
This is the resulting behaviour:

The Category id is not stable so every time the View2 is init, a new array with different ids is created so the ForEach is creating new NavigationLinks which are not active so the previously active one is gone and it reacts by popping it off the nav stack, try this:
struct Category: Identifiable {
var id: String {
name
}
var name : String
}
But it would be better if you put them in the data store object so you aren't creating them every time View2 is init.

Related

Propertly break down and pass data between views

So I'm still learning Swift and I wanted to cleanup some code and break down views, but I can't seem to figure out how to pass data between views, so I wanted to reach out and check with others.
So let's say that I have MainView() which previously had this:
struct MainView: View {
#ObservedObject var model: MainViewModel
if let item = model.selectedItem {
HStack(alignment: .center, spacing: 3) {
Text(item.title)
}
}
}
Now I created a SecondView() and changed the MainView() content to this:
struct MainView: View {
#ObservedObject var model: MainViewModel
if let item = model.selectedItem {
SecondView(item: item)
}
}
Inside SecondView(), how can I access the item data so that I can use item.title inside SecondView() now?
In order to pass item to SecondView, declare item as a let property and then when you call it with SecondView(item: item), SecondView can refer to item.title.
Here is a complete example expanding on your code:
import SwiftUI
struct Item {
let title = "Test Title"
}
class MainViewModel: ObservableObject {
#Published var selectedItem: Item? = Item()
}
struct MainView: View {
#ObservedObject var model: MainViewModel
var body: some View {
if let item = model.selectedItem {
SecondView(item: item)
}
}
}
struct SecondView: View {
let item: Item
var body: some View {
Text(item.title)
}
}
struct ContentView: View {
#StateObject private var model = MainViewModel()
var body: some View {
MainView(model: model)
}
}

My published variables in my view Model get reset to their default values when i run the code

I have been having problems with updating a published variable in my model, so I tried to replicate the problem with a very basic and simple set of files/codes. So basically in NavLink view, there is a navigation link, which when clicked, it updates the published variable in ListRepository model by giving it a string value of "yes", prints it to the console then navigates to its destination which is called ContentView view. The problem is in ContentView, I tried to print the data contained in the published variable called selectedFolderId hoping it will print "yes", but i noticed that instead of printing the value that was set in NavLink view, it instead printed the default value of "", which was not what was set in NavLink view. Please can anyone explain the reason for this behaviour and explain to me how it can fix this as i am very new in swift ui. That will mean alot.
Please find the supporting files below:
import SwiftUI
struct NavLink: View {
#StateObject var listRepository = ListRepository()
var body: some View {
NavigationView{
ScrollView {
NavigationLink("Hello world", destination: ContentView(listRepository: listRepository))
Text("Player 1")
Text("Player 2")
Text("Player 3")
}
.simultaneousGesture(TapGesture().onEnded{
listRepository.selectedFolderId = "yes"
listRepository.md()
})
.navigationTitle("Players")
}
}
}
struct NavLink_Previews: PreviewProvider {
static var previews: some View {
NavLink()
}
}
import Foundation
class ListRepository: ObservableObject {
#Published var selectedFolderId = ""
func md(){
print("=====")
print(self.selectedFolderId)
print("======")
}
}
import SwiftUI
struct ContentView: View {
#ObservedObject var taskListVM = ShoppingListItemsViewModel()
#ObservedObject var listRepository:ListRepository
var body: some View {
VStack{
Text("content 1")
Text("content 2")
Text("content 3")
}
.onAppear{
taskListVM.addTask()
print("========")
print(listRepository.selectedFolderId)
print("========")
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
class ShoppingListItemsViewModel: ObservableObject {
#Published var listRepository = ListRepository()
#Published var taskCellViewModels = [ShoppingListItemCellViewModel]()
private var cancellables = Set<AnyCancellable>()
init() {
listRepository.$tasks
.map { lists in
lists.map { list in
ShoppingListItemCellViewModel(task: list)
}
}
.assign(to: \.taskCellViewModels, on: self)
.store(in: &cancellables)
}
func addTask() {
listRepository.addTask(task)
}
}
This is a common issue when you first deal with data flow in an app. The problem is straightforward. In your 'NavLink' view you are creating one version of ListRepository, and in ContentView you create a separate and different version of ListRepository. What you need to do is pass the ListRepository created in NavLink into ContentView when you call it. Here is one example as to how:
struct NavLink: View {
#StateObject var listRepository = ListRepository() // Create as StateObject, not ObservedObject
var body: some View {
NavigationView{
ScrollView {
NavigationLink("Hello world", destination: ContentView(listRepository: listRepository)) // Pass it here
Text("Player 1")
Text("Player 2")
Text("Player 3")
}
.simultaneousGesture(TapGesture().onEnded{
listRepository.selectedFolderId = "yes"
listRepository.md()
})
.navigationTitle("Players")
}
}
}
struct ContentView: View {
#ObservedObject var listRepository: ListRepository // Do not create it here, just receive it
var body: some View {
VStack{
Text("content 1")
Text("content 2")
Text("content 3")
}
.onAppear{
print("========")
print(listRepository.selectedFolderId)
print("========")
}
}
}
You should also notice that I created ListRepository as a StateObject. The view that originally creates an ObservableObject must create it as a StateObject or you can get undesirable side effects.

#EnvironmentObject property not working properly in swiftUI

Updating cartArray from ViewModel doesn't append to the current elements, but adds object everytime freshly. I need to maintain cartArray as global array so that it can be accessed from any view of the project. I'm adding elements to cartArray from ViewModel. I took a separate class DataStorage which has objects that can be accessible through out the project
Example_AppApp.swift
import SwiftUI
#main
struct Example_AppApp: App {
var body: some Scene {
WindowGroup {
ContentView().environmentObject(DataStorage())
}
}
}
DataStorage.swift
import Foundation
class DataStorage: ObservableObject {
#Published var cartArray = [Book]()
}
ContentView.swift
import SwiftUI
struct ContentView: View {
#State var showSheetView = false
var body: some View {
NavigationView{
ListViewDisplay()
.navigationBarItems(trailing:
Button(action: {
self.showSheetView.toggle()
}) {
Image(systemName: "cart.circle.fill")
.font(Font.system(.title))
}
)
}.sheet(isPresented: $showSheetView) {
View3()
}
}
}
struct ListViewDisplay: View{
var book = [
Book(bookId: 1 ,bookName: "Catch-22"),
Book(bookId: 2 ,bookName: "Just-Shocking" ),
Book(bookId: 3 ,bookName: "Stephen King" ),
Book(bookId: 4,bookName: "A Gentleman in Moscow"),
]
var body: some View {
List(book, id: \.id) { book in
Text(book.bookName)
NavigationLink(destination: View1(book: book)) {
}
}
}
}
View1Modal.swift
import Foundation
struct Book: Codable, Identifiable {
var id:String{bookName}
var bookId : Int
var bookName: String
}
struct BookOption: Codable{
var name: String
var price: Int
}
View1ViewModel.swift
import Foundation
import Combine
class View1ViewModel : ObservableObject{
var dataStorage = DataStorage()
func addBook (bookId:Int ,bookName : String){
dataStorage.cartArray.append(Book(bookId:bookId, bookName: bookName)) // Adding to global array
print(dataStorage.cartArray)
}
}
View1.swift
import SwiftUI
struct View1: View {
#ObservedObject var vwModel = View1ViewModel()
#EnvironmentObject var datastrg: DataStorage
var book:Book
var body: some View {
Text(book.bookName).font(.title)
Spacer()
Button(action: {
vwModel.addBook(bookId: book.bookId, bookName: book.bookName)
}, label: {
Text("Add Book to Cart")
.frame(maxWidth: .infinity, minHeight: 60)
.background(Color.red)
.foregroundColor(Color.white)
.font(.custom("OpenSans-Bold", size: 24))
})
}
}
View3.swift
import SwiftUI
struct View3: View {
#EnvironmentObject var datastorage : DataStorage
var body: some View {
NavigationView {
List(datastorage.cartArray,id:\.id){book in
VStack{
Text(book.bookName)
.font(.custom("OpenSans-Bold", size: 20))
}
}
.navigationBarTitle(Text("Cart"), displayMode: .inline)
}
}
}
When addBook func is called for the first time it prints as
[Example_App.Book(bookId: 1, bookName: "Catch-22")]
When I go back and come back to this View1 and add another book by calling addBook func it adds as new object to cartArray
[Example_App.Book(bookId: 3, bookName: "Stephen King")]
Printing number of elements in cartArray gives as 1 element instead of 2 elements. When I go to View3 and display the Books in list, cartArray shows as empty(0 elements)
I think there is something wrong with var dataStorage = DataStorage() in ViewModel class. Everytime this is being created freshly, so the prevoius values are not stored. But I couldn't understand how to preserve its state
How to display List in View3 ? Any ideas/ suggestions will be helpful
You need to have one instance of DataStorage that gets passed around. Any time you write DataStorage() that creates a new instance.
.environmentObject will let you inject that one instance into the view hierarchy. Then, you can use the #EnvironmentObject property wrapper to access it within a View.
Inside View1, I used onAppear to set the dataStorage property on View1ViewModel -- that means that it has to be an optional on View1ViewModel since it will not be set in init. The reason I'm avoiding setting it in init is because an #EnvironmentObject is not set as of the init of the View -- it gets injected at render time.
#main
struct Example_AppApp: App {
var dataStorage = DataStorage()
var body: some Scene {
WindowGroup {
ContentView().environmentObject(dataStorage)
}
}
}
class DataStorage: ObservableObject {
#Published var cartArray = [Book]()
}
struct ContentView: View {
#State var showSheetView = false
var body: some View {
NavigationView{
ListViewDisplay()
.navigationBarItems(trailing:
Button(action: {
self.showSheetView.toggle()
}) {
Image(systemName: "cart.circle.fill")
.font(Font.system(.title))
}
)
}.sheet(isPresented: $showSheetView) {
View3()
}
}
}
struct ListViewDisplay: View {
var book = [
Book(bookId: 1 ,bookName: "Catch-22"),
Book(bookId: 2 ,bookName: "Just-Shocking" ),
Book(bookId: 3 ,bookName: "Stephen King" ),
Book(bookId: 4,bookName: "A Gentleman in Moscow"),
]
var body: some View {
List(book, id: \.id) { book in
Text(book.bookName)
NavigationLink(destination: View1(book: book)) {
}
}
}
}
struct Book: Codable, Identifiable {
var id:String{bookName}
var bookId : Int
var bookName: String
}
struct BookOption: Codable{
var name: String
var price: Int
}
class View1ViewModel : ObservableObject{
var dataStorage : DataStorage?
func addBook (bookId:Int ,bookName : String) {
guard let dataStorage = dataStorage else {
fatalError("DataStorage not set")
}
dataStorage.cartArray.append(Book(bookId:bookId, bookName: bookName)) // Adding to global array
print(dataStorage.cartArray)
}
}
struct View1: View {
#ObservedObject var vwModel = View1ViewModel()
#EnvironmentObject var datastrg: DataStorage
var book:Book
var body: some View {
Text(book.bookName).font(.title)
Spacer()
Button(action: {
vwModel.addBook(bookId: book.bookId, bookName: book.bookName)
}, label: {
Text("Add Book to Cart")
.frame(maxWidth: .infinity, minHeight: 60)
.background(Color.red)
.foregroundColor(Color.white)
.font(.custom("OpenSans-Bold", size: 24))
})
.onAppear {
vwModel.dataStorage = datastrg
}
}
}
struct View3: View {
#EnvironmentObject var datastorage : DataStorage
var body: some View {
NavigationView {
List(datastorage.cartArray,id:\.id){book in
VStack{
Text(book.bookName)
.font(.custom("OpenSans-Bold", size: 20))
}
}
.navigationBarTitle(Text("Cart"), displayMode: .inline)
}
}
}
You are not calling your function addBook anywhere, add an onappear to your view3 calling the function and your list will populate with data.

Clear SwiftUI list in NavigationView does not properly go back to default

The simple navigation demo below demonstrate an example of my issue:
A SwiftUI list inside a NavigationView is filled up with data from the data model Model.
The list items can be selected and the NavigationView is linking another view on the right (demonstrated here with destination)
There is the possibility to clear the data from the model - the SwiftUI list gets empty
The model data can be filled with new data at a later point in time
import SwiftUI
// Data model
class Model: ObservableObject {
// Example data
#Published var example: [String] = ["Data 1", "Data 2", "Data 3"]
#Published var selected: String?
}
// View
struct ContentView: View {
#ObservedObject var data: Model = Model()
var body: some View {
VStack {
// button to empty data set
Button(action: {
data.selected = nil
data.example.removeAll()
}) {
Text("Empty Example data")
}
NavigationView {
// data list
List {
ForEach(data.example, id: \.self) { element in
// navigation to "destination"
NavigationLink(destination: destination(element: element), tag: element, selection: $data.selected) {
Text(element)
}
}
}
// default view when nothing is selected
Text("Nothing selected")
}
}
}
func destination(element: String) -> some View {
return Text("\(element) selected")
}
}
What happens when I click the "Empty Example data" button is that the list will be properly cleared up. However, the selection is somehow persistent and the NavigationView will not jump back to the default view when nothing is selected:
I would expect the view Text("Nothing selected") being loaded.
Do I overlook something important?
When you change the data.example
in the button, the left panel changes because the List has changed.
However the right side do not, because no change has occurred there, only the List has changed.
The ForEach does not re-paint the "destination" views.
You have an "ObservedObject" and its purpose is to keep track of the changes, so using that
you can achieve what you want, like this:
import SwiftUI
#main
struct TestApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
class Model: ObservableObject {
#Published var example: [String] = ["Data 1", "Data 2", "Data 3"]
#Published var selected: String?
}
struct ContentView: View {
#StateObject var data: Model = Model()
var body: some View {
VStack {
Button(action: {
data.selected = nil
data.example.removeAll()
}) {
Text("Empty Example data")
}
NavigationView {
List {
ForEach(data.example, id: \.self) { element in
NavigationLink(destination: DestinationView(),
tag: element,
selection: $data.selected) {
Text(element)
}
}
}
Text("Nothing selected")
}.environmentObject(data)
}
}
}
struct DestinationView: View {
#EnvironmentObject var data: Model
var body: some View {
Text("\(data.selected ?? "")")
}
}

#ObservedObject does not get updated on updating the array

Before I lose my mind over this. May someone please tell me, why it is not working. I am already hours in trying to make this work. ObservedObject just refuses to update my view.
struct ContentView: View {
#ObservedObject var viewModel = ListViewModel()
var body: some View {
NavigationView {
List(){
ForEach(viewModel.items, id:\.self) { item in
Text(item)
}
}
.navigationBarTitle("Test List", displayMode: .inline)
.navigationBarItems(
trailing: Button(action: { ListViewModel().addItem()}) { Image(systemName: "info.circle")}.accentColor(.red))
}
}
}
class ListViewModel: ObservableObject, Identifiable {
#Published var items: Array<String> = ["1", "2", "3", "4", "5","6"]
func addItem(){
items.append("7")
}
}
You're creating a new ListViewModel by using an initializer (ListViewModel()) in your button action.
Instead, refer to the one that you've set up as property in your view: viewModel.addItem()