VStack, HStack, ZStack in iOS Swift - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a vertical stack of two Text views.

iOS Swift

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

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

AText

BVStack

CHStack

DZStack

Attempts:

3 left

💡 Hint

Common Mistakes

Using HStack or ZStack instead of Text inside VStack.

Forgetting to use Text for the second label.

The VStack arranges views vertically. To add a second text, use Text again.

2fill in blank

medium

Complete the code to create a horizontal stack with two Text views.

iOS Swift

HStack {
    Text("Left")
    [1]("Right")
}

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

AVStack

BZStack

CText

DSpacer

Attempts:

3 left

💡 Hint

Common Mistakes

Using VStack or ZStack inside HStack incorrectly.

Using Spacer instead of Text for the second label.

Inside an HStack, each child is a view. To add text, use Text.

3fill in blank

hard

Fix the error in the code to overlay two Text views using ZStack.

iOS Swift

ZStack {
    Text("Back")
    [1]("Front")
}

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

AText

BSpacer

CVStack

DHStack

Attempts:

3 left

💡 Hint

Common Mistakes

Using HStack or VStack inside ZStack incorrectly.

Using Spacer instead of Text.

ZStack overlays views. To add the front text, use Text.

4fill in blank

hard

Fill both blanks to create a VStack containing an HStack and a ZStack.

iOS Swift

VStack {
    [1] {
        Text("Left")
        Text("Right")
    }
    [2] {
        Text("Bottom")
        Text("Top")
    }
}

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

AHStack

BVStack

CZStack

DSpacer

Attempts:

3 left

💡 Hint

Common Mistakes

Using VStack instead of HStack or ZStack inside VStack.

Using Spacer instead of stack views.

The VStack contains an HStack for horizontal layout and a ZStack for overlay.

5fill in blank

hard

Fill the blanks to create a ZStack with a VStack and an HStack inside.

iOS Swift

ZStack {
    [1] {
        Text("Top")
        Text("Bottom")
    }
    [2] {
        Text("Left")
        Text("Right")
    }
    Text("Center")
}

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

AVStack

BHStack

CZStack

DSpacer

Attempts:

3 left

💡 Hint

Common Mistakes

Using ZStack inside ZStack unnecessarily.

Confusing the order of VStack and HStack.

The ZStack overlays a VStack, an HStack, and a centered Text.