I'm attempting to keep a section header on the screen when scrolling through a list but my code is not working. I'm following this Apple tutorial but my code has no effect on the header staying on the screen.

    var body: some View {
        NavigationSplitView {
            List {
                LazyVStack(pinnedViews: .sectionHeaders) {
                    ForEach(searchDates, id: \.self) { date in
                        Section(header: Text(date)) {
                            ReceiptSection(searchResults: searchResults, date: date)
                        }
                    }.onDelete(perform: deleteItems)
                }
            }

I have tried moving around where I insert the LazyVStack but that has no effect either. Can anyone tell me how to fix it?

I'm attempting to keep a section header on the screen when scrolling through a list but my code is not working. I'm following this Apple tutorial but my code has no effect on the header staying on the screen.

    var body: some View {
        NavigationSplitView {
            List {
                LazyVStack(pinnedViews: .sectionHeaders) {
                    ForEach(searchDates, id: \.self) { date in
                        Section(header: Text(date)) {
                            ReceiptSection(searchResults: searchResults, date: date)
                        }
                    }.onDelete(perform: deleteItems)
                }
            }

I have tried moving around where I insert the LazyVStack but that has no effect either. Can anyone tell me how to fix it?

• swift
• swiftui

• LazyVStack should be put inside a ScrollView, not List. Do you specifically need List for anything? – Sweeper Commented Jan 18 at 13:25
• @Sweeper I am using the list for some basic styling, but I could get by without it. I tried putting it in a scroll view and that does keep the header on the screen. – David L Commented Jan 18 at 13:52
• @Sweeper Thanks, I think I'm able to make this work. I don't fully understand why it wouldn't work with the List since it behaves like a scroll view. – David L Commented Jan 18 at 14:02
• There really is not much to explain. SwiftUI just is this way. There are "synergies", as I like to call them, between certain views. – Sweeper Commented Jan 18 at 14:04

1 Answer 1

Lazy stacks should be inside ScrollViews, not Lists. In fact, they are not "lazy" unless they are in a ScrollView. On the other hand, the List will treat it as one giant list row.

ScrollView {
    LazyVStack(pinnedViews: .sectionHeaders) {
        ForEach(searchDates, id: \.self) { date in
            Section(header: Text(date)) {
                ReceiptSection(searchResults: searchResults, date: date)
            }
        }.onDelete(perform: deleteItems)
    }
}

You can also consider using a ListStyle that has sticky headers. e.g. the .plain style on iOS. NavigationSplitView is designed to be driven by the selection of a List - it navigates to the detail view when a list row is selected.