如何在SwiftUI List中实现滑动删除（swipe-to-delete）功能？

一、基础内置滑动删除（系统默认样式，匹配邮件App行为） #

SwiftUI 原生支持滑动删除，核心是通过 ForEach 绑定可识别数据源，配合 onDelete 方法实现。如果之前尝试 onDelete 失败，大概率是没正确使用 ForEach 包裹列表项。

完整代码示例 #

import SwiftUI

// 定义列表项模型，必须遵循Identifiable协议（提供唯一ID）
struct TodoItem: Identifiable {
    let id = UUID()
    var title: String
}

struct ContentView: View {
    // 用@State修饰可变数据源，确保删除后UI自动更新
    @State private var todos = [
        TodoItem(title: "完成SwiftUI滑动删除实现"),
        TodoItem(title: "整理项目文档"),
        TodoItem(title: "测试应用兼容性")
    ]
    
    var body: some View {
        NavigationStack {
            List {
                // 必须用ForEach包裹列表项，因为onDelete需要绑定可追踪的数据源
                ForEach(todos) { todo in
                    Text(todo.title)
                }
                // 绑定删除操作
                .onDelete(perform: deleteItem)
            }
            .navigationTitle("待办事项")
            // 可选：添加编辑按钮，支持批量删除（不影响滑动删除功能）
            .toolbar {
                EditButton()
            }
        }
    }
    
    // 删除逻辑实现
    private func deleteItem(at offsets: IndexSet) {
        todos.remove(atOffsets: offsets)
    }
}

#Preview {
    ContentView()
}

关键说明 #

• Identifiable协议：确保每个列表项有唯一ID，让SwiftUI能准确追踪数据变化。
• ForEach的必要性：List 直接包含静态视图时无法触发 onDelete，必须通过 ForEach 将数据与视图绑定，支持编辑操作。
• onDelete(perform:)：接收 IndexSet 参数（对应要删除项的索引），调用 remove(atOffsets:) 即可完成数据删除，SwiftUI会自动更新UI。

二、自定义滑动操作（多按钮/自定义样式） #

如果需要更灵活的滑动行为（比如像邮件App那样显示多个按钮、自定义按钮样式），可以用iOS 15+ 支持的 swipeActions 修饰符。

完整代码示例 #

ForEach(todos) { todo in
    Text(todo.title)
}
.swipeActions(edge: .trailing, allowsFullSwipe: true) {
    // 破坏性按钮（红色样式，对应删除操作）
    Button(role: .destructive) {
        // 通过ID定位并删除项
        if let index = todos.firstIndex(where: { $0.id == todo.id }) {
            todos.remove(at: index)
        }
    } label: {
        Label("删除", systemImage: "trash")
    }
    
    // 额外操作按钮
    Button(role: .none) {
        // 这里可以添加标记已读/归档等逻辑
    } label: {
        Label("标记已读", systemImage: "envelope.open")
    }
}

关键说明 #

• edge参数：设置为 .trailing（右滑）或 .leading（左滑），控制按钮显示方向。
• allowsFullSwipe：设为 true 时，用户全滑到底会直接触发第一个按钮（和邮件App的快速删除逻辑一致）。
• role: .destructive：自动应用系统破坏性操作的红色样式，符合iOS设计规范。

内容的提问来源于stack exchange，提问作者c-137