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.

Practice

1. What does modifier chaining in SwiftUI allow you to do?
Text("Hello")
with multiple modifiers like .font() and .foregroundColor()?

easy

A. Create multiple separate views for each style

B. Apply multiple style changes step-by-step in one line

C. Run code only once without UI changes

D. Change the app's navigation flow

Solution

1. Step 1: Understand modifier chaining concept

   Modifier chaining lets you apply many style or behavior changes to a view in a single line by linking modifiers.

2. Step 2: Recognize the effect on UI

   Each modifier returns a new view with the change applied, so chaining applies all changes step-by-step.

3. Final Answer:

   Apply multiple style changes step-by-step in one line -> Option B

4. Quick Check:

   Modifier chaining = step-by-step style changes [OK]

Hint: Modifiers stack in order to style views cleanly [OK]

Common Mistakes:

• Thinking modifiers change the original view directly
• Believing each modifier creates a separate view instance
• Confusing modifier chaining with navigation

2. Which of the following is the correct syntax to chain modifiers on a Text view in SwiftUI?

easy

A. Text("Hi").font(.title).foregroundColor(.red)

B. Text("Hi") font(.title) foregroundColor(.red)

C. Text("Hi").font = .title.foregroundColor = .red

D. Text("Hi").font(.title), foregroundColor(.red)

Solution

1. Step 1: Identify correct chaining syntax

   In SwiftUI, modifiers are chained by calling them one after another with dots, like .font() then .foregroundColor().

2. Step 2: Check each option

   Text("Hi").font(.title).foregroundColor(.red) correctly chains modifiers with dots. Others miss dots or use invalid syntax.

3. Final Answer:

   Text("Hi").font(.title).foregroundColor(.red) -> Option A

4. Quick Check:

   Correct chaining uses dots between modifiers [OK]

Hint: Use dot before each modifier to chain [OK]

Common Mistakes:

• Omitting dots between modifiers
• Using assignment (=) instead of method calls
• Separating modifiers with commas

3. What will be the color of the text displayed by this SwiftUI code?

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

medium

A. Blue

B. Black (default)

C. Purple

D. Red

Solution

1. Step 1: Understand modifier order

   Modifiers apply in order, and each returns a new view. The last .foregroundColor() overrides the previous one.

2. Step 2: Analyze the code

   The first sets color to blue, the second immediately changes it to red, so red is final.

3. Final Answer:

   Red -> Option D

4. Quick Check:

   Last modifier wins for same property [OK]

Hint: Last color modifier sets final text color [OK]

Common Mistakes:

• Assuming colors mix to purple
• Thinking first modifier stays active
• Ignoring modifier order

4. Identify the error in this SwiftUI modifier chain:

Text("Welcome")
  .font(.headline)
  .padding
  .background(Color.yellow)

medium

A. Cannot chain .background after .padding

B. Incorrect order of modifiers

C. Missing parentheses after .padding

D. Text view cannot have .font modifier

Solution

1. Step 1: Check each modifier syntax

   Modifiers like .padding require parentheses even if no parameters are passed.

2. Step 2: Locate the error

   Here, .padding is missing parentheses, causing a syntax error.

3. Final Answer:

   Missing parentheses after .padding -> Option C

4. Quick Check:

   Modifiers need parentheses even if empty [OK]

Hint: Always add () after modifiers like .padding [OK]

Common Mistakes:

• Omitting parentheses on parameterless modifiers
• Thinking order of modifiers causes error here
• Believing .background can't follow .padding

5. You want to create a button with a blue background, white text, and rounded corners using modifier chaining. Which code correctly achieves this?

Button("Tap Me") {
  print("Tapped")
}
.modifier1
.modifier2
.modifier3

Choose the correct order and modifiers to replace modifier1, modifier2, and modifier3.

hard

A. .background(Color.blue).foregroundColor(.white).cornerRadius(10)

B. .foregroundColor(.white).cornerRadius(10).background(Color.blue)

C. .cornerRadius(10).background(Color.blue).foregroundColor(.white)

D. .cornerRadius(10).foregroundColor(.white).background(Color.blue)

Solution

1. Step 1: Understand modifier effects and order

   The text color is set by .foregroundColor(), background color by .background(), and shape by .cornerRadius(). The order matters to apply background behind the text and corner radius on background.

2. Step 2: Analyze each option

   .background(Color.blue).foregroundColor(.white).cornerRadius(10) sets background first, then text color, then corner radius, correctly styling the button with white text on blue rounded background.

3. Final Answer:

   .background(Color.blue).foregroundColor(.white).cornerRadius(10) -> Option A

4. Quick Check:

   Background then text color then corner radius [OK]

Hint: Set background before text color and corner radius [OK]

Common Mistakes:

• Placing cornerRadius before background causing square background
• Applying cornerRadius before background losing rounded effect
• Wrong modifier order changing appearance