0

I have a SwiftUI view that contains ScrollView with ([.horizontal, .vertical]) attribute. I want to show pinned headers in the horizontal and vertical stack views, inside ScrollView. So I am using LazyVStack and LazyHStack. But when I am scrolling the view, its layout is breaking. To reproduce this issue I have created a sample code below(Actual project code is very complex). I am also attaching screenshots of the broken layout showing after a fast scroll. Does anyone has faced a similar problem, and knows the solution to it? Please share.

Expected layout

Layout After scroll

`

import SwiftUI

struct ContentView: View {
  var body: some View {
    VStack {
      ScrollViewReader { scrollView in
        ScrollView([.horizontal, .vertical])
        {
          LazyVStack(alignment: .leading, spacing: 0)
          {
            ForEach(Array(stride(from: 1, to: 1000, by: 10)), id: \.self) { rowindex in
              LazyHStack(alignment: .top, spacing: 0)
              {
                ForEach(0..<10, id: \.self) { columnindex in
                  ZStack() {
                    Rectangle().stroke(.blue)
                    Text("\(rowindex+columnindex)")
                      .padding(10)
                      .frame(width: 80, height: 40, alignment: .center)
                  }
                  .id(rowindex+columnindex)
                }
              }
            }
          }
        }
      }
    }
  }
}
struct ContentView_Previews: PreviewProvider {
  static var previews: some View {
    ContentView()
  }
}

`

If I make any one of stack view non lazy issue got fix. But the problem is I have to add pinned headers so cant do that. Also the data is based on API response and can have diffrent layouts.So calculation of height and width will not be accurate or rally complex.

Fauad Anwar
  • 91
  • 2
  • 3

0 Answers0