SwiftUI - Поиск в заголовке списка

Question

Я пытаюсь воссоздать то, что все знают из UITableView с SwiftUI: простое поле поиска в заголовке табличного представления:

ОднакоПредставление списка в SwiftUI, похоже, даже не имеет способа добавить верхний или нижний колонтитул.Вы можете установить заголовок с TextField для таких разделов:

@State private var searchQuery: String = ""

var body: some View {

List {
    Section(header:
        Group{
            TextField($searchQuery, placeholder: Text("Search"))
                                .background(Color.white)
            }) {
                  ListCell()
                  ListCell()
                  ListCell()
                }

    }
}

Однако я не уверен, что это лучший способ сделать это, потому что:

1. Заголовокне скрывается при прокрутке вниз, как вы знаете, из UITableView.
2. SearchField не похож на поле поиска, которое мы знаем и любим.

Кто-нибудь нашел хороший подход?Я не хочу прибегать к UITableView.

Answer 1

Вы можете портировать UISearchBar на SwiftUI.

(Подробнее об этом можно прочитать в отличном докладе WWDC 2019 - Интеграция SwiftUI )

struct SearchBar: UIViewRepresentable {

    @Binding var text: String

    class Coordinator: NSObject, UISearchBarDelegate {

        @Binding var text: String

        init(text: Binding<String>) {
            $text = text
        }

        func searchBar(_ searchBar: UISearchBar, textDidChange searchText: String) {
            text = searchText
        }
    }

    func makeCoordinator() -> Coordinator {
        return Coordinator(text: $text)
    }

    func makeUIView(context: UIViewRepresentableContext<SearchBar>) -> UISearchBar {
        let searchBar = UISearchBar(frame: .zero)
        searchBar.delegate = context.coordinator
        return searchBar
    }

    func updateUIView(_ uiView: UISearchBar,
                      context: UIViewRepresentableContext<SearchBar>) {
        uiView.text = text
    }
}

И используйте это так:

struct ContentView: View {

    @State private var searchQuery: String = ""

    var body: some View {

        List {
            Section(header: SearchBar(text: self.$searchQuery)) {
                ForEach(Array(1...100).filter {
                    self.searchQuery.isEmpty ?
                        true :
                        "\($0)".contains(self.searchQuery)
                }) { item in
                    Text("\(item)")
                }
            }
        }
    }
}

Это правильная строка поиска, но она не скрывается - я уверен, что мы сможем сделать это в какой-то момент через API SwiftUI.

выглядит так :

Answer 2

Возможно, отправная точка здесь. Попробуйте использовать ZStack для исчезновения эффекта прокрутки для просмотра прокрутки.

struct ContentView : View {
    @State var search: String

    var body: some View {
        NavigationView {
            HStack {
                Image(systemName: "magnifyingglass")
                    .padding(.leading, 10.0)
                TextField($search, placeholder: Text("Search"))
                    .padding(.vertical, 4.0)
                    .padding(.trailing, 10.0)
            }
                .border(Color.secondary, width: 1, cornerRadius: 5)
                .padding()
            List {
                ForEach(0...100) { e in
                    Text("Item \(e)")
                }
            }
                .navigationBarTitle(Text("TEST"))
        }
    }
}