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.