How to get a grid in SwiftUI with custom layout (different cell size)

user_8914352 0
Viewed 829

So I am trying to get a custom grid with cells of different size. I have kinda gotten stuck here. So I have one particular cell with the height and size double that of all the others. But the left side of the cell requires two rows instead of one. How can I force to add two more boxes below H3 or to left of H4 box in the picture below.

Here is my code:

struct CustomGridView: View {
var body: some View {
    let gridItems = [GridItem(.fixed(150), spacing: 10, alignment: .leading),
                     GridItem(.fixed(150), spacing: 10, alignment: .leading),
                     GridItem(.fixed(150), spacing: 10, alignment: .leading)]

    LazyVGrid(columns: gridItems, spacing: 10) {
        ForEach(0..<9) { g in
            
            Text("H:\(g)")
                .frame(width: g == 4 ? 310 : 150, height: g == 4 ? 310 : 150)
                .background(Color.red)
            
            if g == 4 { Color.clear }
            
        }
    }
    .frame(width: 470)
}
}

Here is the screen shot of the grid situation so far:

enter image description here

Any help with this will be appreciated.

lazyvgrid swiftui swift ios
1 Answers

I don't think you can do that when just using lazy vgrid ForEach... Perhaps you can do something like that if you check for highest cell height in a row and then somehow fill it with two more boxes. You'd need to write a custom function for that. Also which block will go into the blank space above/below H:3? You'd need to write some custom logic for that.

Admin1
Related