Why layout controls visual structure in iOS Swift - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a vertical stack layout in SwiftUI.

iOS Swift

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

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

A.background()

B.frame()

C.font()

D.padding()

Attempts:

3 left

💡 Hint

Common Mistakes

Using .background() instead of .padding() changes color, not spacing.

Using .frame() without parameters won't add space.

Using .font() changes text style, not layout.

The .padding() modifier adds space around the Text views, controlling the layout spacing.

2fill in blank

medium

Complete the code to align items to the leading edge in a VStack.

iOS Swift

VStack(alignment: [1]) { Text("Left") Text("Aligned") }

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

A"center"

B.top

C.leading

D.bottom

Attempts:

3 left

💡 Hint

Common Mistakes

Using "center" as a string is invalid here.

Using .top or .bottom aligns vertically, not horizontally.

Using .leading aligns the items to the left edge inside the vertical stack.

3fill in blank

hard

Fix the error in the code to make the VStack fill the parent width.

iOS Swift

VStack { Text("Fill width") }.frame(maxWidth: [1])

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

A.infinity

B"infinity"

Cinfinity

Dmax

Attempts:

3 left

💡 Hint

Common Mistakes

Using quotes makes it a string, which is invalid.

Using just 'infinity' without dot causes an error.

Using 'max' is not a valid value here.

The correct syntax uses .infinity without quotes to specify maximum width.

4fill in blank

hard

Fill both blanks to create a horizontal stack with spacing and center alignment.

iOS Swift

HStack(spacing: [1], alignment: [2]) { Text("A") Text("B") }

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

A20

B.center

C.leading

D10

Attempts:

3 left

💡 Hint

Common Mistakes

Using 20 for spacing is valid but not the expected answer here.

Using .leading aligns left, not center.

Spacing of 10 points and center alignment create balanced layout horizontally.

5fill in blank

hard

Fill all three blanks to create a VStack with padding, background color, and corner radius.

iOS Swift

VStack { Text("Styled") }.[1]().background(Color.[2]).clipShape(RoundedRectangle(cornerRadius: [3]))

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

Apadding

Bblue

C10

Dframe

Attempts:

3 left

💡 Hint

Common Mistakes

Using frame instead of padding changes size but not spacing.

Using a wrong color name causes error.

Using a string for corner radius instead of a number.

Adding padding, blue background, and corner radius 10 styles the VStack nicely.