SwiftUI custom list with ForEach delete animation not working

Question

I am creating a custom list displaying time information (minutes and seconds, not used in the snippet below to simplify the code). I managed to implement a nice animation when the user adds an entry to the list, but deleting an entry has no animation (1st GIF).

With iOS 14, the animation is working, however, the animation only removes the last rectangle from the list and then updates the text in each row (2nd GIF). That's not what I want - My goal is if a row has been deleted, the other rows should fill up that space and move accordingly - with an animation.

Probably something is wrong with the IDs of the rows but I just wasn't able to fix that. Thanks for helping!

struct ContentView: View {
    @State var minutes = [0]
    @State var seconds = [0]
    @State var selectedElement = 0
    
    var body: some View {
        ScrollView(){
            VStack{
                ForEach(minutes.indices, id: \.self){ elem in
                    
                    ZStack{
                        
                        EntryBackground()
                        
                        
                        Text("\(self.minutes[elem])")
                            .transition(AnyTransition.scale)
                        
                        HStack{
                            Button(action: {
                                withAnimation(.spring()){
                                    self.seconds.remove(at: elem)
                                    self.minutes.remove(at: elem)
                                }
                                
                            })
                            {
                                Image(systemName: "minus.circle.fill")
                                    .foregroundColor(Color.red)
                                    .font(.system(size: 22))
                                    .padding(.leading, 10)
                            }
                            Spacer()
                        }
                        
                    }
                    .padding(.horizontal)
                    .padding(.top)
                    .contentShape(Rectangle())
                    .onTapGesture {
                        withAnimation(.spring()){
                            self.selectedElement = elem
                        }
                    }
                }
            }
            Spacer()
            
            Button(action: {
                withAnimation{
                    self.minutes.append(self.minutes.count)
                    self.seconds.append(0)
                }
                
            })
            {
                ZStack{
                    EntryBackground()
                    
                    Text("Add")
                    
                    HStack{
                        Image(systemName: "plus.circle.fill")
                            .foregroundColor(Color.green)
                            .font(.system(size: 22))
                            .padding(.leading, 10)
                        
                        Spacer()
                    }
                }.padding()
            }
        }
    }
}

struct EntryBackground: View {
    var body: some View {
        Rectangle()
            .cornerRadius(12)
            .frame(height: 40)
            .foregroundColor(Color.gray.opacity(0.15))
    }
}

The solution below addresses this, but I thought I'd point it out. Notice you are using indices as ID's in your ForEach. This means that when you have 6 indices, for example, and you remove 2, your new array of minutes still has the index 2. You should try to use something unique as your ID. If the minute itself is unique, you can use that. ie, use unique values, because the indices themselves will not be unique (arrays of N and N + 1 indices will have N indices in common, and only that last index varies). — kid_x
– kid_x, Commented Aug 11, 2020 at 19:18
Thanks for the explanation! I thought \.self would create a unique ID and stick it to each row. — leonboe1
– leonboe1, Commented Aug 11, 2020 at 19:23
In this case, \.self is just an index, because you are passing an array of indices. minutes.indices[0] is just 0, minutes.indices[1] is 1, etc. — kid_x
– kid_x, Commented Aug 11, 2020 at 19:24
So working with indices but passing an unique ID would work as well? I'm asking because I don't like that using all objects of the array directly in ForEach will result in O(n) time complexity ({ $0.id == elem.id }). — leonboe1
– leonboe1, Commented Aug 11, 2020 at 19:27
Note that removing an element in the middle of an array is an O(n) operation even if you aren't searching for the value you are removing. If you remove an index in the middle of the array, the rest of the array has to be shifted one index down. Accessing an element is O(1), but insertion/removal in the middle is O(n). — kid_x
– kid_x, Commented Aug 11, 2020 at 19:29

Martijn Pieters · Accepted Answer · 2022-08-23 14:14:13Z

14

You need to make each row uniquely identified, so animator know what is added and what is removed, so animate each change properly.

Here is possible approach. Tested with Xcode 12 / iOS 14

struct TimeItem: Identifiable, Equatable {
    static func == (lhs: Self, rhs: Self) -> Bool {
        lhs.id == rhs.id
    }

    let id = UUID()       // << identify item
    let minutes: Int
    let seconds: Int = 0
}

struct ContentView: View {
    @State var items = [TimeItem]()
    @State var selectedElement: TimeItem?

    var body: some View {
        ScrollView(){
            VStack{
                ForEach(items){ elem in   // << work by item

                    ZStack{

                        EntryBackground()


                        Text("\(elem.minutes)")
                            .transition(AnyTransition.scale)

                        HStack{
                            Button(action: {
                                self.items.removeAll { $0.id == elem.id }
                            })
                            {
                                Image(systemName: "minus.circle.fill")
                                    .foregroundColor(Color.red)
                                    .font(.system(size: 22))
                                    .padding(.leading, 10)
                            }
                            Spacer()
                        }

                    }
                    .padding(.horizontal)
                    .padding(.top)
                    .contentShape(Rectangle())
                    .onTapGesture {
                        withAnimation(.spring()){
                            self.selectedElement = elem
                        }
                    }
                }
            }
            Spacer()

            Button(action: {
                self.items.append(TimeItem(minutes: self.items.count))
            })
            {
                ZStack{
                    EntryBackground()

                    Text("Add")

                    HStack{
                        Image(systemName: "plus.circle.fill")
                            .foregroundColor(Color.green)
                            .font(.system(size: 22))
                            .padding(.leading, 10)

                        Spacer()
                    }
                }.padding()
            }
        }.animation(.spring(), value: items)   // << animate changes
    }
}

struct EntryBackground: View {
    var body: some View {
        Rectangle()
            .cornerRadius(12)
            .frame(height: 40)
            .foregroundColor(Color.gray.opacity(0.15))
    }
}

edited Aug 23, 2022 at 14:14

Martijn Pieters

1.1m326 gold badges4.2k silver badges3.4k bronze badges

answered Aug 11, 2020 at 19:06

Asperi

262k28 gold badges594 silver badges889 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

leonboe1 Over a year ago

Thanks for your help! Nice solution! Could you explain why you added the static function == ?

Asperi Over a year ago

It is needed for .animation(.spring(), value: items)

leonboe1 Over a year ago

Thanks! Only problem I have left is that I want to use Pickers in the ForEach Loop using minutes (and seconds) of the TimeItem as the source of truth. I thought that would be easy and I changed TimeItem into a class, made it conform to ObservableObject and changed minutes and seconds to Published vars. However, I wasn't able to use bindings within the ForEach Loop (like elem.$minutes): the code wouldn't compile. Do you have an idea why? (Or maybe it would be easier if I created a new post?)

Asperi Over a year ago

Yep... one question - one answer. :)

jat · Accepted Answer · 2023-09-21 09:48:43Z

The answer by @Asperi can actually be simplified a little. Tested on iOS17

   struct TimeItem: Identifiable, Equatable {
    
        let id = UUID()       // << identify item
        let minutes: Int
        let seconds: Int = 0
    }
    
    struct ContentView: View {
        @State var items = [TimeItem]()
    
        var body: some View {
            ScrollView(){
                VStack{
                    ForEach(items){ elem in   // << work by item
                        ZStack{
                            EntryBackground()
                            
                            Text("\(elem.minutes)")
    
                            HStack{
                                Button(action: {
                                    self.items.removeAll { $0.id == elem.id }
                                })
                                {
                                    Image(systemName: "minus.circle.fill")
                                        .foregroundColor(Color.red)
                                        .font(.system(size: 22))
                                        .padding(.leading, 10)
                                }
                                Spacer()
                            }
                        }
                        .padding(.horizontal)
                        .padding(.top)
                        .contentShape(Rectangle())
                    }
                }
                Spacer()
    
                Button(action: {
                    self.items.append(TimeItem(minutes: self.items.count))
                })
                {
                    ZStack{
                        EntryBackground()
    
                        Text("Add")
    
                        HStack{
                            Image(systemName: "plus.circle.fill")
                                .foregroundColor(Color.green)
                                .font(.system(size: 22))
                                .padding(.leading, 10)
    
                            Spacer()
                        }
                    }.padding()
                }
            }
            .animation(.spring(), value: items)   // << animate changes
        }
    }

struct EntryBackground: View {
    var body: some View {
        Rectangle()
            .cornerRadius(12)
            .frame(height: 40)
            .foregroundColor(Color.gray.opacity(0.15))
    }
}

Kind of off the topic, but if ur data source is CoreData models, use .animation(.spring(), value: items.count) instead.

Collectives™ on Stack Overflow

SwiftUI custom list with ForEach delete animation not working

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related