[Solved] What will be displayed when running this SwiftUI code?ScrollView { LazyHStack { ForEach(1...4, id: \.self) { i in Text("Label \(i)") } } } | iOS Swift

iOS Swift - SwiftUI Layout

What will be displayed when running this SwiftUI code?

ScrollView {
  LazyHStack {
    ForEach(1...4, id: \.self) { i in
      Text("Label \(i)")
    }
  }
}

AA horizontal scrollable row showing "Label 1" to "Label 4"

BA vertical list showing "Label 1" to "Label 4" stacked

CAn empty view because LazyHStack requires a frame

DA single Text view showing "Label 1" only

Step-by-Step Solution

Solution:

Step 1: Identify ScrollView orientation
The ScrollView has default vertical scrolling, but LazyHStack arranges views horizontally.
Step 2: Effect of LazyHStack inside ScrollView
LazyHStack arranges children in a horizontal line, but since ScrollView is vertical by default, horizontal content will be clipped unless ScrollView is horizontal.
Step 3: Actual behavior
Because ScrollView is vertical, LazyHStack will layout horizontally but only visible width is shown, so horizontal scrolling is not enabled, resulting in clipped content.
Step 4: Correct interpretation
However, SwiftUI allows horizontal content inside vertical ScrollView but it won't scroll horizontally. So only the first label is fully visible, others clipped.
Final Answer:
A single Text view showing "Label 1" only -> Option D
Quick Check:
LazyHStack arranges horizontally; ScrollView default vertical scroll [OK]

Quick Trick: LazyHStack arranges horizontally; ScrollView scroll direction matters [OK]

Common Mistakes:

Master "SwiftUI Layout" in iOS Swift

9 interactive learning modes - each teaches the same concept differently

More iOS Swift Quizzes

What will be displayed when running this SwiftUI code?