Day 22: Exploring LazyHGrid
Cheers to the Day 22nd of the #30DaysOfSwift series!
Today, we’re diving into SwiftUI's LazyHGrid, an efficient way to display grid-like content in a horizontal scroll view.
Whether you’re building an image gallery, a product list, or a grid-based menu, LazyHGrid helps keep your UI smooth and responsive.
We’ll create a layout with 3 rows and display a series of numbered grid items.
Code Example
import SwiftUI struct LazyHGridExample: View { // Define the grid layout with 3 rows and flexible spacing let rows = [GridItem(.fixed(100)), GridItem(.fixed(100)), GridItem(.fixed(100))] var body: some View { ScrollView(.horizontal) { // Enable horizontal scrolling LazyHGrid(rows: rows, spacing: 20) { // Create LazyHGrid with 3 rows ForEach(0..<30) { item in // Create grid items with a rounded rectangle RoundedRectangle(cornerRadius: 10) .fill(Color.blue) .frame(width: 100, height: 100) // Fixed size for each grid item .overlay( Text("\(item)") .font(.largeTitle) .foregroundColor(.white) // Display item number on top ) } } .padding() // Add padding around the grid } } } struct ContentView: View { var body: some View { LazyHGridExample() // Show LazyHGrid layout in the main view } } @main struct LazyHGridApp: App { var body: some Scene { WindowGroup { ContentView() // Main content view } } } The full series is available on my profile and the components can also be found at shipios.app/components.
Happy Coding! 🎨
Top comments (0)