Unwanted animation when moving items in SwiftUI list

Question

somenkov.nikita OP

Created May ’20

Replies 1

Boosts 0

Views 2.0k

Participants 2

Hi,
I have follow code for create movable List using SwiftUI:

struct ContentView: View {
    @State var numbers = ["1", "2", "3"]
    @State var editMode = EditMode.inactive

    var body: some View {
        NavigationView {
            List {
                ForEach(numbers, id: \.self) { number in
                    Text(number)
                }
                .onMove {
                    self.numbers.move(fromOffsets: $0, toOffset: $1)
                }
            }
            .navigationBarItems(trailing: EditButton())
            .navigationBarTitle("Numbers")
        }
    }
}

But I have strange unwanted animation when move item up in SwiftUI list.

I recorded a video that shows the problem:

https://www.youtube.com/watch?v=JpVes2nFTME
Questions:

Is this a known problem?
Is there a workaround? Did I implement onMove correctly?

Using XCode 11.4.1 and the build target is iOS 13.4.1

Boost

Answer 1

Claude31 OP

May ’20

Yes, it is not really cool.

Tested this other one, same issue:

h ttps://www.hackingwithswift.com/quick-start/swiftui/how-to-let-users-move-rows-in-a-list

But solution on SO: https://stackoverflow.com/questions/61571422/unwanted-animation-when-moving-items-in-swiftui-list

struct ContentView: View {
    @State var numbers = ["1", "2", "3"]
    @State var editMode = EditMode.inactive

    var body: some View {
        NavigationView {
            List {
                ForEach(numbers, id: \.self) { number in
                    HStack {
                        Text(number)
                    }.id(UUID())        // << here !!
                }
                .onMove {
                    self.numbers.move(fromOffsets: $0, toOffset: $1)
                }
            }
            .navigationBarItems(trailing: EditButton())
        }
    }
   
}

Note: HStack is not needed in fact, just

ForEach(numbers, id: \.self) { number in

Text(number).id(UUID()) // << here !!

This allows List to know what has changed.

Read this for details:

h ttps://www.hackingwithswift.com/books/ios-swiftui/working-with-identifiable-items-in-swiftui

0