ViewBuilder for custom containers in iOS Swift - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a @ViewBuilder in SwiftUI?

A @ViewBuilder is a special attribute that lets you create custom container views by combining multiple child views into one. It helps build complex UI layouts by grouping views together.

beginner

How does @ViewBuilder help when creating custom containers?

It allows you to write multiple views inside a closure without needing to wrap them manually. SwiftUI then combines these views into a single view group automatically.

intermediate

What is the benefit of using a custom container with @ViewBuilder over a simple VStack or HStack?

Custom containers let you create reusable layouts with your own rules and styles, making your UI code cleaner and easier to manage.

intermediate

In SwiftUI, what type does a function marked with @ViewBuilder return?

It returns some View, which means it returns a view or a group of views combined into one, but the exact type is hidden.

advanced

Can you use @ViewBuilder with functions that return more than 10 views?

No, @ViewBuilder supports up to 10 views inside the closure. For more views, you need to group them manually or use other containers.

What does the @ViewBuilder attribute do in SwiftUI?

A Manages data storage

B Creates a new window for the app

C Handles user input events

D Combines multiple views into one container automatically

The @ViewBuilder attribute allows you to write multiple views inside a closure and SwiftUI combines them into a single view container.

Which keyword is used to mark a function that builds multiple views in SwiftUI?

A @ViewBuilder

B @State

C @Published

D @Environment

@ViewBuilder is the special attribute used to build multiple views inside a closure.

What is the return type of a function using @ViewBuilder?

A some View

B Void

C String

D Int

Functions with @ViewBuilder return some View, meaning a view or group of views.

Why create custom containers with @ViewBuilder instead of just using VStack or HStack?

A To handle network requests

B To create reusable and customized layouts

C To improve app performance drastically

D To store user preferences

Custom containers allow you to reuse layout logic and style your UI consistently.

What is a limitation of @ViewBuilder regarding the number of views?

A Supports unlimited views

B Supports only 2 views

C Supports up to 10 views inside the closure

D Supports only 5 views

@ViewBuilder supports up to 10 views inside its closure. More views require manual grouping.

Explain how @ViewBuilder helps in creating custom container views in SwiftUI.

Think about how you can group views without extra wrappers.

Describe a scenario where you would use a custom container with @ViewBuilder instead of VStack or HStack.

Imagine making a special card or panel used many times.

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