LazyVStack and LazyHStack in iOS Swift - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a vertical stack that loads views lazily.

iOS Swift

var body: some View {
  [1] {
    Text("Item 1")
    Text("Item 2")
  }
}

Drag options to blanks, or click blank then click option'

AVStack

BHStack

CLazyVStack

DLazyHStack

Attempts:

3 left

💡 Hint

Common Mistakes

Using VStack instead of LazyVStack causes all views to load immediately.

Using HStack or LazyHStack creates a horizontal stack, not vertical.

LazyVStack creates a vertical stack that loads its child views only when needed, improving performance for long lists.

2fill in blank

medium

Complete the code to create a horizontal stack that loads views lazily.

iOS Swift

var body: some View {
  [1] {
    Text("Item A")
    Text("Item B")
  }
}

Drag options to blanks, or click blank then click option'

AVStack

BLazyVStack

CHStack

DLazyHStack

Attempts:

3 left

💡 Hint

Common Mistakes

Using HStack instead of LazyHStack causes all views to load immediately.

Using VStack or LazyVStack creates vertical stacks, not horizontal.

LazyHStack creates a horizontal stack that loads child views lazily, which is useful for long horizontal lists.

3fill in blank

hard

Fix the error in the code to use a lazy vertical stack with a ForEach loop.

iOS Swift

var body: some View {
  LazyVStack {
    ForEach(0..<5) { [1] in
      Text("Item \([1])")
    }
  }
}

Drag options to blanks, or click blank then click option'

Aitem

Bi

Cindex

Dvalue

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name that conflicts with other code.

Leaving the variable name blank causes syntax errors.

The variable name in ForEach can be any valid identifier. Here, 'i' is commonly used for indexes.

4fill in blank

hard

Fill both blanks to create a LazyHStack with spacing and alignment.

iOS Swift

LazyHStack(alignment: [1], spacing: [2]) {
  Text("A")
  Text("B")
}

Drag options to blanks, or click blank then click option'

A.center

B10

C.top

D5

Attempts:

3 left

💡 Hint

Common Mistakes

Using spacing as a string instead of a number.

Using invalid alignment values.

Alignment '.top' aligns views at the top. Spacing '10' adds space between views.

5fill in blank

hard

Fill all three blanks to create a LazyVStack with pinned views and spacing.

iOS Swift

LazyVStack(pinnedViews: [1], spacing: [2]) {
  Section(header: Text("Header")) {
    Text("Content")
  }
  Text("Footer")
  .padding([3])
}

Drag options to blanks, or click blank then click option'

A.sectionHeaders

B20

C.all

D10

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect pinnedViews values.

Confusing spacing and padding values.

Using '.sectionHeaders' pins section headers. Spacing '10' adds space between views. Padding '.all' adds padding on all sides.