SwiftUI EditMode下如何让ForEach列表行可点击触发编辑操作

核心思路是根据编辑模式的状态动态切换列表行的容器组件：非编辑模式下使用NavigationLink实现跳转逻辑，编辑模式下使用Button触发编辑弹窗，完全规避手势冲突同时保留原生交互特性。

实现代码 #

你可以直接替换最小示例中的对应部分即可：

struct ContentView: View {
    @State private var editMode = EditMode.inactive
    @State private var isShowingEditionSheet: Bool = false
    // 新增存储当前选中的待编辑元素
    @State private var selectedElement: SomeList?
    
    var body: some View {
        NavigationView {
            List {
                ForEach(someList) { someElement in
                    // 根据编辑模式动态切换行容器
                    if editMode == .active {
                        Button {
                            selectedElement = someElement
                            isShowingEditionSheet = true
                        } label: {
                            HStack {
                                Text(someElement.name)
                                // 保证行内空白区域也能响应点击
                                Spacer()
                            }
                            .contentShape(Rectangle())
                        }
                        // 取消Button默认的蓝色文字样式，和原有行样式保持一致
                        .buttonStyle(.plain)
                    } else {
                        NavigationLink(destination: EmptyView()) {
                            Text(someElement.name)
                        }
                    }
                }
                .onDelete { _ in }
                .onMove { _, _ in }
            }
            .toolbar {
                ToolbarItem(placement: .navigationBarLeading) {
                    EditButton()
                }
            }
            .environment(\.editMode, $editMode)
            .sheet(isPresented: $isShowingEditionSheet) {
                // 这里可以直接通过selectedElement拿到待编辑的数据
                Text("编辑 \(selectedElement?.name ?? "")")
            }
        }
    }
}

方案优势 #

• 完全基于SwiftUI原生组件实现，无需自定义View扩展，最低兼容iOS14
• 编辑模式下点击行自带系统默认高亮效果，符合用户交互预期
• 整行任意区域点击都能触发响应，无点击死角
• 完全保留List原生的onDelete、onMove功能，无任何影响
• 非编辑模式下NavigationLink完全正常工作，无手势冲突问题
• 可以直接通过selectedElement拿到当前点击的行数据，编辑逻辑更易实现

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