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

Question

我在SwiftUI View中使用List显示了一系列项目。 我厌倦了添加contextMenu来删除List中的单个项目。 以下是结果。

animation 不是预期的。 在移动下一行之前，该行会闪烁。 如何设置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
            }
        }
    }
}

结果如下

Answer 3

是contextMenu的问题，闪烁的是contextMenu上面list item的白色背景。所以你可以通过make the contextMenu yourSelf来解决