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
2
Answers
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:
I used scroll views to make the grid scrollable in both direction, but you can omit them if you don’t need this behavior.
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).