SwiftUI - 使用上下文菜单删除列表中的行 - UI 故障

Question

我List在我的SwiftUI View. 我累了添加一个contextMenu删除单个项目的List. 结果如下。

动画不是预期的。该行在移动下一个之前闪烁。如何设置animation.right或类似的东西，以便没有 UI 故障并且看起来像发生在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

它来自 List，不幸的是 ListStyle 协议有任何公共 API。我现在看到的唯一方法是用 ScrollView 模仿 List

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
            }
        }
    }
}

结果如下