Alignment and spacing in iOS Swift - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to center the text inside the VStack.

iOS Swift

VStack {
    Text("Hello, SwiftUI!")
        .frame(maxWidth: .infinity, alignment: [1])
}

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

A.leading

B.center

C.trailing

D.top

Attempts:

3 left

💡 Hint

Common Mistakes

Using .leading or .trailing which aligns text to the sides instead of center.

Using .top which is a vertical alignment, not horizontal.

Using .center aligns the text horizontally in the center of the available space.

2fill in blank

medium

Complete the code to add horizontal spacing of 20 points between elements in the HStack.

iOS Swift

HStack(spacing: [1]) {
    Text("One")
    Text("Two")
    Text("Three")
}

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

A10

B30

C20

D0

Attempts:

3 left

💡 Hint

Common Mistakes

Using zero spacing which removes space between elements.

Using too large spacing which might push elements off screen.

Setting spacing: 20 adds 20 points of space between each element horizontally.

3fill in blank

hard

Fix the error in the code to add vertical padding of 15 points to the Text view.

iOS Swift

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

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

A.vertical

B.horizontal

C.all

D.leading

Attempts:

3 left

💡 Hint

Common Mistakes

Using .horizontal which adds padding left and right instead.

Using .leading which adds padding only on the left side.

Using .vertical adds padding only to top and bottom (vertical direction).

4fill in blank

hard

Fill both blanks to create a VStack with spacing 10 and align its content to the leading edge.

iOS Swift

VStack(spacing: [1], alignment: [2]) {
    Text("Item 1")
    Text("Item 2")
}

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

A10

B.center

C.leading

D20

Attempts:

3 left

💡 Hint

Common Mistakes

Using .center alignment which centers content instead of left aligning.

Using spacing 20 which is larger than requested.

Spacing 10 adds space between items vertically. Alignment .leading aligns content to the left.

5fill in blank

hard

Fill all three blanks to create a Text view with padding 12, background color blue, and corner radius 8.

iOS Swift

Text("Button")
    .padding([1])
    .background(Color.[2])
    .clipShape(RoundedRectangle(cornerRadius: [3]))

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

A12

Bblue

C8

D10

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong padding value like 10 instead of 12.

Using a color name that does not exist.

Using corner radius too large or too small.

Padding 12 adds space inside the Text. Background color blue colors behind the text. Corner radius 8 rounds the corners.