SwiftUI列表实现左滑删除Section及嵌套子行的可行性咨询

当然可以实现这个需求！SwiftUI提供了灵活的交互配置方式，能让你轻松给Section添加左滑删除功能，同时保留子行的删除逻辑。下面针对你的代码给出具体修改方案：

1. 先确保数据源符合要求 #

首先，你的items数组和内部的versions数组都需要遵循Identifiable协议，这样ForEach才能正确识别和操作元素：

struct HeaderItem: Identifiable {
    let id = UUID()
    var name: String
    var versions: [VersionItem]
}

struct VersionItem: Identifiable {
    let id = UUID()
    var versionNumber: String
}

2. 给Section添加左滑删除功能 #

默认情况下，绑定在最外层ForEach的onDelete需要进入编辑模式才能删除Section；如果要让Section支持左滑直接触发删除，可以给Section的HeaderView添加swipeActions，这样左滑Section头部就能一键删除整个Section及下属所有子行。

修改后的完整代码示例：

struct ContentView: View {
    @State private var items: [HeaderItem] = [
        HeaderItem(name: "Section 1", versions: [
            VersionItem(versionNumber: "1.0"),
            VersionItem(versionNumber: "1.1")
        ]),
        HeaderItem(name: "Section 2", versions: [
            VersionItem(versionNumber: "2.0")
        ])
    ]
    
    var body: some View {
        NavigationStack {
            List {
                ForEach($items) { $headerItem in // 使用绑定直接操作数据源
                    Section(
                        header: HeaderView(item: headerItem)
                            .swipeActions(edge: .trailing) {
                                Button(role: .destructive) {
                                    // 删除整个Section及其所有子行
                                    if let index = items.firstIndex(where: { $0.id == headerItem.id }) {
                                        items.remove(at: index)
                                    }
                                } label: {
                                    Label("Delete", systemImage: "trash")
                                }
                            }
                            .onTapGesture {
                                // 你的Section头部点击逻辑
                            },
                        footer: EmptyView()
                    ) {
                        ForEach($headerItem.versions) { $version in
                            SubHeaderView(version: version)
                                .onTapGesture {
                                    // 你的子行点击逻辑
                                }
                                .swipeActions(edge: .trailing) {
                                    Button(role: .destructive) {
                                        // 删除单个子行
                                        if let index = headerItem.versions.firstIndex(where: { $0.id == version.id }) {
                                            headerItem.versions.remove(at: index)
                                        }
                                    } label: {
                                        Label("Delete", systemImage: "trash")
                                    }
                                }
                        }
                    }
                }
                // 可选：保留编辑模式下的批量删除支持
                .onDelete(perform: deleteSection)
            }
            .navigationTitle("Sections Demo")
            .toolbar {
                EditButton() // 添加编辑按钮，支持批量删除Section
            }
        }
    }
    
    // 编辑模式下删除Section的方法
    private func deleteSection(at offsets: IndexSet) {
        items.remove(atOffsets: offsets)
    }
}

// 你的HeaderView示例（可根据需求自定义）
struct HeaderView: View {
    let item: HeaderItem
    var body: some View {
        Text(item.name)
            .font(.headline)
    }
}

// 你的SubHeaderView示例（可根据需求自定义）
struct SubHeaderView: View {
    let version: VersionItem
    var body: some View {
        Text(version.versionNumber)
    }
}

关键修改点说明 #

• 使用绑定数据源：用ForEach($items)获取Section项的绑定，这样能直接修改数据源并同步更新UI。
• 给HeaderView添加swipeActions：通过这个API给Section头部添加左滑删除按钮，点击后直接删除对应的整个Section（包含所有子行）。
• 保留子行删除逻辑：子行的左滑删除功能依然保留，和Section的删除操作互不冲突。
• 可选编辑模式支持：添加EditButton后，用户可以进入编辑模式批量删除Section，这是SwiftUI原生的交互方式。

注意事项 #

• 确保你的数据源是可变的（用@State、@Binding或@Published修饰），这样删除操作才能实时更新界面。
• 如果你不需要编辑模式，可以直接去掉EditButton和外层的onDelete方法，只保留HeaderView的swipeActions即可实现纯左滑删除Section的需求。

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