CODEWITHSUNDEEP
scrollviewfootersectionslazyvstack
Jansche
Jansche

Reputation: 1

Why does LazyVStack footer stutter when section height exceeds screen frame in SwiftUI?

I am having some issues with sticky footers on PinnedScrollableViews in SwiftUI for iOS. I am working on a LazyVStack embedded in a ScrollView with footers on each section of the LazyVStack. The size of each section is dynamic and may change dependent on how many line items a user adds to the section. I noticed that when more line items are added to the section and thus, the height of the section exceeds the frame of the screen at a certain point, the footer stutters for a short moment. It roughly seems to be moment when the bottom of the corresponding section is reached - but I am not too sure

I tried the following code (simplified for illustration). I got the foundation from https://yoswift.dev/swiftui/pinnedScrollableViews/ and only adjusted it a little:

struct StickyHeaderViewExample: View {

    var stickyHeaderView: some View {
        RoundedRectangle(cornerRadius: 25.0, style: .continuous)
            .fill(Color.gray)
            .frame(maxWidth: .infinity)
            .frame(height: 64)
            .overlay(
                Text("Section")
                    .foregroundColor(Color.white)
                    .font(.largeTitle)
            )
    }
    var body: some View {
        NavigationView {
            ScrollView {
                LazyVStack(alignment: .center, spacing: 40, pinnedViews: [.sectionFooters], content: {
                    Section {
                        Text("Section 1")
                            .foregroundColor(.blue)
                            .font(.headline)
                            .padding()
                    }
                    ForEach(0...5, id: \.self) { count in
                        Section(footer: stickyHeaderView) {
                            MyCell()
                        }
                    }
                })
            }
        }      

    }
}

struct MyCell: View {
    var body: some View {
        VStack {
            Rectangle()
                .fill(Color.red)
                .frame(width: 100, height: 750)
            HStack {
                Image(systemName: "heart")
                Text("WWDC 20")
                    .foregroundColor(.blue)
                    .font(.headline)
            }
            Text("PinnedScrollableViews")
                .foregroundColor(.blue)
                .font(.subheadline)
        }
    }
}

Now, what I receive is the following. As you can see, it stutters/disappears for a short moment/at a certain position when scrolling down.

enter image description here

enter image description here

Do you know how I can fix this? Has anyone maybe faced the same or similar issues with footers in PinnedScrollableViews? I would really appreciate any help😊

Thank you in advance!

Upvotes: 0

Views: 15

Answers (0)

Related Questions