Touch/drag motion to select multiple cells in a lazyvgrid

Question

I'm trying to use a LazyVGrid in SwiftUI where you can touch and drag your finger to select multiple adjacent cells in a specific order. This is not drag and drop, and I don't want to move the cells (maybe drag isn't the right term here, but couldn't think of another one to describe it). Also, you would be able to reverse the selection (ie: each cell can only be selected once and reversing direction would un-select the cell). How can I accomplish this? Thanks!

For example:

struct ContentView: View {

    @EnvironmentObject private var cellsArray: CellsArray
        
    var body: some View {
        VStack {
            LazyVGrid(columns: gridItems, spacing: spacing) {
                ForEach(0..<(rows * columns), id: \.self){index in
                    VStack(spacing: 0) {
                        CellsView(index: index)
                    }
                }
            }
        }
    }
}
struct CellsView: View {
            
    @State var index: Int
    @EnvironmentObject var cellsArray: CellsArray

    var body: some View {
       ZStack {
           Text("\(self.cellsArray[index].cellValue)") //cellValue is a string
               .foregroundColor(Color.yellow)
               .frame(width: getWidth(), height: getWidth())
               .background(Color.gray)
       }
       //.onTapGesture ???
    }
    func getWidth()->CGFloat{
                
        let width = UIScreen.main.bounds.width - 10
        
        return width / CGFloat(columns)
        
    }
}

It does not look you even tried. This can be helpful to start https://stackoverflow.com/a/63438481/12299030. — Asperi, Apr 13 '22 at 05:16
Drag gesture would be more appropriate. Does your grid can scroll ? Something like Photos app ? — Ptit Xav, Apr 13 '22 at 08:22
I don't want to move the cells, just drag your finger to select them in a specific order and also reverse the drag motion to unselect. — CS0521, Apr 13 '22 at 16:08

score -1 · Answer 1 · answered Apr 17 '22 at 13:45

Something like this might help, the only issue here is the coordinate space. Overlay is not drawing the rectangle in the correct coordinate space.

struct ImagesView: View {
    var columnSize: CGFloat
    @Binding var projectImages: [ProjectImage]
    @State var selectedImages: [ImageSelection] = []
    @State var dragWidth: CGFloat = 1.0
    @State var dragHeight: CGFloat = 1.0
    @State var dragStart: CGPoint = CGPoint(x:0, y:0)
    let columns = [
        GridItem(.adaptive(minimum: 200), spacing: 0)
    ]
    
    var body: some View {
        GeometryReader() { geometry in
            ZStack{
                ScrollView{
                    LazyVGrid(columns: [
                        GridItem(.adaptive(minimum: columnSize), spacing: 2)
                    ], spacing: 2){
                        ForEach(projectImages, id: \.imageUUID){ image in
                            Image(nsImage: NSImage(data: image.imageData)!)
                                .resizable()
                                .scaledToFit()
                                .border(selectedImages.contains(where: {imageSelection in imageSelection.uuid == image.imageUUID}) ? Color.blue : .primary, width: selectedImages.contains(where: {imageSelection in imageSelection.uuid == image.imageUUID}) ? 5.0 : 1.0)
                                
                                .gesture(TapGesture(count: 2).onEnded{
                                    print("Double tap finished")
                                })
                                .gesture(TapGesture(count: 1).onEnded{
                                    if selectedImages.contains(where: {imageSelection in imageSelection.uuid == image.imageUUID}) {
                                        print("Image is already selected")
                                        if let index = selectedImages.firstIndex(where: {imageSelection in imageSelection.uuid == image.imageUUID}){
                                            selectedImages.remove(at: index)
                                        }
                                        
                                    } else {
                                        selectedImages.append(ImageSelection(imageUUID: image.imageUUID))
                                        print("Image has been selected")
                                    }
                                })
                        }
                    }
                    .frame(minHeight: 50)
                    .padding(.horizontal, 1)
                }
                .simultaneousGesture(
                    DragGesture(minimumDistance: 2)
                        .onChanged({ value in
                            print("Drag Start: \(value.startLocation.x)")
                            self.dragStart = value.startLocation
                            self.dragWidth = value.translation.width
                            self.dragHeight = value.translation.height
                        })
                )
                .overlay{
                    Rectangle()
                        .frame(width: dragWidth, height: dragHeight)
                        .offset(x:dragStart.x, y:dragStart.y)
                }
                
            }
        }
    }
}

Touch/drag motion to select multiple cells in a lazyvgrid

1 Answers1

Linked