Spacer and padding in iOS Swift - UI Render Trace

Component - Spacer and padding

This UI component demonstrates how to use Spacer and padding in SwiftUI to control space and layout. Spacer pushes views apart, while padding adds space inside or around views.

Widget Tree

VStack
├── Text("Hello, Spacer and Padding!")
├── Spacer()
└── Button("Tap Me")

A vertical stack (VStack) contains a Text at the top, a Spacer in the middle that pushes content apart, and a Button at the bottom. Padding is applied to the VStack to add space around all content.

Render Trace - 4 Steps

Step 1: VStack

Step 2: Text

Step 3: Spacer

Step 4: Button

State Change - Re-render

Trigger:User taps the Button

Before

No change in layout or spacing

→

After

No change in layout or spacing (button tap does not affect Spacer or padding)

Re-renders:No UI re-render related to layout; only button action triggers separately

UI Quiz - 3 Questions

What does the Spacer do in this layout?

A Changes the font size of the Text

B Pushes the Button to the bottom by filling space

C Adds padding around the Text

D Adds a border around the VStack

Key Insight

Using Spacer in SwiftUI lets you create flexible empty space that pushes views apart, while padding adds fixed space around or inside views. Together, they help create clean, balanced layouts that adapt well to different screen sizes.