ViewBuilder for custom containers in iOS Swift - Mini App: Build & Ship

Build: CustomContainerView

A screen that shows how to create a custom container view using @ViewBuilder to arrange multiple child views vertically with padding and background color.

Target UI

-------------------------
| Custom Container View |
|-----------------------|
| [ Child View 1 ]      |
| [ Child View 2 ]      |
| [ Child View 3 ]      |
|                       |
-------------------------

Create a custom container view named CustomContainer that accepts multiple child views using @ViewBuilder.

Arrange the child views vertically with spacing of 10 points.

Add padding of 20 points around the container.

Set a light gray background color with rounded corners.

Use the CustomContainer in the main view to display three Text views: "Child View 1", "Child View 2", and "Child View 3".

Starter Code

iOS Swift

import SwiftUI

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

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

    var body: some View {
        // TODO: Arrange child views vertically with spacing, padding, background, and corner radius
    }
}

struct ContentView: View {
    var body: some View {
        CustomContainer {
            Text("Child View 1")
            Text("Child View 2")
            Text("Child View 3")
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Task 1

Task 2

Task 3

Solution

iOS Swift

import SwiftUI

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

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

    var body: some View {
        VStack(spacing: 10) {
            content
        }
        .padding(20)
        .background(Color(white: 0.9))
        .cornerRadius(10)
    }
}

struct ContentView: View {
    var body: some View {
        CustomContainer {
            Text("Child View 1")
            Text("Child View 2")
            Text("Child View 3")
        }
        .padding() // Add some outer padding for better layout
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

We created a generic CustomContainer struct that accepts multiple child views using the @ViewBuilder attribute in its initializer. This allows us to pass several views inside the container easily.

Inside the body, we use a VStack with spacing 10 to arrange the child views vertically with space between them. We add padding of 20 points around the stack to give some breathing room.

The background color is set to a light gray using Color(white: 0.9), and corners are rounded with a radius of 10 points to make the container visually distinct.

Finally, in ContentView, we use CustomContainer to display three text views labeled "Child View 1", "Child View 2", and "Child View 3".

Final Result

Completed Screen

-------------------------
| Custom Container View |
|-----------------------|
| Child View 1          |
|                       |
| Child View 2          |
|                       |
| Child View 3          |
|                       |
-------------------------

The screen shows three text views stacked vertically inside a light gray rounded rectangle container.

No interactive elements; this is a static layout demonstration.

Stretch Goal

Add a tap gesture to each child view that changes its text color to blue when tapped.

💡 Hint

Use a @State variable inside ContentView to track which child is selected and update the Text view's foregroundColor accordingly.

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