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

具有以下结果

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

2 个答案: