Grid layout (LazyVGrid, LazyHGrid) in iOS Swift - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is LazyVGrid in SwiftUI?

LazyVGrid is a SwiftUI view that arranges child views in a vertical grid. It loads views only when needed, improving performance for large data sets.

beginner

How does LazyHGrid differ from LazyVGrid?

LazyHGrid arranges child views in a horizontal grid, loading views lazily as they appear on screen, unlike LazyVGrid which arranges vertically.

intermediate

What is the role of GridItem in LazyVGrid or LazyHGrid?

GridItem defines the size and spacing of each column (in LazyVGrid) or row (in LazyHGrid). You can specify fixed, flexible, or adaptive sizes.

intermediate

Why use lazy grids instead of regular grids in SwiftUI?

Lazy grids load views only when they appear on screen, saving memory and improving performance, especially with many items.

beginner

How do you make a grid with 3 equal columns using LazyVGrid?

Create an array of three GridItems with .flexible() size and pass it to LazyVGrid's columns parameter.

Which SwiftUI view arranges items in a vertical grid and loads views lazily?

A VStack

B LazyVGrid

C LazyHGrid

D HStack

LazyVGrid arranges items vertically and loads views lazily for better performance.

What does a GridItem with .fixed(100) size mean?

A The grid item is exactly 100 points wide or tall

B The grid item can grow or shrink flexibly

C The grid item adapts to available space

D The grid item is hidden

A fixed GridItem has a constant size of 100 points.

Which grid type arranges items horizontally in SwiftUI?

A LazyHGrid

B ZStack

C GridStack

D LazyVGrid

LazyHGrid arranges items horizontally.

Why is lazy loading important in grids?

A It changes colors automatically

B It loads all views at once

C It disables scrolling

D It improves performance by loading views only when needed

Lazy loading improves performance by creating views only when they appear on screen.

How do you specify spacing between columns in LazyVGrid?

A Using padding on each item

B Using frame modifiers

C Using the spacing parameter in LazyVGrid initializer

D Spacing is not customizable

LazyVGrid has a spacing parameter to set space between columns.

Explain how to create a simple 2-column vertical grid using LazyVGrid in SwiftUI.

Think about how you define columns and place views inside LazyVGrid.

Describe the benefits of using LazyHGrid over a regular horizontal stack for many items.

Consider what happens when you have many items off screen.

Practice

1. What does LazyVGrid do in SwiftUI?

easy

A. Arranges items vertically in columns

B. Arranges items horizontally in rows

C. Creates a single scrollable list

D. Stacks items on top of each other

Solution

1. Step 1: Understand LazyVGrid purpose

   LazyVGrid arranges views vertically in columns, meaning items fill columns top to bottom.

2. Step 2: Compare with other layouts

   LazyHGrid arranges horizontally in rows, so LazyVGrid is vertical columns.

3. Final Answer:

   Arranges items vertically in columns -> Option A

4. Quick Check:

   LazyVGrid = vertical columns [OK]

Hint: Remember V in LazyVGrid means vertical columns [OK]

Common Mistakes:

• Confusing LazyVGrid with LazyHGrid
• Thinking it stacks items horizontally
• Assuming it creates a list

2. Which of the following is the correct way to define a grid with two flexible columns using LazyVGrid?

easy

A. LazyVGrid(columns: [GridItem(.flexible()), GridItem(.flexible())]) { ... }

B. LazyVGrid(rows: [GridItem(.flexible()), GridItem(.flexible())]) { ... }

C. LazyHGrid(columns: [GridItem(.flexible()), GridItem(.flexible())]) { ... }

D. LazyVGrid(columns: GridItem(.fixed(100))) { ... }

Solution

1. Step 1: Check parameter name for LazyVGrid

   LazyVGrid uses the parameter 'columns' to define its grid structure.

2. Step 2: Verify GridItem array for two flexible columns

   Two GridItem(.flexible()) inside an array means two flexible columns.

3. Final Answer:

   LazyVGrid(columns: [GridItem(.flexible()), GridItem(.flexible())]) { ... } -> Option A

4. Quick Check:

   LazyVGrid uses columns array [OK]

Hint: LazyVGrid needs 'columns' parameter as array [OK]

Common Mistakes:

• Using 'rows' parameter with LazyVGrid
• Confusing LazyHGrid with LazyVGrid
• Passing single GridItem without array

3. What will be the layout result of this code snippet?

LazyHGrid(rows: [GridItem(.fixed(50))]) {
  ForEach(0..<3) { i in
    Text("Item \(i)")
  }
}

medium

A. Three items arranged vertically in one column

B. Three items arranged horizontally in one row with fixed height

C. Three items stacked on top of each other with flexible height

D. Syntax error due to missing columns parameter

Solution

1. Step 1: Understand LazyHGrid with rows parameter

   LazyHGrid arranges items horizontally in rows. Here, rows array has one GridItem with fixed height 50.

2. Step 2: Analyze ForEach producing 3 items

   Three Text views will be placed horizontally in one row, each with height 50.

3. Final Answer:

   Three items arranged horizontally in one row with fixed height -> Option B

4. Quick Check:

   LazyHGrid + rows = horizontal rows [OK]

Hint: LazyHGrid uses rows array to set horizontal rows [OK]

Common Mistakes:

• Thinking LazyHGrid arranges vertically
• Confusing fixed height with width
• Expecting syntax error due to columns

4. Identify the error in this SwiftUI grid code:

LazyVGrid(rows: [GridItem(.flexible())]) {
  Text("Hello")
  Text("World")
}

medium

A. Text views cannot be inside LazyVGrid

B. Missing ForEach loop for multiple items

C. GridItem should be .fixed, not .flexible

D. Using 'rows' parameter instead of 'columns' in LazyVGrid

Solution

1. Step 1: Check parameter name for LazyVGrid

   LazyVGrid requires 'columns' parameter, not 'rows'. Using 'rows' causes error.

2. Step 2: Confirm other parts are valid

   Text views can be inside LazyVGrid; ForEach is optional for multiple views.

3. Final Answer:

   Using 'rows' parameter instead of 'columns' in LazyVGrid -> Option D

4. Quick Check:

   LazyVGrid needs 'columns' parameter [OK]

Hint: LazyVGrid uses 'columns', not 'rows' [OK]

Common Mistakes:

• Confusing rows and columns parameters
• Thinking ForEach is mandatory
• Misunderstanding GridItem types

5. You want to create a grid with 3 columns where the first column is fixed width 100, the second is flexible, and the third is adaptive with minimum 80 width. Which code correctly defines the columns array for LazyVGrid?

hard

A. [GridItem(.adaptive(minimum: 80)), GridItem(.fixed(100)), GridItem(.flexible())]

B. [GridItem(.flexible()), GridItem(.fixed(100)), GridItem(.adaptive(minimum: 80))]

C. [GridItem(.fixed(100)), GridItem(.flexible()), GridItem(.adaptive(minimum: 80))]

D. [GridItem(.fixed(100)), GridItem(.adaptive(minimum: 80)), GridItem(.flexible())]

Solution

1. Step 1: Match column order with requirements

   The first column must be fixed width 100, second flexible, third adaptive minimum 80.

2. Step 2: Check each GridItem in options

   [GridItem(.fixed(100)), GridItem(.flexible()), GridItem(.adaptive(minimum: 80))] matches order: fixed(100), flexible(), adaptive(minimum: 80).

3. Final Answer:

   [GridItem(.fixed(100)), GridItem(.flexible()), GridItem(.adaptive(minimum: 80))] -> Option C

4. Quick Check:

   Order and types must match requirements [OK]

Hint: Order of GridItems matches column order [OK]

Common Mistakes:

• Mixing order of GridItems
• Using wrong GridItem types
• Confusing adaptive with flexible