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

使用上下文菜单删除列表中的行是 SwiftUI 中常见的任务之一。在这篇文章中，我们将探讨如何在 SwiftUI 中实现这一功能，并解决可能出现的 UI 故障。

swift
struct RowView: View {
    @State private var showContextMenu = false
    
    var body: some View {
        HStack {
            Text("Row")
            Spacer()
            Button(action: {
                showContextMenu = true
            }) {
                Image(systemName: "ellipsis.circle")
                    .imageScale(.large)
            }
            .contextMenu {
                Button(action: {
                    // 删除行的操作
                }) {
                    Text("删除")
                    Image(systemName: "trash")
                }
            }
        }
    }
}

swift
struct ListView: View {
    var body: some View {
        VStack {
            RowView()
            RowView()
            RowView()
        }
    }
}

swift
struct ListView: View {
    @State private var rows = ["Row 1", "Row 2", "Row 3"]
    
    var body: some View {
        VStack {
            List {
                ForEach(rows, id: \.self) { row in
                    RowView()
                        .onDelete {
                            rows.removeAll { $0 == row }
                        }
                }
            }
        }
    }
}

swift
struct RowView: View {
    // ...
    var body: some View {
        HStack {
            // ...
        }
        .contentShape(Rectangle()) // 添加修饰符
        .onTapGesture {
            showContextMenu = true
        }
        .contextMenu {
            // ...
        }
    }
}