Model-View-ViewModel模式下SwiftUI的删除方法探讨

2023-04-06 18:07:15

SwiftUI 中的删除方法

在 SwiftUI 中，删除数据是一个常见的操作，可以通过多种方法实现。本文将介绍使用上下文菜单按钮、自定义上下文菜单、编辑模式和长按手势来实现删除的四种方法，并提供代码示例和详细说明。

1. 使用上下文菜单按钮删除

最简单的方法是使用 SwiftUI 内置的 contextMenu 上下文菜单按钮。它允许你在项目上添加一个删除按钮，如下所示：

struct ContentView: View {
    @State private var items = ["A", "B", "C"]

    var body: some View {
        List {
            ForEach(items, id: \.self) { item in
                Text(item)
                    .contextMenu {
                        Button(action: {
                            items.remove(item)
                        }) {
                            Text("Delete")
                        }
                    }
            }
        }
    }
}

2. 自定义上下文菜单删除

除了使用内置的上下文菜单按钮外，你还可以自定义自己的上下文菜单，其中包含删除按钮，如下所示：

struct ContentView: View {
    @State private var items = ["A", "B", "C"]

    var body: some View {
        List {
            ForEach(items, id: \.self) { item in
                Text(item)
                    .contextMenu {
                        ContextMenu(menuItems: {
                            Button(action: {
                                items.remove(item)
                            }) {
                                Text("Delete")
                            }
                        })
                    }
            }
        }
    }
}

3. 使用编辑模式删除

编辑模式允许你启用多个项目的选择，并提供一个删除按钮来删除选定的项目，如下所示：

struct ContentView: View {
    @State private var items = ["A", "B", "C"]

    var body: some View {
        List {
            ForEach(items, id: \.self) { item in
                Text(item)
            }
            .onDelete(perform: deleteItems)
        }
        .environment(\.editMode, .active)
    }

    private func deleteItems(offsets: IndexSet) {
        items.remove(atOffsets: offsets)
    }
}

4. 使用长按手势删除

长按手势提供了一种通过长按项目来删除项目的交互方式，如下所示：

struct ContentView: View {
    @State private var items = ["A", "B", "C"]

    var body: some View {
        List {
            ForEach(items, id: \.self) { item in
                Text(item)
                    .contentShape(Rectangle())
                    .gesture(
                        LongPressGesture()
                            .onEnded { _ in
                                items.remove(item)
                            }
                    )
            }
        }
    }
}