[Solved] You want to create a vertical layout with three Text views ... VStack { Text("Top") Spacer() Text("Middle") Spacer() Text("Bottom") }.padding(30) What is the effect of the .padding(30) modifier here? | iOS Swift

iOS Swift - SwiftUI Basics

You want to create a vertical layout with three Text views spaced evenly in the screen height. Which SwiftUI code achieves this using Spacer and padding?

VStack {
  Text("Top")
  Spacer()
  Text("Middle")
  Spacer()
  Text("Bottom")
}.padding(30)

What is the effect of the .padding(30) modifier here?

AIt adds 30 points of space around the entire VStack, shrinking the available space for Spacer.

BIt adds 30 points of space only between the Text views.

CIt increases the size of Spacer by 30 points each.

DIt has no effect because Spacer controls spacing.

Step-by-Step Solution

Solution:

Step 1: Understand VStack with Spacer
Spacers divide available space evenly between Text views inside VStack.
Step 2: Analyze padding effect
Padding(30) adds fixed space around VStack edges, reducing total space available for Spacer to expand.
Final Answer:
It adds 30 points of space around the entire VStack, shrinking the available space for Spacer. -> Option A
Quick Check:
Padding adds fixed outer space, Spacer fills remaining space [OK]

Quick Trick: Padding shrinks space outside, Spacer fills inside [OK]

Common Mistakes:

Thinking padding adds space between views
Assuming padding affects Spacer size directly
Ignoring padding effect on layout edges

Master "SwiftUI Basics" in iOS Swift

9 interactive learning modes - each teaches the same concept differently

Learn Why Deep UI Try Challenge Build Recall Publish

More iOS Swift Quizzes

You want to create a vertical layout with three Text views spaced evenly in the screen height. Which SwiftUI code achieves this using Spacer and padding?

Step 1: Understand VStack with Spacer

Step 2: Analyze padding effect

Final Answer:

Quick Check:

Want More Practice?