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

You can use List style .listStyle(PlainListStyle()) on List and use Section on iOS 13 +

for Example

 struct ContentView: View {
  var content = MyData()
    var body: some View {
      List {
        ForEach(content.sections, id: \.title) { section in
          Section(content: {
            ForEach(section.rows, id: \.self) { row in
              Text(row)
            }
          }, header: {
            Text(section.title)
          })
        }
      }
      .listStyle(PlainListStyle())
    }
}

Given:

struct MyData {
  struct Section {
    var title: String
    var rows: [String]
  }

  var sections: [Section] = []
}