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.