如何通过点击列表行禁用SwiftUI的editingMode并兼容各类组件

核心思路是通过给列表行添加独立的全屏点击手势触发编辑模式切换，同时针对行内组件在编辑模式下的交互做针对性控制，彻底解决手势冲突问题。

1. 重构TitleList组件 #

用@Binding管理数据源和编辑状态，给每个列表行绑定全屏点击区域，同时将编辑状态传递给行内容闭包，让组件能动态调整交互逻辑：

struct TitleList<RowContent: View>: View {
    @Binding var items: [String]
    @State private var isEditing = false
    
    let rowContent: (String, Bool) -> RowContent // 传递编辑状态给行内容
    
    var body: some View {
        List {
            ForEach(items, id: \.self) { item in
                rowContent(item, isEditing)
                    .swipeActions(edge: .leading) {
                        Button {
                            isEditing.toggle()
                        } label: {
                            Label("重排", systemImage: "arrow.up.arrow.down")
                        }
                        .tint(.blue)
                    }
                    .listRowInsets(EdgeInsets())
                    .contentShape(Rectangle()) // 让点击手势覆盖整行
                    .onTapGesture {
                        if isEditing {
                            isEditing = false
                        }
                    }
            }
            .onMove(perform: move)
            .disabled(!isEditing) // 仅编辑模式允许重排
        }
        .environment(\.editMode, .constant(isEditing ? .active : .inactive))
    }
    
    private func move(from source: IndexSet, to destination: Int) {
        items.move(fromOffsets: source, toOffset: destination)
    }
}

2. 行内组件适配逻辑 #

在自定义行内容时，根据传递的isEditing状态调整组件交互：

• NavigationLink：编辑模式下禁用跳转，保留视觉样式
• Button：编辑模式下禁用点击，避免和行的关闭手势冲突
• 静态组件（Text等）：无需额外处理，直接响应行手势

示例使用代码：

struct ContentView: View {
    @State private var items = ["项目1", "项目2", "项目3"]
    
    var body: some View {
        NavigationStack {
            TitleList(items: $items) { item, isEditing in
                // 示例1：NavigationLink
                NavigationLink(destination: Text(item)) {
                    Text(item)
                        .padding(.vertical, 12)
                        .padding(.horizontal)
                }
                .disabled(isEditing)
                
                // 示例2：Button
                // Button(action: { print("点击了\(item)") }) {
                //     Text(item)
                //         .foregroundColor(.red)
                //         .padding(.vertical, 12)
                //         .padding(.horizontal)
                // }
                // .disabled(isEditing)
                
                // 示例3：普通Text
                // Text(item)
                //     .padding(.vertical, 12)
                //     .padding(.horizontal)
            }
            .navigationTitle("可重排列表")
        }
    }
}

3. 关键细节说明 #

• contentShape(Rectangle())：强制行的点击响应区域覆盖整行，解决只能点击行内组件才能退出编辑的问题
• 行内组件通过disabled(isEditing)在编辑模式下禁用自身交互，彻底避免手势冲突
• 用@Binding绑定数据源，保证重排后数据实时同步
• 编辑状态通过environment(\.editMode)传递给列表，确保系统重排功能正常激活

最终实现效果：

• 滑动行左侧调出「重排」按钮，点击进入编辑模式
• 点击行任意区域即可退出编辑模式
• 编辑模式下不会触发行内组件的跳转、点击等交互

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