ViewBuilder for custom containers in iOS Swift - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What is the output of this SwiftUI custom container?

Consider this SwiftUI custom container using @ViewBuilder. What will be displayed when the ContentView is rendered?

iOS Swift

struct CustomStack<Content: View>: View {
  let content: () -> Content
  init(@ViewBuilder content: @escaping () -> Content) {
    self.content = content
  }
  var body: some View {
    VStack {
      Text("Header")
      content()
      Text("Footer")
    }
  }
}

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

A A horizontal stack showing: Header, Hello, World, Footer

B A vertical stack showing: Hello, World only

C A vertical stack showing: Header, Footer only

D A vertical stack showing: Header, Hello, World, Footer

💡 Hint

Remember that the content closure is inserted inside the VStack between Header and Footer.

The CustomStack uses a VStack with Text("Header"), then the content closure, then Text("Footer"). The content closure includes two Text views: "Hello" and "World". So the final vertical stack shows Header, Hello, World, Footer in order.

📝 Syntax

intermediate

Which option correctly defines a SwiftUI custom container with @ViewBuilder?

You want to create a custom container that accepts multiple child views using @ViewBuilder. Which code snippet is correct?

A

struct MyContainer<Content: View>: View {
  let content: () -> Content
  init(@ViewBuilder content: @escaping () -> Content) {
    self.content = content
  }
  var body: some View {
    VStack { content() }
  }
}

B

struct MyContainer<Content: View>: View {
  let content: Content
  init(@ViewBuilder content: Content) {
    self.content = content
  }
  var body: some View {
    VStack { content }
  }
}

C

struct MyContainer: View {
  let content: () -> View
  init(@ViewBuilder content: @escaping () -> View) {
    self.content = content
  }
  var body: some View {
    VStack { content() }
  }
}

D

struct MyContainer<Content>: View {
  let content: () -> Content
  init(content: @ViewBuilder () -> Content) {
    self.content = content
  }
  var body: some View {
    VStack { content() }
  }
}

💡 Hint

Look for the correct generic constraint and @escaping closure syntax.

Option A correctly uses a generic Content constrained to View, a @ViewBuilder closure marked @escaping, and calls content() inside the VStack. Option A incorrectly uses Content directly without closure. Option A uses 'View' protocol type directly which is not allowed. Option A misses @escaping on the closure parameter.

❓ lifecycle

advanced

How does @ViewBuilder affect the lifecycle of child views in a custom container?

In SwiftUI, when you use @ViewBuilder in a custom container, how does it influence the creation and update of child views?

A @ViewBuilder allows multiple child views to be combined into a single View, and SwiftUI manages their lifecycle as a group.

B @ViewBuilder forces all child views to be recreated every time the container updates, ignoring state changes.

C @ViewBuilder converts child views into UIKit views immediately, bypassing SwiftUI's lifecycle.

D @ViewBuilder disables SwiftUI's view diffing, causing all child views to reload on every render.

💡 Hint

Think about how SwiftUI composes multiple views into one view tree.

@ViewBuilder lets you write multiple child views inside a closure, which SwiftUI combines into a single View type. SwiftUI then manages their lifecycle efficiently, updating only what changes.

❓ navigation

advanced

What happens if you use @ViewBuilder with conditional views inside a custom container?

Given a custom container using @ViewBuilder, what is the effect of including an if-else condition inside the content closure?

iOS Swift

struct ConditionalContainer<Content: View>: View {
  let content: () -> Content
  init(@ViewBuilder content: @escaping () -> Content) {
    self.content = content
  }
  var body: some View {
    VStack { content() }
  }
}

struct ContentView: View {
  @State private var showText = true
  var body: some View {
    ConditionalContainer {
      if showText {
        Text("Visible")
      } else {
        Text("Hidden")
      }
    }
  }
}

A The container will always show both texts "Visible" and "Hidden" stacked vertically.

B The container will crash because @ViewBuilder cannot handle if-else conditions.

C The container will show either "Visible" or "Hidden" text depending on showText state, updating automatically.

D The container will ignore the condition and show no text.

💡 Hint

Remember @ViewBuilder supports conditional view building.

@ViewBuilder supports if-else conditions to build different views dynamically. SwiftUI updates the view when the state changes, showing the correct text.

🔧 Debug

expert

Why does this custom container cause a compile error?

Examine this SwiftUI custom container code. Why does it fail to compile?

iOS Swift

struct BrokenContainer<Content: View>: View {
  let content: Content
  init(@ViewBuilder content: () -> Content) {
    self.content = content()
  }
  var body: some View {
    VStack {
      content
    }
  }
}

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

A Because @ViewBuilder cannot be used in initializers.

B Because Content is a single View, but the closure returns multiple views, causing a type mismatch.

C Because content() is called without @escaping, causing a runtime error.

D Because VStack cannot contain a variable named content.

💡 Hint

Think about what type the closure returns and what Content expects.

The closure returns multiple views combined by @ViewBuilder as a TupleView, but Content is a single View type. Assigning multiple views to a single Content variable causes a type mismatch and compile error.

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