1 Reply
      Latest reply on May 20, 2020 1:07 AM by Claude31
      somenkov.nikita Level 1 Level 1 (0 points)

        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:

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

        Using XCode 11.4.1 and the build target is iOS 13.4.1

        • Re: Unwanted animation when moving items in SwiftUI list
          Claude31 Level 8 Level 8 (9,215 points)

          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