How to make sticky bar in SwiftUI?

Question

I'm novice in SwiftUI and still can't understand how to make sticky bar on the top of the List. Like letters in apple music app when you listing artists or songs (look example).

I explored abilities of the List and NavigationView, but got nothing. 😔

Answer 1

LazyVStack provides an initializer with a pinnedView parameter that does exactly this.

Answer 2

Use pinnedViews in the LazyVStack initializer.

LazyVStack(pinnedViews: [.sectionHeaders]) {
    Section(header: Text("Sticky Header")) {
        ForEach(0...3) { item in
            Text(item)
        }
    }
}

Answer 3

SwiftUI’s list view has built-in support for sections and section headers, just like UITableView in UIKit. To add a section around some cells, start by placing a Section around it.

What we want to do is create a list view that has two sections: one for important tasks and one for less important tasks. Here’s how that looks:

struct ContentView: View {
    var body: some View {
        List {
            Section(header: Text("Important tasks")) {
                TaskRow()
                TaskRow()
                TaskRow()
            }

            Section(header: Text("Other tasks")) {
                TaskRow()
                TaskRow()
                TaskRow()
            }
        }
    }
}