SwiftUI中为ForEach内的图片添加拖拽手势的问题

嘿，你分析得完全正确——所有图片一起移动的根源就是它们绑定了同一个全局dragOffset变量。要让每株植物能独立拖拽，咱们需要为每个植物单独维护拖拽状态，同时加上拖拽到角落触发删除的逻辑。下面是具体的实现步骤和代码：

1. 为每个植物单独存储拖拽偏移量 #

我们可以用一个@State修饰的字典，以植物的唯一ID为键，对应存储该植物的拖拽偏移量。这样每株植物的拖拽状态就不会互相干扰了：

@State private var dragOffsets: [UUID: CGSize] = [:]

2. 修改手势与视图绑定逻辑 #

在ForEach循环中，每个植物的offset要绑定到字典中对应的条目（默认值为CGSize.zero）。同时调整DragGesture，只更新当前植物的偏移量，并在拖拽结束时判断是否触发删除：

var body: some View {
    VStack (spacing: 5) {
        Text("Plants")
            .font(.headline)
            .fontWeight(.light)
        
        HStack (spacing: 10) {
            ForEach(plantBoxViewModel.plants) { plant in
                Image(base64String: plant.picture)
                    .resizable()
                    .clipShape(Circle())
                    .overlay(Circle().stroke(Color.white, lineWidth: 2))
                    // 绑定当前植物的拖拽偏移量
                    .offset(dragOffsets[plant.id] ?? .zero)
                    .animation(.easeInOut, value: dragOffsets[plant.id])
                    .aspectRatio(contentMode: .fill)
                    .frame(width: 70, height: 70)
                    .gesture(
                        DragGesture()
                            // 拖拽过程中更新当前植物的偏移量
                            .updating($dragOffsets[plant.id], initialValue: .zero) { value, state, _ in
                                state = value.translation
                            }
                            // 拖拽结束时判断是否删除植物
                            .onEnded { value in
                                // 这里以拖拽到屏幕左上角为例，可根据你的需求调整判断条件
                                let isDraggedToCorner = value.location.x < 50 && value.location.y < 50
                                if isDraggedToCorner {
                                    plantBoxViewModel.removePlant(plant)
                                    // 删除后清空该植物的拖拽状态（可选）
                                    dragOffsets.removeValue(forKey: plant.id)
                                } else {
                                    // 未触发删除，重置偏移量
                                    dragOffsets[plant.id] = .zero
                                }
                            }
                    )
            }
        }
    }
}

关键细节说明 #

• 拖拽状态隔离：通过dragOffsets字典，每株植物的拖拽偏移量都是独立存储的，拖拽时只会修改当前植物对应的条目，不会影响其他植物。
• 删除逻辑触发：在onEnded回调中，根据拖拽的终点位置判断是否拖到了目标角落（示例中是左上角，你可以根据需求调整坐标阈值），如果满足条件就调用ViewModel的删除方法。
• 动画优化：把动画的value指定为当前植物的偏移量，这样只有被拖拽的植物会触发动画，更符合预期。

补充：ViewModel的删除方法 #

记得在你的plantBoxViewModel中实现对应的删除方法，比如：

func removePlant(_ plant: Plant) {
    plants.removeAll { $0.id == plant.id }
}

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