One ForEach eats up another ForEach loop in SwiftUI LazyVGrid?

Question

Here's the simplest code I tried that acts wrong:

the grid has 10 red rectangles and 1 black rectangles

the grid has 6 red rectangles and 5 black rectangles

LazyVGrid(columns: Array(repeating: .init(.flexible(), alignment: .bottom), count: 7), spacing: 12) {
    ForEach(0..<5, id: \.self) { _ in
        Rectangle()
            .fill(.black)
    }

    ForEach(0..<10, id: \.self) { _ in
        Rectangle()
            .fill(.red)
    }
}

ForEach isn't a loop it's a View and for constant range there should be no id param — malhal
– malhal, Commented May 27 at 21:53

Mark Daylight · Accepted Answer · 2025-05-27 18:28:26Z

0

The issue lies in the id conflict between the two ForEach loops. Since the first few elements have duplicate ids, the lazy layout fails to render them correctly. After giving them elements unique id, the rendering issue fixed.

answered May 27 at 18:28

Mark Daylight

292 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Barmar May 27 at 18:45

The answer would be improved if you showed the corrected code.

Collectives™ on Stack Overflow

One ForEach eats up another ForEach loop in SwiftUI LazyVGrid?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related