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.