ViewBuilder for custom containers in iOS Swift - UI Render Trace

Component - ViewBuilder for custom containers

This SwiftUI component uses a @ViewBuilder to create a custom container that can hold multiple child views. It arranges these child views vertically inside a rounded rectangle with padding and a background color.

Widget Tree

CustomContainer
└── VStack
    ├── Child View 1
    ├── Child View 2
    └── ...

The root is the CustomContainer which uses a VStack to stack its child views vertically. Each child view is placed inside the VStack, which is then styled with padding, background color, and corner radius to form a rounded container.

Render Trace - 3 Steps

Step 1: CustomContainer

Step 2: VStack

Step 3: Child Views

State Change - Re-render

Trigger:No state change in this static container example

Before

Container with initial child views rendered

→

After

No change

Re-renders:None

UI Quiz - 3 Questions

What does the @ViewBuilder attribute allow in the CustomContainer?

A It automatically adds padding to the container

B It restricts the container to only one child view

C It allows multiple child views to be passed and combined inside the container

D It changes the background color of the container

Key Insight

Using @ViewBuilder in SwiftUI lets you create flexible custom containers that accept multiple child views. This approach helps build reusable UI components that can wrap any content with consistent styling and layout.

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