请求标头_swiftui标头

请求标头

SwiftUI is a powerful declarative framework which allows us to write a UIKit UITableView in just a few lines of code!

SwiftUI是一个功能强大的声明性框架，它使我们能够仅用几行代码来编写UIKit UITableView ！

Today, I am going to show you how you can incorporate Picker , which is SwiftUI’s way of calling UISegmentedControl, into a List, to toggle between data.

今天，我将向您展示如何将Picker (这是SwiftUI调用UISegmentedControl的方式)整合到List ，以在数据之间切换。

By the end of this tutorial, you will know how to stick any view in your List view! Let’s get started!

在本教程结束时，您将知道如何将任何视图粘贴到List视图中！ 让我们开始吧！

We all know that in the great Marvel Universe, there are both male and female characters, so you are going to create a simple List, to help users toggle between both lists as they scroll down the list seamlessly!

我们都知道，在伟大的Marvel Universe ，既有男性角色又有女性角色，因此您将创建一个简单的List ，以帮助用户在无缝滚动列表的同时在两个列表之间切换！

You may start off a brand new project and in your ContentView , start by adding these lines of code as data to supply into your views.

您可以从一个全新的项目开始，然后在ContentView ，首先将这些代码行作为数据添加到视图中。

enum Gender: Int {
    case male
    case female
}


struct Character: Identifiable {
    var id: Int
    var name: String
}


let males = [
    Character(id: 1, name: "Spider-Man"),
    Character(id: 2, name: "Captain America"),
    Character(id: 3, name: "Iron Man"),
    Character(id: 4, name: "Hulk"),
    Character(id: 5, name: "Thor"),
    Character(id: 6, name: "Black Panther"),
    Character(id: 1, name: "Spider-Man"),
    Character(id: 2, name: "Captain America"),
    Character(id: 3, name: "Iron Man"),
    Character(id: 4, name: "Hulk"),
    Character(id: 5, name: "Thor"),
    Character(id: 6, name: "Black Panther"),
    Character(id: 1, name: "Spider-Man"),
    Character(id: 2, name: "Captain America"),
    Character(id: 3, name: "Iron Man"),
    Character(id: 4, name: "Hulk"),
    Character(id: 5, name: "Thor"),
    Character(id: 6, name: "Black Panther")
]


let females = [
    Character(id: 1, name: "Wanda Maximoff"),
    Character(id: 2, name: "Carol Danvers"),
    Character(id: 3, name: "She-Hulk"),
    Character(id: 4, name: "Black Widow"),
    Character(id: 5, name: "Kamala Khan"),
    Character(id: 6, name: "Gamora"),
    Character(id: 1, name: "Wanda Maximoff"),
    Character(id: 2, name: "Carol Danvers"),
    Character(id: 3, name: "She-Hulk"),
    Character(id: 4, name: "Black Widow"),
    Character(id: 5, name: "Kamala Khan"),
    Character(id: 6, name: "Gamora"),
    Character(id: 1, name: "Wanda Maximoff"),
    Character(id: 2, name: "Carol Danvers"),
    Character(id: 3, name: "She-Hulk"),
    Character(id: 4, name: "Black Widow"),
    Character(id: 5, name: "Kamala Khan"),
    Character(id: 6, name: "Gamora")
]

Next, let’s create a ContentViewModel as good MVVM citizens.

接下来，让我们创建一个ContentViewModel作为优秀的MVVM公民。

class ContentViewModel: ObservableObject {
    
    @Published var selectedSegment = Gender.male.rawValue {
        didSet {
            characters = selectedSegment == Gender.male.rawValue ? males : females
        }
    }
    
    @Published var characters = males
    
}

These codes allow updating of the characters data every time the Pickerchanges.

这些代码允许每次Picker更改时更新字符数据。

As a bonus, exten Binding as I find them really useful to trigger an event when the segment changes.

另外，扩展Binding是因为我发现当段更改时它们确实对触发事件很有用。

extension Binding {
    func onChange(_ handler: @escaping (Value) -> Void) -> Binding<Value> {
        return Binding(
            get: { self.wrappedValue },
            set: { selection in
                self.wrappedValue = selection
                handler(selection)
        })
    }
}

Finally, let’s update ContentView with this final piece of code.

最后，让我们用这最后的代码更新ContentView 。

struct ContentView: View {
    
    @ObservedObject var viewModel = ContentViewModel()
    
    var genderSegmentedControl: some View {
        Picker("", selection: $viewModel.selectedSegment.onChange(sectionChange)) {
            Text("Male").tag(Gender.male.rawValue)
            Text("Female").tag(Gender.female.rawValue)
        }
        .pickerStyle(SegmentedPickerStyle())
    }
    
    var body: some View {
            List {
                HStack {
                    Spacer()
                    Text("Marvel Universe").font(Font.system(size: 44.0))
                    Spacer()
                }
                Section(header: genderSegmentedControl) {
                    ForEach(viewModel.characters) { character in
                        VStack {
                            Spacer()
                            Text(character.name)
                            Spacer()
                        }
                    }
                }
        }
    }
    
    func sectionChange(_ tag: Int) {
        print("Gender Changed!")
    }
}

Run the app now and you should get your sticky header working! This saves you a huge amount of effort in customizing your own. List provides out-of-the-box feature just like in UITableView!

立即运行该应用程序，您应该可以使用粘性标题！ 这样可以节省您自定义自己的大量工作。 List提供了开箱即用的功能，就像在UITableView ！

翻译自: https://medium.com/swlh/sticky-header-with-swiftui-199ede4b3208

请求标头