Spacer and padding in iOS Swift - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add space between two Text views using Spacer.

iOS Swift

VStack {
  Text("Hello")
  [1]
  Text("World")
}

Drag options to blanks, or click blank then click option'

ASpacer

BPadding()

CDivider()

DSpacer()

Attempts:

3 left

💡 Hint

Common Mistakes

Using Padding() instead of Spacer()

Forgetting the parentheses after Spacer

Spacer() adds flexible space between views in SwiftUI.

2fill in blank

medium

Complete the code to add 20 points of padding around the Text view.

iOS Swift

Text("Welcome")
  .padding([1])

Drag options to blanks, or click blank then click option'

A10

B5

C20

D30

Attempts:

3 left

💡 Hint

Common Mistakes

Using 10 or 5 instead of 20

Forgetting to add parentheses after padding

Padding(20) adds 20 points of space around the view.

3fill in blank

hard

Fix the error in the code to add horizontal padding of 15 points.

iOS Swift

Text("SwiftUI")
  .padding(.[1], 15)

Drag options to blanks, or click blank then click option'

Aall

Bhorizontal

Cvertical

Dleading

Attempts:

3 left

💡 Hint

Common Mistakes

Using .vertical instead of .horizontal

Using .all which adds padding on all sides

Use .horizontal to add padding only on left and right sides.

4fill in blank

hard

Fill both blanks to create a VStack with two Text views separated by a Spacer and add 10 points padding to the VStack.

iOS Swift

VStack {
  Text("Top")
  [1]
  Text("Bottom")
}
.padding([2])

Drag options to blanks, or click blank then click option'

ASpacer()

B20

C10

DDivider()

Attempts:

3 left

💡 Hint

Common Mistakes

Using Divider() instead of Spacer()

Using 20 instead of 10 for padding

Spacer() adds flexible space between Text views; padding(10) adds 10 points around VStack.

5fill in blank

hard

Fill all three blanks to create an HStack with two Text views separated by a Spacer, add 5 points horizontal padding.

iOS Swift

HStack {
  Text("Left")
  [1]
  Text("Right")
}
.padding(.[2], [3])

Drag options to blanks, or click blank then click option'

ASpacer()

Bhorizontal

C5

Dvertical

Attempts:

3 left

💡 Hint

Common Mistakes

Using .vertical instead of .horizontal for padding

Using 15 instead of 5 for padding size

Using Divider() instead of Spacer()

Spacer() separates views; padding(.horizontal, 5) adds 5 points padding left and right.