Text view and modifiers in iOS Swift - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What is the color of the text shown?

Consider this SwiftUI code snippet. What color will the text appear on screen?

iOS Swift

Text("Hello SwiftUI")
  .foregroundColor(.red)
  .background(Color.yellow)

A Yellow text on red background

B Red text on yellow background

C Black text on yellow background

D Red text on transparent background

💡 Hint

The foregroundColor modifier changes the text color, background changes behind the text.

The foregroundColor(.red) sets the text color to red. The background(Color.yellow) sets the background behind the text to yellow.

📝 Syntax

intermediate

Which code correctly makes the text bold and italic?

Choose the SwiftUI code that applies both bold and italic styles to the text.

A Text("SwiftUI").bold().italic()

B Text("SwiftUI").font(.bold).italic()

C Text("SwiftUI").fontWeight(.bold).italic()

D Text("SwiftUI").italic().bold()

💡 Hint

bold() and italic() are modifiers that can be chained in any order.

Both bold() and italic() are valid modifiers and can be chained in any order. font(.bold) is invalid because font expects a Font value, not a weight.

❓ lifecycle

advanced

What happens if you apply multiple foregroundColor modifiers?

Given this code, what color will the text display?

iOS Swift

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

A Text with gradient from blue to green

B Blue text

C Green text

D Text with default color

💡 Hint

Later modifiers override earlier ones.

In SwiftUI, modifiers are applied in order. The last foregroundColor(.green) overrides the earlier blue color.

🔧 Debug

advanced

Why does this code cause a compile error?

Identify the error in this SwiftUI code snippet:

iOS Swift

Text("Welcome")
  .fontWeight("bold")

A Missing parentheses after fontWeight

B Text cannot have fontWeight modifier

C fontWeight must be called before Text()

D fontWeight expects a Font.Weight value, not a String

💡 Hint

Check the type of argument fontWeight expects.

fontWeight modifier requires a Font.Weight enum value like .bold, not a string literal.

🧠 Conceptual

expert

How does the order of modifiers affect the final text appearance?

Given these two code snippets, which statement is true about their rendered text?

A Text("Hi").padding().background(Color.gray) adds padding inside the background

B Text("Hi").background(Color.gray).padding() adds padding inside the background

C Both snippets produce identical UI

D Padding and background order does not affect layout

💡 Hint

Think about what area the background color covers relative to padding.

In the first snippet, padding is applied first, then background covers the padded area. In the second, background covers only the text, then padding adds space outside it.