ViewBuilder for custom containers in iOS Swift

Introduction

ViewBuilder helps you create custom containers that can hold many views easily. It makes your code cleaner and more flexible.

When you want to group several views inside a custom container.

When you want to build reusable UI components that accept multiple child views.

When you want to simplify complex layouts by breaking them into smaller parts.

When you want to pass multiple views as parameters to a function or initializer.

Syntax

iOS Swift

@ViewBuilder content: () -> some View

The @ViewBuilder attribute allows you to write multiple views inside a closure without wrapping them in a container manually.

It automatically combines the views into a single view group.

Examples

A custom container that stacks its child views vertically using VStack.

iOS Swift

struct MyContainer<Content: View>: View {
  let content: Content

  init(@ViewBuilder content: () -> Content) {
    self.content = content()
  }

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

Using the custom container with two Text views inside.

iOS Swift

MyContainer {
  Text("Hello")
  Text("World")
}

A card style container that adds padding, background, and rounded corners to its child views.

iOS Swift

struct Card<Content: View>: View {
  let content: Content

  init(@ViewBuilder content: () -> Content) {
    self.content = content()
  }

  var body: some View {
    content
      .padding()
      .background(Color.gray.opacity(0.2))
      .cornerRadius(10)
  }
}

Sample App

This example shows a custom container called MyContainer that uses @ViewBuilder to accept multiple child views. It stacks them vertically with spacing and adds a blue border around them. Inside the container, we put a title, a subtitle, and a button.

iOS Swift

import SwiftUI

struct MyContainer<Content: View>: View {
  let content: Content

  init(@ViewBuilder content: () -> Content) {
    self.content = content()
  }

  var body: some View {
    VStack(spacing: 10) {
      content
    }
    .padding()
    .border(Color.blue, width: 2)
  }
}

struct ContentView: View {
  var body: some View {
    MyContainer {
      Text("Hello")
        .font(.title)
      Text("This is inside a custom container.")
        .foregroundColor(.gray)
      Button("Tap me") {
        print("Button tapped")
      }
      .buttonStyle(.borderedProminent)
    }
    .padding()
  }
}

@main
struct MyApp: App {
  var body: some Scene {
    WindowGroup {
      ContentView()
    }
  }
}

Important Notes

Use @ViewBuilder only on closures that return views.

It helps avoid manually wrapping views in containers like VStack or HStack.

Remember to specify the generic Content: View type when creating custom containers.

Summary

ViewBuilder lets you create flexible containers that hold multiple views.

It simplifies writing child views inside closures without extra wrappers.

Custom containers with @ViewBuilder make your UI code cleaner and reusable.

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