How to create multiple pinned views below each other in SwiftUI?

Question

I'm trying to create a multiple layered scrollView with each layer being pinned when scrolling through the list. Currently, the pinnedViews are pinned on top of each other when scrolling to the bottom. See screenshots for current and desired behaviour.

This is the current view structure:

ScrollView {
    LazyVStack(pinnedViews: [.sectionHeaders]) {
        ForEach(data.firstLayeredViews) { firstLayer in
            Section {
                LazyVStack(pinnedViews: [.sectionHeaders]) {
                    ForEach(firstLayer.secondLayeredViews) { secondLayer in
                        Section() {
                            LazyVStack(pinnedViews: [.sectionHeaders]) {
                                ForEach(secondLayer.thirdLayeredViews) { thirdLayer in
                                    Section() {
                                        LazyVStack {
                                            ForEach(thirdLayer.contents) { content in
                                                Text("Content")
                                            }
                                        }
                                     } header: {
                                         GridCellHeader(title: "Layer 3", level: .thirdLayer)
                                     }
                                }
                            }
                        } header: {
                            GridCellHeader(title: "Layer 2", level: .secondLayer)
                        }
                    }
                }
            } header: {
                GridCellHeader(title: "Layer 1", level: .firstLayer)
            }
        }
    }
}

The level parameter of the GridCellHeader determines the leading padding of the Text.

Ivan Vavilov · Accepted Answer · 2024-03-27 20:54:57Z

-1

This video helped me to figure this out. I need just two nested levels of headers. For a top-level, I used a built-in API LazyVStack(pinnedViews: .sectionHeaders). For a second level, I modified the code from a source and pin it "manually" by calculating frames. I measured FPS, so manual implementation looks good so far. I didn't notice any hitches.

answered Mar 27, 2024 at 20:54

Ivan Vavilov

1,6691 gold badge16 silver badges29 bronze badges

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

1 Comment

Wouter van de Ven Over a year ago

Could you please clarify with code snippets?

Collectives™ on Stack Overflow

How to create multiple pinned views below each other in SwiftUI?

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