Poor on-screen / scrolling performance using LazyVStack and LazyHStack with ScrollView in SwiftUI

Viewed 465

I'm trying to draw a large scrolling SwiftUI View consisting of Rectangles that will be colour-coded. Step one is just testing 1,000s of rectangles on screen within a ScrollView, however, performance is awful. This code draws 16,000 rectangles, but the scrolling performance is really jittery and sometimes pauses a few seconds.

Any ideas on what is going on and how to fix appreciated.

struct ContentView: View {
    
    var body: some View {
        
        ScrollView {
            LazyVStack {
                ForEach (0..<32) { byte in
                    
                    MemoryBlockView()
                }
            }
        }
    }
}
struct MemoryBlockView: View {
      
    var body: some View {
        
        LazyVStack(spacing: 2) {
            
            ForEach (0..<8) { byte in
                
                MemoryBlockRowView()
            }
        }
        .padding(0)
    }
}
struct MemoryBlockRowView: View {
    
    var body: some View {
        
        LazyHStack(spacing: 2) {
            ForEach (0..<64) { byte in
                
                Rectangle()
                    .fill(Color.blue)
                    .cornerRadius(2)
                    .padding(1)
            }
        }
    }
}
0 Answers
Related