Alignment and spacing in iOS Swift - UI Render Trace

Component - Alignment and spacing

This UI component demonstrates how to align and space views inside a vertical stack on iOS using SwiftUI. It shows text and buttons arranged with specific alignment and spacing to create a clean, readable layout.

Widget Tree

VStack
├── Text (Title)
├── Text (Subtitle)
└── HStack
    ├── Button (Accept)
    └── Button (Decline)

The root is a vertical stack (VStack) that arranges its children vertically. Inside it, two Text views show a title and subtitle aligned to the leading edge. Below them, a horizontal stack (HStack) holds two buttons side by side with spacing between them.

Render Trace - 6 Steps

Step 1: VStack

Step 2: Text (Title)

Step 3: Text (Subtitle)

Step 4: HStack

Step 5: Button (Accept)

Step 6: Button (Decline)

State Change - Re-render

Trigger:User taps the 'Accept' button

Before

No selection made

→

After

Selection state updated to 'Accepted'

Re-renders:The entire VStack re-renders to reflect the selection state change, possibly updating button styles or showing confirmation text.

UI Quiz - 3 Questions

What does the VStack's alignment property control in this layout?

A The vertical spacing between child views

B The horizontal alignment of all child views inside the VStack

C The background color of the VStack

D The font size of the Text views

Key Insight

Using stacks with alignment and spacing properties helps create clean, organized layouts that adapt well to different screen sizes. Aligning text and buttons consistently improves readability and user experience.