SwiftUI - удалить строку в списке с контекстным меню - глюк интерфейса

Question

У меня есть массив элементов, отображаемых с использованием List в моем SwiftUI View. Я устал добавлять contextMenu для удаления отдельных элементов в List. Ниже приводится результат.

Анимация не соответствует ожидаемой. Ряд мигает, прежде чем перейти к следующему. Как установить animation.right или что-то подобное, чтобы не было сбоев в пользовательском интерфейсе и выглядеть как поведение по умолчанию, которое происходит при onDelete.

PS: я не могу использовать onDelete, потому что в моем приложении смахивание вправо и влево имеет другие функции.

Вот код.

struct ListDelete: View {

    @State var cars = ["Tesla", "Mercedes", "Audi", "Tata", "Jaguar"]

    var body: some View {
        List(cars, id: \.self) { car in
            Text(car).contextMenu {
                Button(action: {
                    if let index = self.cars.firstIndex(of: car) {
//                        self.cars.remove(at: index)
                        self.cars.remove(atOffsets: [index])
                    }
                }, label: {
                    HStack {
                        Text("Delete")
                        Spacer()
                        Image(systemName: "trash")
                    }
                })
            }
        }
    }
}

Два подхода, используемые для удаления элементов из массива, привели к тому же самому поведению.

Answer 1

Это проблема со SwiftUI, надеюсь, Apple исправит ее в следующем основном выпуске. Сейчас вы можете решить эту проблему, добавив небольшую задержку перед выполнением действий в контексте действия вашей контекстной кнопки:

DispatchQueue.main.asyncAfter(deadline: .now() + 0.7){
    //delete row
}

Answer 2

Из списка, к сожалению, в протоколе ListStyle есть какой-либо публичный c API. Теперь я вижу только mimi c List с ScrollView

import SwiftUI

struct ContentView: View {

    @State var cars = ["Tesla", "Mercedes", "Audi", "Tata", "Jaguar"]
    var body: some View {
        ScrollView {
            ForEach(cars, id: \.self) { car in
                VStack(alignment: .leading, spacing: 0) {
                    HStack {
                        Text(car).padding()
                        Spacer()
                    }
                    .contextMenu {
                        Button(action: {
                            if let index = self.cars.firstIndex(of: car) {
                                    self.cars.remove(at: index)
                            }
                        }, label: {
                            HStack {
                                Text("Delete")
                                Spacer()
                                Image(systemName: "trash")
                            }
                        })
                    }
                    Divider().padding(.leading)
                }.padding(.bottom, 0) // set -4 to be symetric
            }
        }
    }
}

со следующим результатом