ViewBuilder for custom containers in iOS Swift - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a custom container view using @ViewBuilder.

iOS Swift

struct CustomContainer<Content: View>: View {
  let content: () -> Content

  var body: some View {
    VStack {
      [1]
    }
  }
}

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

Acontent

Bcontent()

CContent

DContent()

Attempts:

3 left

💡 Hint

Common Mistakes

Using the closure name without parentheses, which does not render the content.

Trying to instantiate the Content type instead of calling the closure.

The content closure must be called with parentheses to render the child views inside the VStack.

2fill in blank

medium

Complete the initializer to accept a @ViewBuilder closure for the content.

iOS Swift

struct CustomContainer<Content: View>: View {
  let content: () -> Content

  init(@ViewBuilder content: @escaping () -> Content) {
    self.[1] = content
  }

  var body: some View {
    VStack {
      content()
    }
  }
}

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

Acontent

BContent

Cbody

Dview

Attempts:

3 left

💡 Hint

Common Mistakes

Using the type name instead of the property name.

Forgetting to use self. to refer to the property.

The initializer assigns the passed closure to the stored property named content.

3fill in blank

hard

Fix the error in the body by correctly using the @ViewBuilder content closure.

iOS Swift

var body: some View {
  HStack {
    [1]
  }
}

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

Acontent.self

Bcontent

CContent()

Dcontent()

Attempts:

3 left

💡 Hint

Common Mistakes

Using the closure name without parentheses.

Trying to instantiate the Content type.

The content closure must be called with parentheses to produce the views inside the HStack.

4fill in blank

hard

Fill both blanks to define a custom container that stacks views vertically and accepts multiple child views.

iOS Swift

struct VerticalStack<Content: View>: View {
  let content: () -> Content

  init(@ViewBuilder content: @escaping () -> Content) {
    self.[1] = content
  }

  var body: some View {
    [2] {
      content()
    }
  }
}

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

Acontent

Bbody

CVStack

DHStack

Attempts:

3 left

💡 Hint

Common Mistakes

Using HStack instead of VStack for vertical stacking.

Using the wrong property name in the initializer.

The property content stores the closure, and VStack stacks the child views vertically.

5fill in blank

hard

Fill all three blanks to create a custom container that arranges child views horizontally with spacing.

iOS Swift

struct HorizontalStack<Content: View>: View {
  let content: () -> Content
  let spacing: CGFloat

  init(spacing: CGFloat = 10, @ViewBuilder content: @escaping () -> Content) {
    self.[1] = content
    self.[2] = spacing
  }

  var body: some View {
    [3](spacing: spacing) {
      content()
    }
  }
}

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

Acontent

Bspacing

CHStack

DVStack

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up VStack and HStack.

Forgetting to assign spacing in the initializer.

The initializer assigns content and spacing properties, and the body uses HStack with spacing to arrange views horizontally.

Practice

1. What is the main purpose of using @ViewBuilder in SwiftUI custom containers?

easy

A. To store data persistently on the device

B. To create animations automatically for views

C. To allow multiple child views inside a closure without extra wrappers

D. To handle network requests in the UI

Solution

1. Step 1: Understand what @ViewBuilder does

   @ViewBuilder lets you write multiple views inside a closure without needing to wrap them in a container like VStack.

2. Step 2: Identify the purpose in custom containers

   It simplifies building flexible UI containers that can hold many child views easily.

3. Final Answer:

   To allow multiple child views inside a closure without extra wrappers -> Option C

4. Quick Check:

   @ViewBuilder = multiple child views [OK]

Hint: Remember: ViewBuilder groups views without extra containers [OK]

Common Mistakes:

• Thinking it handles animations
• Confusing it with data storage
• Assuming it manages network calls

2. Which of the following is the correct way to declare a custom container using @ViewBuilder in SwiftUI?

easy

A. func MyContainer(@ViewBuilder content: () -> some View) -> some View { content() }

B. func MyContainer(content: View) -> some View { content }

C. func MyContainer(@ViewBuilder content: View) -> View { content }

D. func MyContainer(content: () -> View) -> View { content() }

Solution

1. Step 1: Check the correct syntax for @ViewBuilder parameter

   The parameter must be a closure returning some View and marked with @ViewBuilder.

2. Step 2: Verify the return type and usage

   The function returns some View and calls the closure with content().

3. Final Answer:

   func MyContainer(@ViewBuilder content: () -> some View) -> some View { content() } -> Option A

4. Quick Check:

   Correct syntax = func MyContainer(@ViewBuilder content: () -> some View) -> some View { content() } [OK]

Hint: Look for @ViewBuilder on closure returning some View [OK]

Common Mistakes:

• Using View instead of some View
• Missing @ViewBuilder attribute
• Wrong return type in function

3. Given this custom container code, what will be the output UI?

struct MyStack: View {
  let content: () -> some View
  var body: some View {
    VStack {
      content()
    }
  }
}

struct ContentView: View {
  var body: some View {
    MyStack {
      Text("Hello")
      Text("World")
    }
  }
}

medium

A. Two texts stacked vertically: "Hello" above "World"

B. A compile-time error because multiple views are not allowed

C. A single text showing "Hello World" concatenated

D. Only the first text "Hello" is shown

Solution

1. Step 1: Analyze the content closure type

   The content closure returns some View but is not marked with @ViewBuilder, so it cannot return multiple views.

2. Step 2: Understand the effect on multiple child views

   Passing two Text views without @ViewBuilder causes a compile-time error because the closure expects a single view.

3. Final Answer:

   A compile-time error because multiple views are not allowed -> Option B

4. Quick Check:

   Missing @ViewBuilder causes error with multiple views [OK]

Hint: Multiple views need @ViewBuilder or container like VStack [OK]

Common Mistakes:

• Assuming multiple views work without @ViewBuilder
• Thinking texts concatenate automatically
• Ignoring closure return type rules

4. Identify the error in this custom container code and how to fix it:

struct CustomContainer: View {
  let content: () -> some View
  var body: some View {
    HStack {
      content()
    }
  }
}

// Usage
CustomContainer {
  Text("One")
  Text("Two")
}

medium

A. CustomContainer must be a function, not a struct

B. HStack cannot contain content(); replace with VStack

C. Content closure must return Text, not some View

D. Missing @ViewBuilder on content parameter; add @ViewBuilder to fix

Solution

1. Step 1: Check the content closure declaration

   The content closure is declared as () -> some View without @ViewBuilder, so it cannot accept multiple views.

2. Step 2: Fix by adding @ViewBuilder

   Adding @ViewBuilder before the content parameter allows multiple child views inside the closure.

3. Final Answer:

   Missing @ViewBuilder on content parameter; add @ViewBuilder to fix -> Option D

4. Quick Check:

   Use @ViewBuilder to accept multiple views [OK]

Hint: Add @ViewBuilder to closure parameters for multiple views [OK]

Common Mistakes:

• Changing container type instead of fixing closure
• Misunderstanding closure return types
• Trying to convert struct to function unnecessarily

5. You want to create a custom container that stacks views vertically and adds a red border around them. Which code correctly uses @ViewBuilder to achieve this?

hard

A. struct RedBorderStack: View {
let content: Content
init(@ViewBuilder content: () -> Content) {
self.content = content()
}
var body: some View {
VStack {
content
}
.border(Color.red)
}
}

B. struct RedBorderStack: View {
let content: () -> some View
var body: some View {
VStack {
content()
}
.border(Color.red)
}
}

C. struct RedBorderStack: View {
@ViewBuilder let content: () -> some View
var body: some View {
VStack {
content()
}
.border(Color.red)
}
}

D. struct RedBorderStack: View {
let content: () -> Content
var body: some View {
VStack {
content()
}
.border(Color.red)
}
}

Solution

1. Step 1: Use generic Content type with @ViewBuilder

   To accept multiple views, declare a generic Content: View and mark the init parameter with @ViewBuilder.

2. Step 2: Build the body with VStack and add border

   Wrap content inside VStack and apply .border(Color.red) modifier to the stack.

3. Final Answer:

   struct RedBorderStack<Content: View>: View { let content: Content init(@ViewBuilder content: () -> Content) { self.content = content() } var body: some View { VStack { content } .border(Color.red) } } -> Option A

4. Quick Check:

   Generic + @ViewBuilder in init + VStack { content } + border [OK]

Hint: Use generic Content and @ViewBuilder for flexible containers [OK]

Common Mistakes:

• Omitting generic Content type
• Not using @ViewBuilder for multiple views
• Placing border on content() instead of VStack