Как анимировать переход удаления нескольких строк из списка SwiftUI? - PullRequest
Новая
       36

Как анимировать переход удаления нескольких строк из списка SwiftUI?

0 голосов
/ 29 мая 2020

См. Этот пример представления, демонстрирующий проблему: 

struct ListRemovalTransition: View {
    let list1 = ["A", "B", "C", "D"]
    let list2 = ["A", "E", "F", "G", "H", "I", "J", "K"]

    @State var toggle = false
    var chosenList: [String] {
        toggle ? list1 : list2
    }

    var body: some View {
        VStack {
            Toggle(isOn: $toggle) {
                Text("Switch List")
            }

            List(chosenList, id: \.self) { item in
                Text(item)
                    .transition(AnyTransition.opacity.animation(.default))
            }
        }
        .padding()
    }
}

struct ListRemovalTransition_Previews: PreviewProvider {
    static var previews: some View {
        ListRemovalTransition()
    }
}

transition demo

Желаемый результат состоит в том, что отдельные строки исчезают при удалении без меняя положение. Вместо этого кажется, что все строки сначала перекрывают друг друга, а потом удаляются. Я добавил переход с анимацией в строку Text, но это не повлияло.

1 Ответ

3 голосов
/ 29 мая 2020

Просто добавьте модификатор id(:) к List, чтобы удалить анимацию по умолчанию. Затем добавьте модификатор transition(:) к List для желаемого перехода. Работает отлично. Я только что тестировал Xcode 11.5. Вот мой код ... 

struct ListRemovalTransition: View {
    let list1 = ["A", "B", "C", "D"]
    let list2 = ["A", "E", "F", "G", "H", "I", "J", "K"]

    @State var toggle = false
    var chosenList: [String] {
        toggle ? list1 : list2
    }

    var body: some View {
        VStack {
            Toggle(isOn: $toggle) {
                Text("Switch List")
            }

            List(chosenList, id: \.self) { item in
                Text(item)
            }
            .id(UUID())
            .transition(AnyTransition.opacity.animation(.default))
        }
        .padding()
    }
}

https://media.giphy.com/media/dVu1CMqk3YdtZHefaE/giphy.gif

Спасибо. X_X

...