LazyVStack and LazyHStack in iOS Swift - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What is the visible output of this SwiftUI code?

Consider this SwiftUI view using LazyVStack inside a ScrollView. What will the user see when the app runs?

iOS Swift

struct ContentView: View {
  var body: some View {
    ScrollView {
      LazyVStack {
        ForEach(1...3, id: \.self) { i in
          Text("Item \(i)")
            .frame(height: 50)
            .background(i % 2 == 0 ? Color.blue : Color.green)
        }
      }
    }
  }
}

A An empty view because LazyVStack requires a fixed height.

B A vertical list of three items: Item 1 (green), Item 2 (blue), Item 3 (green), each 50 points tall.

C A vertical list of three items all colored blue.

D A horizontal list of three items with alternating colors.

💡 Hint

LazyVStack arranges views vertically and loads them lazily inside a ScrollView.

LazyVStack creates a vertical stack that loads views only when needed. The ForEach creates three Text views with alternating background colors based on the item number.

❓ ui_behavior

intermediate

What happens if you replace LazyVStack with VStack in this code?

Given the same code as before but replacing LazyVStack with VStack inside ScrollView, what is the main difference in app behavior?

iOS Swift

struct ContentView: View {
  var body: some View {
    ScrollView {
      VStack {
        ForEach(1...1000, id: \.self) { i in
          Text("Item \(i)")
            .frame(height: 50)
        }
      }
    }
  }
}

A The app will load all 1000 items at once, which may cause slow performance or memory issues.

B The app will load items lazily as the user scrolls, improving performance.

C The app will crash because VStack cannot be inside ScrollView.

D The app will display only the first 10 items and ignore the rest.

💡 Hint

VStack creates all its child views immediately, unlike LazyVStack.

VStack renders all its children at once, so 1000 Text views are created immediately, which can slow down or crash the app. LazyVStack avoids this by creating views only when needed.

❓ lifecycle

advanced

Which statement about LazyHStack's view loading is true?

In SwiftUI, how does LazyHStack manage the creation of its child views compared to HStack?

A LazyHStack creates child views only when they are about to appear on screen, improving performance for large data sets.

B LazyHStack creates all child views immediately when the view appears.

C LazyHStack never creates any child views until the user taps on them.

D LazyHStack creates child views randomly, not in order.

💡 Hint

Think about how lazy loading helps with performance in scrollable horizontal stacks.

LazyHStack delays creating child views until they are needed for display, unlike HStack which creates all children immediately. This lazy loading improves performance with many items.

📝 Syntax

advanced

What error does this LazyVStack code produce?

Identify the error in this SwiftUI code snippet:

iOS Swift

ScrollView {
  LazyVStack {
    ForEach(0..<5) { i in
      Text("Item \(i)")
    }
  }
}

A Error: LazyVStack requires a fixed frame height.

B Error: Missing id parameter in ForEach causing a compiler error.

C Error: Text views inside LazyVStack must have unique tags.

D No error; the code compiles and runs correctly.

💡 Hint

ForEach with a range automatically provides an id.

ForEach over a range like 0..<5 automatically uses the integer as the id, so no explicit id is needed. LazyVStack does not require fixed height or tags on Text views.

🔧 Debug

expert

Why does this LazyHStack not scroll horizontally?

This SwiftUI code uses LazyHStack inside a ScrollView but the items do not scroll horizontally. What is the cause?

iOS Swift

ScrollView {
  LazyHStack {
    ForEach(0..<10) { i in
      Text("Item \(i)")
        .frame(width: 100, height: 50)
        .background(Color.orange)
    }
  }
}

A Text views inside LazyHStack cannot have background colors.

B LazyHStack requires a fixed height to enable scrolling.

C The ScrollView defaults to vertical scrolling; horizontal axis must be specified explicitly.

D ForEach must have an explicit id for horizontal scrolling to work.

💡 Hint

Check the ScrollView initializer for axis direction.

By default, ScrollView scrolls vertically. To scroll horizontally, you must specify ScrollView(.horizontal). Without this, the LazyHStack content will not scroll horizontally.