SwiftUI拖拽二维数组行末元素时DragGesture中途停止响应的问题咨询

嘿，这个问题我之前做类似拖拽布局时也碰到过，咱们来一步步拆解原因和解决办法：

问题根源 #

你现在用ForEach(array2d[i].indices, id: \.self)遍历元素，这意味着每个视图的身份绑定的是它在数组里的位置索引。当你移除一行的最后一个元素时，这个索引对应的视图会直接被销毁——因为数组长度变短，原来的最后一个位置不存在了，绑定在这个视图上的DragGesture自然就跟着失效，不再响应后续拖拽事件。而其他元素被移除时，后面的元素会往前补位，对应的索引视图还存在，所以手势能继续工作。

另外，用doItOnce这种临时变量控制移动逻辑，也会导致状态管理不够严谨，容易出现意外的手势中断。

解决方案 #

核心思路是让SwiftUI能跟踪每个拖拽元素的唯一身份，而非依赖它的位置索引，同时用更可靠的方式定位元素，避免数组变化导致的视图销毁。

这里给出修改后的代码示例，调整了几个关键地方：

import SwiftUI

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

struct DragBugView: View {
    @State var array2d: [[Item]] = [
        [.init(text: "1"), .init(text: "2"), .init(text: "3")],
        [.init(text: "4"), .init(text: "5"), .init(text: "6")],
    ]
    // 用@GestureState跟踪拖拽中的元素ID，比临时flag更可靠
    @GestureState private var draggingItemId: UUID? = nil
    @State var translationHeight: CGFloat = 0
    
    var body: some View {
        VStack {
            Text("Dragging translation value: \n \(translationHeight)")
            ForEach(array2d.indices, id: \.self) { rowIndex in
                HStack {
                    // 直接遍历Item元素，利用Identifiable让SwiftUI跟踪视图身份
                    ForEach($array2d[rowIndex]) { $item in
                        Text(item.text)
                            .padding()
                            .background(draggingItemId == item.id ? Color.blue : Color.green)
                            .gesture(
                                DragGesture(coordinateSpace: .global)
                                    .updating($draggingItemId) { _, state, _ in
                                        state = item.id
                                    }
                                    .onChanged({ value in
                                        translationHeight = value.translation.height
                                        // 只有当拖拽的元素还在原数组中，且满足阈值时才执行移动
                                        guard draggingItemId == item.id,
                                              value.translation.height > 200,
                                              let (sourceRow, sourceCol) = findItemIndex(by: item.id) else {
                                            return
                                        }
                                        
                                        // 移除原位置的元素，插入到目标位置
                                        let movedItem = array2d[sourceRow].remove(at: sourceCol)
                                        array2d[0].insert(movedItem, at: 0)
                                    })
                                    .onEnded({ value in
                                        translationHeight = 0
                                    })
                            )
                    }
                }
            }
        }
    }
    
    // 辅助方法：通过Item的id找到它在二维数组中的位置
    private func findItemIndex(by id: UUID) -> (row: Int, col: Int)? {
        for (rowIndex, row) in array2d.enumerated() {
            if let colIndex = row.firstIndex(where: { $0.id == id }) {
                return (rowIndex, colIndex)
            }
        }
        return nil
    }
}

#Preview {
    DragBugView()
}

关键改动说明 #

• 用元素身份替代索引遍历：把ForEach(array2d[i].indices)改成ForEach($array2d[rowIndex])，利用Item的Identifiable特性，让SwiftUI能识别每个视图对应的具体元素，即使数组结构变化，视图也不会被销毁重建，手势就能持续响应。
• 用@GestureState跟踪拖拽状态：替代原来的doItOnce，@GestureState会在手势开始时自动设置，结束时自动重置，状态管理更符合SwiftUI的设计模式。
• 通过ID定位元素位置：新增findItemIndex方法，每次需要移动时通过元素的唯一ID找到它当前的位置，避免数组变化导致的索引失效问题。

额外建议 #

如果你的真实应用更复杂，还可以考虑：

• 把二维数组的状态管理封装到一个ObservableObject的ViewModel里，让视图逻辑更清晰，也方便处理更复杂的拖拽规则。
• 拖拽时可以添加临时的拖拽预览视图，提升用户体验，避免原视图移动时的视觉断层。

备注：内容来源于stack exchange，提问作者lokredi