How can you create a SwiftUI view that has a yellow background, a blue overlay with 50% opacity, and a red border around the overlay?

hard📝 Application Q9 of 15

iOS Swift - SwiftUI Layout

AText("Label") .background(Color.yellow) .overlay(Rectangle().fill(Color.blue.opacity(0.5)).overlay(Rectangle().stroke(Color.red, lineWidth: 2)))

BText("Label") .background(Color.yellow) .overlay(Rectangle().stroke(Color.red, lineWidth: 2).background(Color.blue.opacity(0.5)))

CText("Label") .background(Color.yellow) .overlay(Rectangle().fill(Color.blue.opacity(0.5)).background(Color.red))

DText("Label") .background(Color.yellow) .overlay(Rectangle().stroke(Color.red, lineWidth: 2).opacity(0.5))

Step-by-Step Solution

Solution:

Step 1: Set yellow background behind all
Use .background(Color.yellow) to place yellow behind everything.
Step 2: Create blue overlay with 50% opacity
Use Rectangle().fill(Color.blue.opacity(0.5)) as overlay base.
Step 3: Add red border around blue overlay
Use .overlay(Rectangle().stroke(Color.red, lineWidth: 2)) on the blue rectangle to add border.
Final Answer:
Layers blue fill with red border as overlay on yellow background. -> Option A
Quick Check:
Background yellow, overlay blue with red border = Text("Label") .background(Color.yellow) .overlay(Rectangle().fill(Color.blue.opacity(0.5)).overlay(Rectangle().stroke(Color.red, lineWidth: 2))) [OK]

Quick Trick: Use nested overlays for border on colored overlays [OK]

Common Mistakes:

Master "SwiftUI Layout" in iOS Swift

9 interactive learning modes - each teaches the same concept differently

Want More Practice?

15+ quiz questions · All difficulty levels · Free

More iOS Swift Quizzes