Spacer and padding in iOS Swift - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

How does Spacer affect layout in SwiftUI?

Consider a horizontal stack with two Text views and a Spacer between them. What will be the visual result?

iOS Swift

HStack {
  Text("Left")
  Spacer()
  Text("Right")
}

A The texts will overlap each other in the middle of the screen.

B The texts "Left" and "Right" will be pushed to the edges of the screen with space between them.

C The texts will be stacked tightly together in the center with no space between.

D The texts will be aligned vertically instead of horizontally.

💡 Hint

Think about how Spacer expands to fill available space.

Spacer in SwiftUI expands to fill all available space in the stack's direction, pushing views apart to the edges.

❓ ui_behavior

intermediate

What effect does padding() have on a SwiftUI view?

Given a Text view with .padding() modifier, what changes visually?

iOS Swift

Text("Hello")
  .padding()

A The text disappears from the screen.

B The text color changes to gray.

C The text becomes bold and larger.

D The text gets extra space around it inside its container, increasing the tappable area.

💡 Hint

Padding adds space inside the view's boundary.

Padding adds empty space around the content inside the view's frame, making it larger and easier to interact with.

❓ lifecycle

advanced

What happens if you apply multiple padding modifiers in SwiftUI?

Consider this code: Text("Hello") .padding(10) .padding(5) What is the total padding around the text?

iOS Swift

Text("Hello")
  .padding(10)
  .padding(5)

A The total padding is 15 points on all sides.

B Only the last padding(5) is applied, so 5 points total.

C The padding values multiply, resulting in 50 points total.

D The padding values conflict and cause a runtime error.

💡 Hint

Modifiers stack and add up in SwiftUI.

Each padding modifier adds space around the view. They accumulate, so 10 + 5 = 15 points total padding.

📝 Syntax

advanced

Identify the syntax error in this SwiftUI padding code

What is wrong with this code snippet? VStack { Text("Hello") .padding(10 Spacer() }

iOS Swift

VStack {
  Text("Hello")
    .padding(10
  Spacer()
}

A Padding cannot take numeric arguments.

B Spacer cannot be used inside VStack.

C Missing closing parenthesis in .padding(10).

D Text must be inside a HStack, not VStack.

💡 Hint

Check the parentheses carefully.

The .padding(10 modifier is missing a closing parenthesis, causing a syntax error.

🧠 Conceptual

expert

Why use Spacer instead of fixed padding for flexible layouts?

Which reason best explains why Spacer is preferred over fixed padding values for spacing in SwiftUI layouts?

A Spacer automatically adjusts to fill available space, making layouts responsive to screen size changes.

B Spacer reduces app memory usage compared to padding.

C Spacer changes the font size of text automatically.

D Spacer disables user interaction on views.

💡 Hint

Think about how layouts adapt on different devices.

Spacer expands to fill available space dynamically, allowing flexible and adaptive layouts unlike fixed padding.

Practice

1. What does Spacer() do in a SwiftUI layout?

easy

A. It adds a border around the view.

B. It adds a fixed amount of space around a view.

C. It changes the color of the background.

D. It creates flexible empty space that expands to fill available space.

Solution

1. Step 1: Understand Spacer's role

   Spacer() is used to create flexible space that grows to fill available space inside stacks.

2. Step 2: Compare with padding

   Padding adds fixed space around views, but Spacer expands flexibly to push views apart.

3. Final Answer:

   It creates flexible empty space that expands to fill available space. -> Option D

4. Quick Check:

   Spacer = flexible space [OK]

Hint: Spacer expands space flexibly, padding adds fixed space [OK]

Common Mistakes:

• Confusing Spacer with padding
• Thinking Spacer adds fixed space
• Assuming Spacer changes colors

2. Which of the following is the correct way to add 20 points of padding around a Text view in SwiftUI?

easy

A. Text("Hello").padding(20)

B. Text("Hello").padding(EdgeInsets(top: 20, leading: 20, bottom: 20, trailing: 20))

C. All of the above

D. Text("Hello").padding(.all, 20)

Solution

1. Step 1: Review padding syntax

   SwiftUI allows padding with a simple number, with edges and length, or with EdgeInsets struct.

2. Step 2: Check each option

   Text("Hello").padding(20) uses padding(20) which adds 20 points all around.
   Text("Hello").padding(.all, 20) uses padding(.all, 20) which also adds 20 points all around.
   Text("Hello").padding(EdgeInsets(top: 20, leading: 20, bottom: 20, trailing: 20)) uses EdgeInsets with 20 points on all sides.
   All are valid ways.

3. Final Answer:

   All of the above -> Option C

4. Quick Check:

   Multiple padding syntaxes work [OK]

Hint: All padding methods shown add 20 points correctly [OK]

Common Mistakes:

• Using padding without parameters incorrectly
• Confusing padding edges syntax
• Missing EdgeInsets struct format

3. What will be the layout result of this SwiftUI code?

HStack {
  Text("Left")
  Spacer()
  Text("Right")
}

medium

A. Texts appear centered with space between them.

B. "Left" text on the left, "Right" text pushed to the right edge.

C. Both texts appear close together on the left side.

D. Texts overlap in the center.

Solution

1. Step 1: Understand HStack and Spacer

   HStack arranges views horizontally. Spacer expands to fill space between views.

2. Step 2: Analyze positions

   Text("Left") is placed first on the left.
   Spacer pushes remaining space.
   Text("Right") is pushed to the right edge.

3. Final Answer:

   "Left" text on the left, "Right" text pushed to the right edge. -> Option B

4. Quick Check:

   Spacer pushes views apart horizontally [OK]

Hint: Spacer in HStack pushes views to edges [OK]

Common Mistakes:

• Thinking Spacer centers views
• Assuming texts overlap
• Ignoring Spacer effect in HStack

4. Identify the error in this SwiftUI code snippet:

VStack {
  Text("Top")
  Spacer(10)
  Text("Bottom")
}

medium

A. Spacer cannot take a parameter; it has no initializer with arguments.

B. Text views must be inside a ScrollView.

C. VStack requires a frame modifier to work.

D. Spacer must be replaced with padding.

Solution

1. Step 1: Check Spacer usage

   Spacer() does not accept any parameters; it has no initializer that takes arguments.

2. Step 2: Validate other options

   Text views can be inside VStack without ScrollView.
   VStack works without frame.
   Spacer and padding serve different purposes.

3. Final Answer:

   Spacer cannot take a parameter; it has no initializer with arguments. -> Option A

4. Quick Check:

   Spacer() has no parameters [OK]

Hint: Spacer() never takes parameters [OK]

Common Mistakes:

• Trying to set Spacer size via parameters
• Confusing Spacer with padding
• Thinking VStack needs ScrollView always

5. 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?

hard

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

B. It adds 30 points of space only between the Text views.

C. It increases the size of Spacer by 30 points each.

D. It has no effect because Spacer controls spacing.

Solution

1. Step 1: Understand VStack with Spacer

   Spacers divide available space evenly between Text views inside VStack.

2. Step 2: Analyze padding effect

   Padding(30) adds fixed space around VStack edges, reducing total space available for Spacer to expand.

3. Final Answer:

   It adds 30 points of space around the entire VStack, shrinking the available space for Spacer. -> Option A

4. Quick Check:

   Padding adds fixed outer space, Spacer fills remaining space [OK]

Hint: 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