如何在SwiftUI中实现类似UITableViewCell.insert的插入行与删除按钮

嘿，这个问题我刚好研究过！SwiftUI的List确实没有原生提供UITableView那种带绿色插入按钮的编辑样式，但我们完全可以通过自定义单元格来复刻这个效果，甚至比原生更灵活。下面是具体的实现方案：

要实现类似UITableView的插入/删除编辑样式，我们需要做三件事：

• 用EditMode管理编辑状态，配合系统的EditButton切换编辑模式
• 自定义列表单元格，在编辑状态下显示绿色插入按钮和红色删除按钮
• 绑定数据源，实现点击按钮后的插入/删除逻辑

先定义一个简单的数据模型（用Identifiable方便List遍历）：

struct Item: Identifiable {
    let id = UUID()
    var title: String
}

然后是主视图和自定义单元格的实现：

struct ContentView: View {
    @State private var items = [Item(title: "Item 1"), Item(title: "Item 2"), Item(title: "Item 3")]
    @State private var editMode: EditMode = .inactive
    
    var body: some View {
        NavigationStack {
            List {
                ForEach(items) { item in
                    CustomListItem(item: item, isEditing: editMode == .active) {
                        // 在当前项目的位置前插入新元素
                        if let index = items.firstIndex(where: { $0.id == item.id }) {
                            items.insert(Item(title: "New Item"), at: index)
                        }
                    } deleteAction: {
                        // 删除当前项目
                        items.removeAll { $0.id == item.id }
                    }
                }
            }
            .navigationTitle("Custom Edit Style")
            .toolbar {
                EditButton()
            }
            .environment(\.editMode, $editMode)
        }
    }
}

// 自定义列表单元格，复用性拉满
struct CustomListItem: View {
    let item: Item
    let isEditing: Bool
    let insertAction: () -> Void
    let deleteAction: () -> Void
    
    var body: some View {
        HStack {
            // 正常状态下显示的内容
            Text(item.title)
                .font(.body)
            
            Spacer()
            
            // 编辑状态下才显示按钮组
            if isEditing {
                // 绿色插入按钮，完全复刻UITableView的样式
                Button(action: insertAction) {
                    Image(systemName: "plus.circle.fill")
                        .foregroundColor(.green)
                        .font(.title)
                }
                
                // 红色删除按钮，和系统删除样式一致
                Button(action: deleteAction) {
                    Image(systemName: "minus.circle.fill")
                        .foregroundColor(.red)
                        .font(.title)
                }
            }
        }
    }
}

• 编辑状态管理：通过@State private var editMode绑定环境变量，我们可以精准控制单元格在编辑/非编辑状态下的UI展示
• 自定义按钮样式：用系统SF Symbols的图标，设置对应的绿色/红色，完美匹配UITableView的原生视觉效果
• 灵活的逻辑扩展：插入和删除的逻辑都通过闭包传递，你可以轻松修改插入位置（比如改成插入到列表末尾）、自定义新元素的内容，或者添加动画效果
• 复用性：把单元格抽成独立的CustomListItem视图，后续在其他列表里也能直接复用这个编辑样式

内容的提问来源于stack exchange，提问作者ngb