LazyVGrid in SwiftUI

Photo by Kelly Sikkema on Unsplash

LazyVGrid layout views in vertical directions just like VStack or LazyVStack with the ability to arrange child views in a grid layout. As the name suggests the vertical grid is lazy in nature, meaning grid cells will be rendered as they appear on the screen.

Let’s start with a single column grid example. LazyVGrid asks about column information in columns init parameter. This parameter takes array of GridItem type.

struct LazyVGridExample: View {
    let colors = [Color.blue, .green, .red, .pink, .orange, .teal, .purple, .gray, .yellow]
    let columns = [GridItem()]
    var body: some View {
        LazyVGrid(columns: columns) {
            ForEach(colors, id: \.self) { color in 
                RoundedRectangle(cornerRadius: 10)
                    .fill(color)
                    .frame(width: 100, height: 50)
            }
        }
    }
}

Adding more columns

Adding additional columns is as easy as adding more GridItems into the columns array.

struct LazyVGridExample: View {
    let colors = [Color.blue, .green, .red, .pink, .orange, .teal, .purple, .gray, .yellow]
    let columns = [GridItem(), GridItem(), GridItem()]…