Modifier chaining in iOS Swift - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What color will the text be?

Consider this SwiftUI code that chains modifiers on a Text view. What color will the text appear as on screen?

iOS Swift

Text("Hello World")
  .foregroundColor(.red)
  .foregroundColor(.blue)

A Black

B Red

C Purple

D Blue

💡 Hint

Think about the order of modifiers and which one applies last.

In SwiftUI, modifiers are applied in order. The last foregroundColor(.blue) overrides the previous .red, so the text color is blue.

📝 Syntax

intermediate

Which modifier chain compiles without error?

Which of these SwiftUI modifier chains is syntactically correct?

A Text("Hi").padding().background(Color.red).font(.title)

B Text("Hi").padding().background(Color.red).font.title()

C Text("Hi").padding.background(Color.red).font(.title)

D Text("Hi").padding().background(Color.red).font

💡 Hint

Check if each modifier is called as a function with parentheses.

Modifiers like padding(), background(), and font() require parentheses. Option A uses them correctly. Options A, B, and C have syntax errors.

❓ lifecycle

advanced

What happens if you chain .onAppear twice?

Given this SwiftUI code, what will happen when the view appears?

iOS Swift

Text("Welcome")
  .onAppear { print("First") }
  .onAppear { print("Second") }

A Both "First" and "Second" are printed

B No output is printed

C Only "Second" is printed

D Only "First" is printed

💡 Hint

Think about whether modifiers replace or add behavior.

Each .onAppear adds a separate action. Both closures run when the view appears, so both messages print.

❓ navigation

advanced

Which modifier chain correctly adds a navigation title and a button?

Which SwiftUI modifier chain correctly adds a navigation title and a trailing button to a view?

A

Text("Home")
  .navigationTitle("Main")
  .toolbar { Button("Edit") {} }

B

Text("Home")
  .toolbar { Button("Edit") {} }
  .navigationTitle("Main")

C

Text("Home")
  .navigationTitle("Main", displayMode: .inline)
  .toolbar { Button("Edit") {} }

D

Text("Home")
  .toolbar { Button("Edit") {} }
  .navigationBarTitle("Main")

💡 Hint

Check the correct modifier names and their order.

.navigationTitle with displayMode and .toolbar are the current correct modifiers. .navigationBarTitle is deprecated. The order in C is correct and compiles.

🔧 Debug

expert

Why does this modifier chain cause a runtime crash?

Examine this SwiftUI code. Why does it crash at runtime?

iOS Swift

Text("Crash")
  .frame(width: 100, height: 50)
  .background(Color.red)
  .clipShape(Circle())

A frame modifier requires explicit alignment parameter to avoid crash

B clipShape(Circle()) clips the rectangular frame causing layout conflict

C background(Color.red) must come after clipShape to avoid crash

D Text view cannot be clipped with clipShape

💡 Hint

Think about shape clipping on rectangular frames.

Clipping a rectangular frame with a circle shape can cause layout conflicts leading to runtime issues. The order and shape mismatch cause the crash.