Grid layout (LazyVGrid, LazyHGrid) in iOS Swift - UI Render Trace

Component - Grid layout (LazyVGrid, LazyHGrid)

This UI component shows how to arrange items in a grid using SwiftUI's LazyVGrid and LazyHGrid. It helps display many items efficiently in rows and columns that scroll vertically or horizontally.

Widget Tree

VStack
├── Text (Title)
├── ScrollView (Vertical)
│   └── LazyVGrid
│       ├── ForEach (Grid Items)
│       │   └── Rectangle (Grid Cell)
├── Divider
├── ScrollView (Horizontal)
│   └── LazyHGrid
│       ├── ForEach (Grid Items)
│       │   └── Rectangle (Grid Cell)

The main vertical stack (VStack) holds a title text, a vertical scroll view containing a LazyVGrid with rectangular cells, a divider line, and a horizontal scroll view containing a LazyHGrid with rectangular cells. This layout shows two grids: one scrolling vertically and one horizontally.

Render Trace - 11 Steps

Step 1: VStack

Step 2: Text

Step 3: ScrollView (Vertical)

Step 4: LazyVGrid

Step 5: ForEach

Step 6: Rectangle

Step 7: Divider

Step 8: ScrollView (Horizontal)

Step 9: LazyHGrid

Step 10: ForEach

Step 11: Rectangle

State Change - Re-render

Trigger:User scrolls vertically or horizontally

Before

Initial grid cells displayed with some off-screen

→

After

New grid cells rendered as user scrolls into view

Re-renders:Only visible grid cells in LazyVGrid or LazyHGrid re-render for smooth performance

UI Quiz - 3 Questions

What does LazyVGrid do in this UI?

A Arranges items in a vertical grid with multiple columns

B Arranges items in a horizontal grid with multiple rows

C Creates a single column list

D Displays items in a circle

Key Insight

Using LazyVGrid and LazyHGrid helps build efficient grid layouts that load only visible items, improving app performance and smooth scrolling even with many items.