Implementing a delete feature on a list in SwiftUI - ios

I followed this document (and this one) to add a delete feature to my list in an app using SwiftUI. Both pages say that once you add the .onDelete(perform: ...) piece of code you will be able to swipe and get a Delete button. Nevertheless this is not what I see. The code compiles but I see nothing on swipe.
My list is backed up by code like this:
#FetchRequest(
entity: ...,
sortDescriptors: []
) var myList: FetchedResults<MyEntity>
and not by #State. Could this be an issue?
Below follows more of the relevant code, in case this may be useful:
private func deleteSpot(at index: IndexSet) {
print(#function)
}
.........
var body: some View {
VStack {
ForEach(self.myList, id: \.self.name) { item in
HStack {
Spacer()
Button(action: {
self.showingDestinList.toggle()
.....
UserDefaults.standard.set(item.name!, forKey: "LocSpot")
}) {
item.name.map(Text.init)
.font(.largeTitle)
.foregroundColor(.secondary)
}
Spacer()
}
}.onDelete(perform: deleteSpot)
}

The delete on swipe for dynamic container works only in List, so make
var body: some View {
List { // << here !!
ForEach(self.myList, id: \.self.name) { item in
HStack {
// ... other code
}
}.onDelete(perform: deleteSpot)
}
}

By searching and trying various options, I ended up by finding the issue.
I find the solution somewhat ridiculous, but to avoid other people to lose time, here it is:
The last part of the code in the post needs to be modified like the following in order to work.
var body: some View {
VStack {
List {
ForEach(self.myList, id: \.self.name) { item in
HStack {
Spacer()
Button(action: {
self.showingDestinList.toggle()
.....
UserDefaults.standard.set(item.name!, forKey: "LocSpot")
}) {
item.name.map(Text.init)
.font(.largeTitle)
.foregroundColor(.secondary)
}
Spacer()
}
}.onDelete(perform: deleteSpot)
}
}

Related

SwiftUI: Slider in List/ForEach behaves strangely

It's very hard to explain without a recording from a second device that I don't have, but when I try to slide my slider, it will stop when my finger is definitely still moving.
I have my code posted below. I'd be happy to answer any questions and explain whatever. I'm sure it's something really simple that I should know. Any help would be very much appreciated, thanks!
import SwiftUI
class SettingsViewModel: ObservableObject {
#Published var selectedTips = [
10.0,
15.0,
18.0,
20.0,
25.0
]
func addTip() {
selectedTips.append(0.0)
selectedTips.sort()
}
func removeTip(index: Int) {
selectedTips.remove(at: index)
selectedTips = selectedTips.compactMap{ $0 }
}
}
struct SettingsTipsView: View {
#StateObject var model = SettingsViewModel()
var body: some View {
List {
HStack {
Text("Edit Suggested Tips")
.font(.title2)
.fontWeight(.semibold)
Spacer()
if(model.selectedTips.count < 5) {
Button(action: { model.addTip() }, label: {
Image(systemName: "plus.circle.fill")
.renderingMode(.original)
.font(.title3)
.padding(.horizontal, 10)
})
.buttonStyle(BorderlessButtonStyle())
}
}
ForEach(model.selectedTips, id: \.self) { tip in
let i = model.selectedTips.firstIndex(of: tip)!
//If I don't have this debug line here then the LAST slider in the list tries to force the value to 1 constantly, even if I remove the last one, the new last slider does the same. It's from a separate file but it's pretty much the same as the array above. An explanation would be great.
Text("\(CalculatorViewModel.suggestedTips[i])")
HStack {
Text("\(tip, specifier: "%.0f")%")
Slider(value: $model.selectedTips[i], in: 1...99, label: { Text("Label") })
if(model.selectedTips.count > 1) {
Button(action: { model.removeTip(index: i) }, label: {
Image(systemName: "minus.circle.fill")
.renderingMode(.original)
.font(.title3)
.padding(.horizontal, 10)
})
.buttonStyle(BorderlessButtonStyle())
}
}
}
}
}
}
Using id: \.self within a List or ForEach is a dangerous idea in SwiftUI. The system uses it to identify what it expects to be unique elements. But, as soon as you move the slider, you have a change of ending up with a tip value that is equal to another value in the list. Then, SwiftUI gets confused about which element is which.
To fix this, you can use items with truly unique IDs. You should also try to avoid using indexes to refer to certain items in the list. I've used list bindings to avoid that issue.
struct Tip : Identifiable {
var id = UUID()
var tip : Double
}
class SettingsViewModel: ObservableObject {
#Published var selectedTips : [Tip] = [
.init(tip:10.0),
.init(tip:15.0),
.init(tip:18.0),
.init(tip:20.0),
.init(tip:25.0)
]
func addTip() {
selectedTips.append(.init(tip:0.0))
selectedTips = selectedTips.sorted(by: { a, b in
a.tip < b.tip
})
}
func removeTip(id: UUID) {
selectedTips = selectedTips.filter { $0.id != id }
}
}
struct SettingsTipsView: View {
#StateObject var model = SettingsViewModel()
var body: some View {
List {
HStack {
Text("Edit Suggested Tips")
.font(.title2)
.fontWeight(.semibold)
Spacer()
if(model.selectedTips.count < 5) {
Button(action: { model.addTip() }, label: {
Image(systemName: "plus.circle.fill")
.renderingMode(.original)
.font(.title3)
.padding(.horizontal, 10)
})
.buttonStyle(BorderlessButtonStyle())
}
}
ForEach($model.selectedTips, id: \.id) { $tip in
HStack {
Text("\(tip.tip, specifier: "%.0f")%")
.frame(width: 50) //Otherwise, the width changes while moving the slider. You could get fancier and try to use alignment guides for a more robust solution
Slider(value: $tip.tip, in: 1...99, label: { Text("Label") })
if(model.selectedTips.count > 1) {
Button(action: { model.removeTip(id: tip.id) }, label: {
Image(systemName: "minus.circle.fill")
.renderingMode(.original)
.font(.title3)
.padding(.horizontal, 10)
})
.buttonStyle(BorderlessButtonStyle())
}
}
}
}
}
}

.onDelete causes a crash because out of index

Does anyone know why this code cause a fatal error: Index out of range, when I try to delete an item from the list? At the moment I am able to create more textfields and populate them but unable to delete anything without the app crashing.
import SwiftUI
struct options: View {
#State var multiOptions = [""]
var body: some View {
VStack {
List {
ForEach(multiOptions.indices, id: \.self) { index in
TextField("Enter your option...", text: $multiOptions[index])
}
.onDelete(perform: removeRow)
}
Button {
multiOptions.append("")
} label: {
Image(systemName: "plus.circle")
}
}
}
func removeRow(at offsets: IndexSet) {
multiOptions.remove(atOffsets: offsets)
}
}
Here is the answer with custom Binding:
struct ContentView: View {
#State var multiOptions = [""]
var body: some View {
VStack {
List {
ForEach(multiOptions.indices, id: \.self) { index in
TextField("Enter your option...", text: Binding(get: { return multiOptions[index] },
set: { newValue in multiOptions[index] = newValue }))
}
.onDelete(perform: removeRow)
}
Button {
multiOptions.append("")
} label: {
Image(systemName: "plus.circle")
}
}
}
func removeRow(at offsets: IndexSet) {
multiOptions.remove(atOffsets: offsets)
}
}
This seems hard to believe, but apparently the naming of an attribute in the entity as "id" is the cause of this behavior. I changed the name of the UUID attribute to "myID" and the deletions now work. The list view still does not work at all in the preview, but it does now work in the simulator and with a device.

Transition animation gone when presenting a NavigationLink in SwiftUI

I have a List with NavigationLinks.
List {
ForEach(items, id: \.id) { item in
NavigationLink(destination: ItemView(), tag: item.id, selection: self.$viewModel.selectedItemId) {
Text("Some text")
}
}
.onDelete(perform: delete)
}
.id(UUID())
And a corresponding ViewModel which stores the selected item's id.
class ViewModel: ObservableObject {
#Published var selectedItemId: String? {
didSet {
if let itemId = selectedItemId {
...
}
}
}
...
}
The problem is that when I use NavigationLink(destination:tag:selection:) the transition animation is gone - the child view pops up immediately. When I use NavigationLink(destination:) it works normally, but I can't use it because I need to perform some action when a NavigationLink is selected.
Why the transition animation is gone? Is this a problem with NavigationLink(destination:tag:selection:)?
You could put your action inside the NavigationLink. This should solve your animation problem:
List {
ForEach(items, id: \.id) { item in
NavigationLink(destination: ItemView(), isActive: $isActive, tag: item.id, selection: self.$viewModel.selectedItemId) {
EmptyView()
}
Button(action: {
// The action you wand to have done, when the View pops.
print("Test")
self.isActive = true
}, label: {
Text("Some text")
})
}
.onDelete(perform: delete)
}
.id(UUID())
It turned out to be a problem with .id(UUID()) at the end of the list. Removing it restores the transition animation:
List {
ForEach(items, id: \.id) { item in
NavigationLink(destination: ItemView(), tag: item.id, selection: self.$viewModel.selectedItemId) {
Text("Some text")
}
}
.onDelete(perform: delete)
}
//.id(UUID()) <- removed this line
I added this following this link How to fix slow List updates in SwiftUI. Looks like this hack messes up tags/selections when using NavigationLink(destination:tag:selection:).

Delete item from a section list on SwiftUI

Overview
im doing a simple app with core data I have two entity users and territory the app shows a list of the users in sections by territory the problem is In the delete action the list delete the user from the first section if I try to delete the second user from the second section it delete the second user from the first section.
I think index set is getting wrong sending the index of the section but when I try to change the onDelete to my nested forEach don't work
Here is the code
import SwiftUI
struct ContentView: View {
#Environment(\.managedObjectContext) var moc
#FetchRequest(entity: User.entity(), sortDescriptors: [NSSortDescriptor(keyPath: \User.name, ascending: true)]) var users: FetchedResults<User>
#FetchRequest(entity: Territory.entity(), sortDescriptors: [NSSortDescriptor(keyPath: \Territory.name, ascending: true)]) var territories: FetchedResults<Territory>
#State private var showAddUser = false
var body: some View {
GeometryReader{ geometry in
NavigationView {
ZStack {
List {
ForEach(self.territories, id: \.self) { territorie in
Section(header: Text(territorie.wrappedName)) {
ForEach(territorie.usersArray, id: \.self) { user in
NavigationLink(destination: UserView(user: user)) {
VStack{
HStack{
Text("user")
Spacer()
Text(user.dayLastVisit)
.padding(.horizontal)
}
HStack {
Text(user.wrappedEmoji)
.font(.largeTitle)
VStack(alignment: .leading) {
Text("\(user.wrappedName + " " + user.wrappedLastName)")
.font(.headline)
Text(user.wrappedType)
}
Spacer()
}
}
}
}.onDelete(perform: self.deleteItem)
}
}
}
.listStyle(GroupedListStyle())
.environment(\.horizontalSizeClass, .regular)
VStack {
Button(action:{ self.showAddRUser.toggle()}){
ButtonPlus(icon:"plus")}
.offset(x: (geometry.size.width * 0.40), y: (geometry.size.height * 0.38))
.sheet(isPresented: self.$showAddUser){
NewUserView().environment(\.managedObjectContext, self.moc)
}
}
}
.navigationBarTitle("Users")
.navigationBarItems( trailing: HStack {
EditButton()
Button(action:{self.showAddUser.toggle()}){
ButtonNew(text:"Nueva")}
}
.sheet(isPresented: self.$showAddUser){
NewUserView().environment(\.managedObjectContext, self.moc)
}
)
}
}
}
func deleteItem(at offsets: IndexSet) {
for offset in offsets {
let user = users[offset]
//borarlo del context
moc.delete(user)
}
try? moc.save()
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
im learning swift and swiftui so im would appreciate any help
You’ll need to pass in a section index as well as the row index, so that you know which nested item to delete. Something like this.
.onDelete { self.deleteItem(at: $0, in: sectionIndex) }
And change your function to accept that section index:
func deleteItem(at offsets: IndexSet, in: Int)
In your case you can probably pass in something like territorie.id as the section index, and use that to delete the correct item. Or pass in the territorie object - whatever you need to get to the correct user. Only the index won’t get you there. Hope it all makes sense!
For me, the solution was the following:
ForEach(self.territories, id: \.self) { territorie in
Section(header: Text(territorie.wrappedName)) {
ForEach(territorie.usersArray, id: \.self) { user in
// your code here
}
.onDelete { indexSet in
for index in indexSet {
moc.delete(territorie[user])
}
// update the view context
moc.save()
}
}
}
The index in indexSet returns the item that should be deleted in that specific section. So if I delete the first item of a section, it returns 0.
The territorie returns a list of all the items that are contained in that section. So using territorie[index] will return the specific user object you want to delete.
Now that we have the object we want to delete, we can pass it to moc.delete(territorie[index]). Finally, we save it with moc.save().
Sidenote: although Misael used the variable 'territorie', I prefer to use the variable name section.
So thanks to the help of Kevin Renskers who found a solution. I just add a .onDelete { self.deleteItem(at: $0, in: territorie)} to my function then I use the same arrayUsers from the territory.
func deleteItem(at offsets: IndexSet, in ter: Territory) {
for offset in offsets {
let user = ter.usersArray[offset]
moc.delete(user)
}
try? moc.save()
}

SwiftUI ForEach not correctly updating in scrollview

I have a SwiftUI ScrollView with an HStack and a ForEach inside of it. The ForEach is built off of a Published variable from an ObservableObject so that as items are added/removed/set it will automatically update in the view. However, I'm running into multiple problems:
If the array starts out empty and items are then added it will not show them.
If the array has some items in it I can add one item and it will show that, but adding more will not.
If I just have an HStack with a ForEach neither of the above problems occur. As soon as it's in a ScrollView I run into the problems.
Below is code that can be pasted into the Xcode SwiftUI Playground to demonstrate the problem. At the bottom you can uncomment/comment different lines to see the two different problems.
If you uncomment problem 1 and then click either of the buttons you'll see just the HStack updating, but not the HStack in the ScrollView even though you see init print statements for those items.
If you uncomment problem 2 and then click either of the buttons you should see that after a second click the the ScrollView updates, but if you keep on clicking it will not update - even though just the HStack will keep updating and init print statements are output for the ScrollView items.
import SwiftUI
import PlaygroundSupport
import Combine
final class Testing: ObservableObject {
#Published var items: [String] = []
init() {}
init(items: [String]) {
self.items = items
}
}
struct SVItem: View {
var value: String
init(value: String) {
print("init SVItem: \(value)")
self.value = value
}
var body: some View {
Text(value)
}
}
struct HSItem: View {
var value: String
init(value: String) {
print("init HSItem: \(value)")
self.value = value
}
var body: some View {
Text(value)
}
}
public struct PlaygroundRootView: View {
#EnvironmentObject var testing: Testing
public init() {}
public var body: some View {
VStack{
Text("ScrollView")
ScrollView(.horizontal) {
HStack() {
ForEach(self.testing.items, id: \.self) { value in
SVItem(value: value)
}
}
.background(Color.red)
}
.frame(height: 50)
.background(Color.blue)
Spacer()
Text("HStack")
HStack {
ForEach(self.testing.items, id: \.self) { value in
HSItem(value: value)
}
}
.frame(height: 30)
.background(Color.red)
Spacer()
Button(action: {
print("APPEND button")
self.testing.items.append("A")
}, label: { Text("APPEND ITEM") })
Spacer()
Button(action: {
print("SET button")
self.testing.items = ["A", "B", "C"]
}, label: { Text("SET ITEMS") })
Spacer()
}
}
}
// Present the view controller in the Live View window
PlaygroundPage.current.liveView = UIHostingController(
// problem 1
rootView: PlaygroundRootView().environmentObject(Testing())
// problem 2
// rootView: PlaygroundRootView().environmentObject(Testing(items: ["1", "2", "3"]))
)
Is this a bug? Am I missing something? I'm new to iOS development..I did try wrapping the actual items setting/appending in the DispatchQueue.main.async, but that didn't do anything.
Also, maybe unrelated, but if you click the buttons enough the app seems to crash.
Just ran into the same issue. Solved with empty array check & invisible HStack
ScrollView(showsIndicators: false) {
ForEach(self.items, id: \.self) { _ in
RowItem()
}
if (self.items.count == 0) {
HStack{
Spacer()
}
}
}
It is known behaviour of ScrollView with observed empty containers - it needs something (initial content) to calculate initial size, so the following solves your code behaviour
#Published var items: [String] = [""]
In general, in such scenarios I prefer to store in array some "easy-detectable initial value", which is removed when first "real model value" appeared and added again, when last disappears. Hope this would be helpful.
For better readability and also because the answer didn't work for me. I'd suggest #TheLegend27 answer to be slightly modified like this:
if self.items.count != 0 {
ScrollView(showsIndicators: false) {
ForEach(self.items, id: \.self) { _ in
RowItem()
}
}
}

Resources