SwiftUI list showing an array is not updated - ios

In my app in SwiftUI, there is a list showing all items in an array. When I click on one item, its details are shown and can be modified. Those changes are stored in the array, but when I go back to the list view, the changes are only reflected after I made a change to that list array, like adding or moving an item. Can I make this list refresh when it re-appears?
My main view looks like this:
import SwiftUI
struct ContentView: View {
#State var items: [Item]
var body: some View {
NavigationView {
List {
ForEach(items) { item in
NavigationLink(destination: ItemDetailView(items: self.$items, index: self.items.firstIndex(of: item)!)) {
HStack {
VStack(alignment: .leading) {
Text(item.name).font(.title)
if item.serialNumber != nil {
Text(item.serialNumber!)
.font(.subheadline)
.foregroundColor(.secondary)
}
}
Spacer()
Text("\(item.valueInDollars)$").font(.title)
}
}
}
.onDelete(perform: delete)
.onMove(perform: move)
Text("No more items!")
}
.navigationBarTitle(Text("Homepwner"), displayMode: .inline)
.navigationBarItems(leading: EditButton(), trailing: Button(action: addItem) { Text("Add") })
}
}
//... functions
}
The detail view looks like this:
import SwiftUI
struct ItemDetailView: View {
#Binding var items: [Item]
let index: Int
var body: some View {
VStack {
VStack(alignment: .leading) {
HStack {
Text("Name: ")
TextField("Item Name", text: $items[index].name)
}
//... more TextFields
}
.padding(.all, 8.0)
VStack(alignment: .center) {
//... button
Image(systemName: "photo")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
}
}.navigationBarTitle(items[index].name)
}
}
The class Item is Identifiable and Equatable and only holds the necessary members, the class ItemStore only holds an array of Items.

i just tried this (had to enhance code so it was compilable at all) and it works:
import SwiftUI
struct Item : Equatable, Identifiable, Hashable {
var id = UUID()
var name: String
var serialNumber : String?
var valueInDollars : Int = 5
}
struct ContentView: View {
#State var items: [Item] = [Item(name: "hi"), Item(name: "ho")]
var body: some View {
NavigationView {
List {
ForEach(items, id: \.self) { item in
NavigationLink(destination: ItemDetailView(items: self.$items, index: self.items.firstIndex(of: item)!)) {
HStack {
VStack(alignment: .leading) {
Text(item.name).font(.title)
if item.serialNumber != nil {
Text(item.serialNumber!)
.font(.subheadline)
.foregroundColor(.secondary)
}
}
Spacer()
Text("\(item.valueInDollars)$").font(.title)
}
}
}
// .onDelete(perform: delete)
// .onMove(perform: move)
Text("No more items!")
}
.navigationBarTitle(Text("Homepwner"), displayMode: .inline)
// .navigationBarItems(leading: EditButton(), trailing: Button(action: addItem) { Text("Add") })
}
}
//... functions
}
struct ItemDetailView: View {
#Binding var items: [Item]
let index: Int
var body: some View {
VStack {
VStack(alignment: .leading) {
HStack {
Text("Name: ")
TextField("Item Name", text: $items[index].name)
}
//... more TextFields
}
.padding(.all, 8.0)
VStack(alignment: .center) {
//... button
Image(systemName: "photo")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
}
}.navigationBarTitle(items[index].name)
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}

Related

Memory Error in SwiftUI that goes way over my head

I'm learning SwiftUI over break for fun over youtube, trying to build a fun little app to learn stuff and i'm attempting to make a custom tab bar at the bottom to control views, and have objects (i made a Person object) that i owuld like to be able to access and modify throughout all my views. From what I can tell, I've achieved that, as it runs perfectly well as I expect it to on the Simulator, but when I try to run on my iPhone I get the error "Thread 1: EXC_BAD_ACCESS (code=257, address=0x481bdfee88082008)"
I'm not familiar with reading memory addresses, i'm just trying to screw around with building apps for fun with my downtime
myTestApp.swift
import SwiftUI
#main
struct myTestApp: App {
var testPerson = Person(name: "Stinky", age: 69)
var body: some Scene {
WindowGroup {
ContentView()
.environmentObject(testPerson)
}
}
}
ContentView.swift
import SwiftUI
struct ContentView: View {
#State var selectedIndex = 0
let icons = [
"house", "person", "doc", "dice", "gear"
]
let tabNames = [
"Home", "People", "Overview", "Activities", "Settings"
]
var body: some View {
VStack {
ZStack {
switch selectedIndex {
case 0: HomeView()
case 1: PeopleView()
case 2: OverView()
case 3: ActivitiesView()
case 4: SettingsView()
default: HomeView()
}
}
Divider()
.frame(height: 2.0)
HStack {
ForEach(0..<5, id: \.self) { i in
Spacer()
VStack {
Image(systemName: icons[i])
.frame(height: 20.0)
.font(.system(size:23))
.foregroundColor(self.selectedIndex == i ? Color("SelectedColor") : Color("AccentColor"))
Text("\(tabNames[i])")
.font(.system(size:10, weight: .medium, design: .default))
.foregroundColor(self.selectedIndex == i ? Color("SelectedColor") : Color("AccentColor"))
.padding(.top, 1.0)
}
.onTapGesture {
selectedIndex = i
}
.frame(width: 70.0, height: 60.0)
Spacer()
}
}
.frame(height: 41.0)
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Views.swift
import SwiftUI
struct HomeView: View {
#EnvironmentObject var testPerson: Person
var body: some View {
NavigationView {
VStack {
ScrollView {
VStack {
Text(testPerson.name + " \(testPerson.age)")
ForEach(0..<5) { i in
Text("The Train Has Arrived!")
.padding(.all, 3.0)
}
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
.cornerRadius(20)
.background(Color.gray)
}
Button(action: {
testPerson.age += 1
}, label: {
Text("Age: \(testPerson.age)")
.font(.system(size: 20))
.foregroundColor(.white)
.frame(maxWidth: .infinity)
})
.frame(maxWidth: .infinity, maxHeight: 50)
.foregroundColor(.blue)
.background(.blue)
.cornerRadius(15)
.padding(.horizontal)
}
.navigationTitle("Age: \(testPerson.age)")
}
}
}
struct PeopleView: View {
#EnvironmentObject var testPerson: Person
#State var newPersonCreation = false
var body: some View {
NavigationView {
VStack {
ZStack {
Spacer().fullScreenCover(isPresented: $newPersonCreation, content: {
Button("ass", action: {
self.newPersonCreation.toggle()
})
})
}
Text("Age: \(testPerson.age)")
}
.navigationTitle("People")
.toolbar {
Button(action: {
self.newPersonCreation.toggle()
}, label: {
Image(systemName: "plus")
.foregroundColor(.white)
})
}
}
}
}
struct OverView: View {
var body: some View {
NavigationView {
VStack {
}
.navigationTitle("Overview")
}
}
}
struct ActivitiesView : View {
var body: some View {
NavigationView {
VStack {
}
.navigationTitle("Activities")
}
}
}
struct SettingsView: View {
var body: some View {
NavigationView {
VStack {
}
.navigationTitle("Settings")
}
}
}
struct Previews_Views_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Person.swift
import SwiftUI
class Person: ObservableObject {
#Published var name = "Anonymous"
#Published var age = 1
init(name: String, age: Int) {
self.name = name
self.age = age
}
}

How to hide TabView in NavigationLink?

First of all I did a full research for my problem and NOTHING on Google helped me,
the problem is simple, it seems that the solution should also be simple, but I can't hide the tabbar in NavigationLink, and if something works out, then wierd behavior of the buttons and the transition back, etc...
TabView itself
import SwiftUI
struct Main: View {
#State var currentTab: Int = 0
var body: some View {
TabView(selection: $currentTab) {
HomeView().tag(0)
AccountInfoView().tag(1)
SettingsView().tag(2)
}
.tabViewStyle(.page(indexDisplayMode: .never))
.edgesIgnoringSafeArea(.bottom)
.overlay(
TabBarView(currentTab: $currentTab),
alignment: .top
)
}
}
struct TabBarView: View {
#Binding var currentTab: Int
#Namespace var namespace
var tabBarOptions: [String] = ["Search", "Items", "Account"]
var body: some View {
HStack(spacing: 0) {
ForEach(Array(zip(self.tabBarOptions.indices,
self.tabBarOptions)),
id: \.0,
content: {
index, name in
TabBarItem(currentTab: self.$currentTab,
namespace: namespace.self,
tabBarItemName: name,
tab: index)
})
}
.padding(.top)
.background(Color.clear)
.frame(height: 100)
.edgesIgnoringSafeArea(.all)
}
}
struct TabBarItem: View {
#Binding var currentTab: Int
let namespace: Namespace.ID
var tabBarItemName: String
var tab: Int
var body: some View {
Button {
self.currentTab = tab
} label: {
VStack {
Spacer()
Text(tabBarItemName)
if currentTab == tab {
CustomColor.myColor
.frame(height: 2)
.matchedGeometryEffect(id: "underline",
in: namespace,
properties: .frame)
} else {
Color.clear.frame(height: 2)
}
}
.animation(.spring(), value: self.currentTab)
}
.fontWeight(.heavy)
.buttonStyle(.plain)
}
}
NavigationLink -> this is just the part of the code that contains the NavigationLink, this VStack of course is inside the NavigationView.
struct HomeView: View {
NavigationView {
...
VStack(spacing: 15) {
ForEach(self.data.datas.filter {(self.search.isEmpty ? true : $0.title.localizedCaseInsensitiveContains(self.search))}, id: \.id) { rs in
NavigationLink(
destination: ItemDetails(data: rs)
){
RecentItemsView(data: rs)
}
.buttonStyle(PlainButtonStyle())
}
}
}
}
ItemDetails
struct ItemDetails: View {
let data: DataType
var body : some View {
NavigationView {
VStack {
AsyncImage(url: URL(string: data.pic), content: { image in
image.resizable()
}, placeholder: {
ProgressView()
})
.aspectRatio(contentMode: .fill)
.frame(width: 250, height: 250)
.clipShape(RoundedRectangle(cornerRadius: 12.5))
.padding(10)
VStack(alignment: .leading, spacing: 8, content: {
Text(data.title)
.fontWeight(.bold)
.frame(maxWidth: .infinity, alignment: .center)
Text(data.description)
.font(.caption)
.foregroundColor(.gray)
.frame(maxWidth: .infinity, alignment: .center)
})
.padding(20)
}
.padding(.horizontal)
}
.navigationBarBackButtonHidden(true)
}
}
I apologize for the garbage in the code, it seemed to me that there is not much of it and it does not interfere with understanding the code, also during the analysis of this problem on the Google\SO, I did not need to work with other parts of the code anywhere, except for those that I provided above, but if I missed something, then please let me know, thanks.

SwiftUI List only taps content

I have a List in SwiftUI that I populate with a custom SwiftUI cell, the issue is that on tap I need to do some stuff and the tap only works when you click the text in the cell, if you click any empty space it will not work. How can I fix this?
struct SelectDraftView: View {
#Environment(\.presentationMode) var presentationMode
#ObservedObject var viewModel = SelectDraftViewModel()
var body: some View {
VStack {
List {
ForEach(viewModel.drafts.indices, id: \.self) { index in
DraftPostCell(draft: viewModel.drafts[index])
.contentShape(Rectangle())
.onTapGesture {
presentationMode.wrappedValue.dismiss()
}
}
.onDelete { indexSet in
guard let delete = indexSet.map({ viewModel.drafts[$0] }).first else { return }
viewModel.delete(draft: delete)
}
}
.background(Color.white)
Spacer()
}
}
}
struct DraftPostCell: View {
var draft: CDDraftPost
var body: some View {
VStack(alignment: .leading) {
Text(draft.title ?? "")
.frame(alignment: .leading)
.font(Font(UIFont.uStadium.helvetica(ofSize: 14)))
.padding(.bottom, 10)
if let body = draft.body {
Text(body)
.frame(alignment: .leading)
.multilineTextAlignment(.leading)
.frame(maxHeight: 40)
.font(Font(UIFont.uStadium.helvetica(ofSize: 14)))
}
Text(draft.date?.toString(format: "EEEE, MMM d, yyyy") ?? "")
.frame(alignment: .leading)
.font(Font(UIFont.uStadium.helvetica(ofSize: 12)))
}
.padding(.horizontal, 16)
}
}
try adding .frame(idealWidth: .infinity, maxWidth: .infinity) just after DraftPostCell(...). You can also use a minWidth: if required.
EDIT-1: the code I use for testing (on real devices ios 15.6, macCatalyst, not Previews):
import Foundation
import SwiftUI
struct ContentView: View {
var body: some View {
SelectDraftView()
}
}
class SelectDraftViewModel: ObservableObject {
#Published var drafts: [
CDDraftPost] = [
CDDraftPost(title: "item 1", date: Date(), body: "body 1"),
CDDraftPost(title: "item 2", date: Date(), body: "body 4"),
CDDraftPost(title: "item 3", date: Date(), body: "body 3")]
func delete(draft: CDDraftPost) { }
}
struct CDDraftPost: Codable {
var title: String?
var date: Date?
var body: String?
}
struct SelectDraftView: View {
#Environment(\.presentationMode) var presentationMode
#ObservedObject var viewModel = SelectDraftViewModel()
var body: some View {
VStack {
List {
ForEach(viewModel.drafts.indices, id: \.self) { index in
DraftPostCell(draft: viewModel.drafts[index])
.frame(idealWidth: .infinity, maxWidth: .infinity, alignment: .leading)
.contentShape(Rectangle())
.border(.red) // <-- for testing
.onTapGesture {
print("----> onTapGesture")
// presentationMode.wrappedValue.dismiss()
}
}
.onDelete { indexSet in
guard let delete = indexSet.map({ viewModel.drafts[$0] }).first else { return }
viewModel.delete(draft: delete)
}
}
.background(Color.white)
Spacer()
}
}
}
struct DraftPostCell: View {
var draft: CDDraftPost
var body: some View {
VStack(alignment: .leading) {
Text(draft.title ?? "")
.frame(alignment: .leading)
// .font(Font(UIFont.uStadium.helvetica(ofSize: 14)))
.padding(.bottom, 10)
if let body = draft.body {
Text(body)
.frame(alignment: .leading)
.multilineTextAlignment(.leading)
.frame(maxHeight: 40)
// .font(Font(UIFont.uStadium.helvetica(ofSize: 14)))
}
Text(draft.date?.formatted() ?? "")
.frame(alignment: .leading)
// .font(Font(UIFont.uStadium.helvetica(ofSize: 12)))
}
.padding(.horizontal, 16)
}
}
I'm probably late but this will be useful for anyone checking this in the future.
You need to add .background() modifier to your view before you do .onTapGesture{...}
so in your ForEach code would be modified like this:
ForEach(viewModel.drafts.indices, id: \.self) { index in
DraftPostCell(draft: viewModel.drafts[index])
.contentShape(Rectangle())
.frame(maxWidth: .infinity) // you should use the frame parameter according to your needs, but if you want your cell to occupy the whole width of your scroll view, use this one
.background() // this makes the empty portions of view 'non-transparent', so those portions also receive the tap gesture
.onTapGesture {
presentationMode.wrappedValue.dismiss()
}
}
P.S if you need the whole portion of your scroll view cell to receive the tap gesture you'll also need to add .frame(...) modifier, so it has the exact background you want

sheet inside ForEach doesn't loop over id's

Each link has an id, the output I get when I click on the button is the wrong id, it repeats the first id on the first 4 buttons and then the others are random.
struct PricesList: View {
#ObservedObject var viewModel = ViewModel()
#State var isSheetPresented = false
var body: some View{
NavigationView{
ScrollView {
LazyVGrid(columns: gridLayout, spacing: 15, content: {
ForEach(viewModel.items, id: \.id) { item in
VStack(alignment: .leading, spacing: 5){
Button(action: {
self.isSheetPresented.toggle()
}, label: {
Image(item.imageUrl)
.resizable()
.scaledToFit()
.padding(10)
}).sheet(isPresented: $isSheetPresented, content: {
WebView(url: item.link)
})
}//:VSTACK
.scaledToFit()
.padding()
.background(Color.white.cornerRadius(12))
.background(RoundedRectangle(cornerRadius: 12).stroke(Color.gray, lineWidth: 1))
}//: LOOP FOR EACH
}).padding(5)
.onAppear(perform: {
viewModel.loadData()
viewModel.postData()
})
}
.navigationBarHidden(true)
}//: NAVIGATION VIEW
} //: BODY
}
You have sheet for each item in your list, and all of them are getting isSheetPresented value. Which one will be displayed is undefined
Instead you need to store selectedItem and pass it to single sheet, like this:
struct ContentView: View {
#ObservedObject var viewModel = ViewModel()
#State var selectedItem: Item?
var body: some View{
NavigationView{
ScrollView {
LazyVGrid(columns: gridLayout, spacing: 15, content: {
ForEach(viewModel.items, id: \.id) { item in
VStack(alignment: .leading, spacing: 5){
Button(action: {
selectedItem = item
}, label: {
Image(item.imageUrl)
.resizable()
.scaledToFit()
.padding(10)
})
}//:VSTACK
.scaledToFit()
.padding()
.background(Color.white.cornerRadius(12))
.background(RoundedRectangle(cornerRadius: 12).stroke(Color.gray, lineWidth: 1))
}//: LOOP FOR EACH
}).padding(5)
.onAppear(perform: {
viewModel.loadData()
viewModel.postData()
})
.sheet(item: $selectedItem, content: { selectedItem in
WebView(url: selectedItem.link)
})
}
.navigationBarHidden(true)
}//: NAVIGATION VIEW
} //: BODY
}

I use navigationlink and I also want to use side menu

I have a NavigationView component in my iOS app that's built with SwiftUI.
I use navigationlink to change my page.In the second screen, I want to show side menu.But now I havetwo layers NavigationView in my iOS app, it's not my want to show.I want the second screen only have side menu.
is it possible or am i missing something about the way navigation is being managed in Swift?
How should I change my code?
here's my ContentView.swift:
import SwiftUI
struct ContentView: View {
var body: some View {
NavigationView{
VStack {
NavigationLink(
destination: SwiftUIView_map(),
label: {
Text("Skip")
.fontWeight(.bold)
.font(.title)
.padding()
.background(Color.purple)
.cornerRadius(20)
.foregroundColor(.white)
})
HeaderView()
.offset(y:-60)
NavigationLink(
destination: Text("Login"),
label: {
Text("Login")
.fontWeight(.bold)
.font(.title)
.padding()
.background(Color.purple)
.cornerRadius(20)
.foregroundColor(.white)
})
NavigationLink(
destination: Text("Sign up"),
label: {
Text("Sign up")
.fontWeight(.bold)
.font(.title)
.padding()
.background(Color.purple)
.cornerRadius(20)
.foregroundColor(.white)
})
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
struct HeaderView: View {
var body: some View {
HStack{
VStack(alignment: .leading, spacing: 2){
Text("Just")
.font(.system(size: 60,weight:.heavy,design:.rounded))
.fontWeight(.black)
.multilineTextAlignment(.leading)
Text("test")
.font(.system(size: 60,weight:.heavy,design:.rounded))
.fontWeight(.black)
}
Spacer()
}
.padding()
}
}
The navigation sidebar:
import SwiftUI
struct SwiftUIView_map: View {
#State private var isShowing = false
var body: some View {
NavigationView{
ZStack{
if isShowing{
SideMenuView(isShowing: $isShowing)
}
HomeView()
.cornerRadius(isShowing ? 20 : 10 )
.offset(x: isShowing ? 300 : 0,y:isShowing ? 44 :0)
.scaleEffect(isShowing ? 0.8 : 1)
.navigationBarItems(leading: Button(action: {
withAnimation(.spring()){
isShowing.toggle()
}
}, label: {
Image(systemName: "list.bullet")
.foregroundColor(.black)
}))
.navigationTitle("home")
}
}
}
}
struct SwiftUIView_map_Previews: PreviewProvider {
static var previews: some View {
SwiftUIView_map()
}
}
struct HomeView: View {
var body: some View {
ZStack{
Color(.white)
Text(/*#START_MENU_TOKEN#*/"Hello, World!"/*#END_MENU_TOKEN#*/)
.padding()
}
}
}
If you want more detailed code, please click the link
https://github.com/simpson0826/swifttest.git
You need to use the NavigationView only in ContentView(root view).
struct SwiftUIView_map: View {
#State private var isShowing = false
var body: some View {
// NavigationView{
ZStack{
if isShowing{
SideMenuView(isShowing: $isShowing)
}
HomeView()
.cornerRadius(isShowing ? 20 : 10 )
.offset(x: isShowing ? 300 : 0,y:isShowing ? 44 :0)
.scaleEffect(isShowing ? 0.8 : 1)
.navigationBarItems(trailing: Button(action: {
withAnimation(.spring()){
isShowing.toggle()
}
}, label: {
Image(systemName: "list.bullet")
.foregroundColor(.black)
}))
.navigationTitle("home")
}
// }
}
}

Resources