VStack, HStack, ZStack in iOS Swift - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What is the layout result of this SwiftUI code?

Given the following SwiftUI code, what will be the order and position of the colored rectangles on the screen?

iOS Swift

import SwiftUI

struct ContentView: View {
  var body: some View {
    VStack {
      Rectangle().fill(Color.red).frame(width: 100, height: 50)
      Rectangle().fill(Color.green).frame(width: 100, height: 50)
      Rectangle().fill(Color.blue).frame(width: 100, height: 50)
    }
  }
}

A Three rectangles stacked vertically: red on top, green in middle, blue at bottom

B Three rectangles stacked horizontally: red on left, green in center, blue on right

C Three rectangles overlapping exactly on top of each other, red visible

D Three rectangles arranged diagonally from top-left to bottom-right

💡 Hint

VStack arranges views vertically in order.

VStack stacks views vertically in the order they are declared. So red is on top, green in the middle, and blue at the bottom.

❓ ui_behavior

intermediate

How does HStack arrange views?

What is the visual arrangement of views inside an HStack in SwiftUI?

iOS Swift

import SwiftUI

struct ContentView: View {
  var body: some View {
    HStack {
      Text("A")
      Text("B")
      Text("C")
    }
  }
}

A The texts A, B, C are arranged randomly on the screen

B The texts A, B, C are arranged horizontally from left to right

C The texts A, B, C overlap each other in the same position

D The texts A, B, C are arranged vertically from top to bottom

💡 Hint

HStack arranges views side by side horizontally.

HStack arranges its child views horizontally in the order they appear, from left to right.

❓ ui_behavior

advanced

What is the visual output of this ZStack code?

Consider this SwiftUI code using ZStack. Which color rectangle will be fully visible on top?

iOS Swift

import SwiftUI

struct ContentView: View {
  var body: some View {
    ZStack {
      Rectangle().fill(Color.yellow).frame(width: 150, height: 150)
      Rectangle().fill(Color.orange).frame(width: 100, height: 100)
      Rectangle().fill(Color.purple).frame(width: 50, height: 50)
    }
  }
}

A All rectangles arranged side by side horizontally

B A yellow rectangle on top, orange in middle, purple at bottom

C A purple rectangle on top, orange in middle, yellow at bottom, all centered

D All rectangles arranged vertically with yellow on top

💡 Hint

ZStack layers views on top of each other in order.

ZStack places views stacked on top of each other. The last declared view is on top. So purple is topmost, orange below it, yellow at bottom.

❓ lifecycle

advanced

How does SwiftUI update views inside stacks when state changes?

If a @State variable changes inside a view containing VStack, HStack, or ZStack, what happens to the views inside these stacks?

A The stack is removed and recreated from scratch every time

B The entire stack and all its child views are always fully re-rendered

C No views update automatically; manual refresh is needed

D Only the views affected by the state change are re-rendered inside the stack

💡 Hint

SwiftUI uses a diffing system to update only changed views.

SwiftUI efficiently updates only the views affected by state changes inside stacks, not the entire stack.

❓ navigation

expert

What happens if you nest VStack inside ZStack with overlapping frames?

Given this SwiftUI code, which describes the final visual layering and position of the texts?

iOS Swift

import SwiftUI

struct ContentView: View {
  var body: some View {
    ZStack {
      Text("Bottom").frame(width: 200, height: 200).background(Color.gray)
      VStack {
        Text("Top 1").background(Color.red)
        Text("Top 2").background(Color.blue)
      }.frame(width: 150, height: 150)
    }
  }
}

A The gray background is at bottom, with red and blue texts stacked vertically on top inside smaller frame

B The red and blue texts overlap the gray background horizontally side by side

C Only the gray background is visible, texts are hidden behind

D The red and blue texts appear below the gray background

💡 Hint

ZStack layers views; VStack arranges inside vertically.

ZStack places the gray background at bottom. The VStack with red and blue texts is layered on top, arranged vertically inside its frame.

Practice

1. Which SwiftUI stack arranges views vertically, one on top of the other?
VStack, HStack, or ZStack?

easy

A. ZStack

B. VStack

C. HStack

D. StackView

Solution

1. Step 1: Understand VStack behavior

   VStack arranges child views vertically, stacking them from top to bottom.

2. Step 2: Compare with other stacks

   HStack arranges views horizontally, ZStack layers views on top of each other.

3. Final Answer:

   VStack -> Option B

4. Quick Check:

   Vertical arrangement = VStack [OK]

Hint: Remember V for vertical stacking [OK]

Common Mistakes:

• Confusing HStack with VStack
• Thinking ZStack arranges views vertically
• Assuming StackView is a SwiftUI stack

2. Which of the following is the correct syntax to create a horizontal stack with two Text views in SwiftUI?

?

easy

A. HStack -> Text("Hello") + Text("World")

B. HStack(Text("Hello"), Text("World"))

C. HStack[Text("Hello"), Text("World")]

D. HStack { Text("Hello") Text("World") }

Solution

1. Step 1: Recall SwiftUI stack syntax

   Stacks use braces { } to group child views, separated by spaces or newlines.

2. Step 2: Identify correct syntax

   HStack { Text("Hello") Text("World") } uses braces and places Text views inside correctly. Others use invalid syntax.

3. Final Answer:

   HStack { Text("Hello") Text("World") } -> Option D

4. Quick Check:

   Use braces for stacks [OK]

Hint: Stacks use braces { } to group views [OK]

Common Mistakes:

• Using parentheses instead of braces
• Using brackets instead of braces
• Trying to use operators to combine views

3. What will be the visual arrangement of the texts when this SwiftUI code runs?

ZStack {
  Text("Bottom")
  Text("Top")
}

medium

A. Texts appear side by side horizontally

B. "Bottom" text appears above "Top" text

C. "Top" text appears above "Bottom" text

D. Texts appear stacked vertically

Solution

1. Step 1: Understand ZStack layering order

   ZStack layers views in order, last view is on top visually.

2. Step 2: Apply to given code

   "Bottom" is added first, "Top" second, so "Top" appears above "Bottom".

3. Final Answer:

   "Top" text appears above "Bottom" text -> Option C

4. Quick Check:

   ZStack last view is top layer [OK]

Hint: Last view in ZStack is on top [OK]

Common Mistakes:

• Assuming first view is on top
• Thinking ZStack arranges views horizontally
• Confusing ZStack with VStack or HStack

4. Identify the error in this SwiftUI code snippet:

HStack {
  Text("One")
  VStack
  Text("Two")
}

medium

A. Missing braces after VStack declaration

B. Text views cannot be inside HStack

C. HStack requires parentheses instead of braces

D. VStack cannot be nested inside HStack

Solution

1. Step 1: Check VStack usage

   VStack is a view container and requires braces { } to enclose child views.

2. Step 2: Identify missing braces

   Code shows VStack without braces, causing syntax error.

3. Final Answer:

   Missing braces after VStack declaration -> Option A

4. Quick Check:

   Containers need braces for children [OK]

Hint: Always add braces after VStack or HStack [OK]

Common Mistakes:

• Omitting braces for stack containers
• Thinking Text can't be inside HStack
• Using parentheses instead of braces for stacks

5. You want to create a SwiftUI view where three colored squares overlap each other with red on bottom, green in middle, and blue on top. Which stack and order of views achieves this?

hard

A. ZStack { Color.red Color.green Color.blue } with Color.blue last

B. VStack { Color.red Color.green Color.blue } with Color.red last

C. HStack { Color.blue Color.green Color.red } with Color.red last

D. ZStack { Color.blue Color.green Color.red } with Color.red last

Solution

1. Step 1: Choose stack for overlapping views

   ZStack layers views on top of each other, perfect for overlapping.

2. Step 2: Order views for correct layering

   In ZStack, last view is top layer, so Color.blue last puts blue on top, red first puts red at bottom.

3. Final Answer:

   ZStack { Color.red Color.green Color.blue } with Color.blue last -> Option A

4. Quick Check:

   ZStack layering order = last view on top [OK]

Hint: Use ZStack; last view is top layer [OK]

Common Mistakes:

• Using VStack or HStack for overlapping
• Reversing order of colors in ZStack
• Thinking first view is top layer in ZStack