SwiftUI - 搜索栏 [英] SwiftUI - SearchBar

问题描述

我有一个名为 SearchBar.swift 的文件:

I have the following file called SearchBar.swift:

import 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
    }
}

然后在 ContentView.swift 上:

Then on the ContentView.swift the following one:

import SwiftUI


struct Geolokation: Decodable,Hashable, Identifiable {
    var date: String
    var id: String
    var latitude: String
    var longitude: String
    var seq_number: String
    var accuracy: String
}

struct GeolokationDetail: View {

    var loka: Geolokation

    var body: some View {

        VStack(alignment: .leading, spacing: 10) {
            Text(loka.id)
                .font(.headline)
            MapView(escolha: loka.id).edgesIgnoringSafeArea(.all)
        }
    }
}

struct ContentView: View {

    // init(){
    //  UINavigationBar.appearance().backgroundColor = .lightGray

    //    }

    @State private var lokaData = [Geolokation]()
    @State private var searchText : String = ""

    var body: some View {

        NavigationView{

            VStack {
                SearchBar(text: $searchText)
                List {

                    ForEach (lokaData) {
                      item in
                        NavigationLink(destination: GeolokationDetail(loka: item)) {
                            HStack() {
                                Text(item.id)
                                    .font(.headline)
                                Text(item.date)
                                    .font(.footnote)
                            }
                        }

                    }.navigationBarTitle("GeoLOKAtion")

                }

                .onAppear(perform: loadData)


            }

        }

    }


}

extension ContentView
{
    func loadData() {

        guard let url = URL(string: "https://xxxx.com") else {
            return
        }

        let request = URLRequest(url: url)
        URLSession.shared.dataTask(with: request) { data, response, error in

            if let data = data {
                if let response_obj = try? JSONDecoder().decode([Geolokation].self, from: data) {
                    DispatchQueue.main.async {
                        self.lokaData = response_obj
                    }
                }
            }

        }.resume()
    }
}



struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

但是我一直没能找到在列表中实现搜索的方法.

But I haven't been able to find a way to implement the search within the List.

我打算做这样的事情:

ForEach(self.lokaData.filter {
    self.searchText.isEmpty ? true : $0.contains(self.searchText)
}, id: \.self) 

但它不起作用.我错过了一些我不明白的概念.有什么想法吗?

But it's not working. I'm missing some concept that I do not understand. Any ideas, please?

谢谢！

推荐答案

您正在申请 contains 到一个 Struct，这就是为什么你会得到那个错误，你应该将它应用到 Geolokation 的属性之一，这是一个在纬度上找到匹配的例子:

You are applying contains to an Struct, that is why you are getting that error, you should apply it to one of the properties of Geolokation, here is an example finding matches on latitud:

struct MyView: View {

    @State private var lokaData = [Geolokation.init(date: "date 1", id: "0", latitude: "1010", longitude: "2020", seq_number: "1234", accuracy: ""),
                                   Geolokation.init(date: "date 2", id: "1", latitude: "1020", longitude: "2030", seq_number: "5678", accuracy: ""),
                                   Geolokation.init(date: "date 3", id: "2", latitude: "1030", longitude: "2040", seq_number: "9101", accuracy: "")]
    var body: some View {
        VStack {
            //SearchBar
            ForEach(self.lokaData.filter {
                $0.latitude.contains(self.searchText)
            }, id: \.self) { item in
                Text(item.latitude)
            }
        }
    }
}

这篇关于SwiftUI - 搜索栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！