如何在 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

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()
            }
        }
    }
}

Answer 2

LazyVStack提供了一个pinnedView属性来完成这个。

Answer 3

Use pinnedViews in the LazyVStack initializer.

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

Answer 4

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] = []
}