How to add Overlay to the Row of grid item

Question

I want add Rounded Rectangle to the Entire row when user click any of the grid item from that row..how can i add that rectangle to entire row...

struct ContentView: View {
    let data = [Date]

    let columns = Array(repeating: GridItem(.flexible()), count: 7)

    var body: some View {
       
            LazyVGrid(columns: columns, spacing: 20) {
                ForEach(data, id: \.self) { item in
                    Text(item.date)
                }
            }
            .padding(.horizontal)
       
    }
}

I am expecting to get Row item group so that i can add overlay into it...but i'm unable to get it

score 0 · Answer 1 · answered Mar 24 '23 at 09:57

You can create your grid using a stack combination. Each row can be an HStack and you can use apply to it a 'onTapGesture' or any view modifier you want to change row appearance.

This can be simple example:

struct ContentView: View {
    let data: [[Date]] = [Array(repeating: Date(), count: 2),
                          Array(repeating: Date(), count: 2)]
    
    var body: some View {
        ScrollView {
            LazyVStack {
                ForEach(0..<data.count, id: \.self) { row in
                    ScrollView(.horizontal) {
                        LazyHStack {
                            ForEach(0..<data[row].count, id: \.self) { column in
                                Text("\(data[row][column])")
                            }
                        }
                        .onTapGesture {
                            print("Hello World")
                        }
                    }
                }
            }
        }
    }
}

I used scroll views to make the grid scrollable in both direction, but you can omit them if you don't need this behavior.

Hongtron · Answer 2 · 2023-03-24T10:02:41.993

I have solved this in the past by breaking the data in to Arrays for each row and then having an additional ForEach to build the row. These can then be bordered. Effectively each row becomes its own LazyVStack. Code example I have test is below. One thing to note is that as it is effectively different Grids, if your data widths vary in each row, each row could have different column spacing. In which case using fixed width columns would preserve this in the list of rows (LazyVGrids).

struct ContentView: View {
    let data = ["1" , "2" , "3" , "4" , "5" , "6" , "7" , "8" , "11" , "12" , "13" , "14" , "15" , "16" , "17" , "18" , ]

    let columns = Array(repeating: GridItem(.flexible()), count: 7)

    var body: some View {
        ForEach(rowsArray(), id: \.self) { rowArray in
            LazyVGrid(columns: columns, spacing: 20) {
                ForEach(rowArray , id: \.self) { item in
                    Text(item)
                }
            }.border(.blue)
        }
        .padding(.horizontal)
       
    }
    
    func rowsArray() -> [[String]] {
        var rowArrays: [[String]] = [[]]
        var index = 0
        while index < data.count {
            let range = min( 7 , (data.count - index))
            let rowArray = Array( data[index..<(index + range)] )
            rowArrays.append(rowArray)
            index = index + range
        }
        return rowArrays
    }
}

How to add Overlay to the Row of grid item

2 Answers2