3

我点击选择器它会打开屏幕上的元素列表，我们可以添加搜索栏吗？

我实现了国家选择器，在国家列表中我显示国家名称和国家代码，所以在该列表屏幕上添加搜索栏很容易找到国家。

struct ContentView: View {

    //All Country get from the plist with country Code and Coutnry Name.
    let countyList = Country().getAllCountyInfo()

    // Selected Country
    @State private var selectedCountry = 0

    var body: some View {


        NavigationView {
            Form {
                Picker(selection: $selectedCountry, label: Text("Country")) {

                    ForEach(countyList) { country in

                        HStack{
                            Text(country.countryName ?? "")
                            Spacer()
                            Text(country.countryCode ?? "")
                        }
                    }
                }
            }
            .navigationBarTitle("Select country picker")
        }

    }
}

在此处输入图像描述

通过运行上面的代码，它将打开一个国家列表，如上面的屏幕。

在上面的屏幕上（国家列表）。

如何添加搜索栏来过滤国家数据？

4

2 回答 2

4

是的你可以！

搜索条码：

    struct SearchBar: View {
    @Binding var text: String
    @State var isEditing: Bool = false
    @ObservedObject var vc = VC()
    var body: some View {
        HStack {
            TextField("Search Countries", text: $text)
                .padding(7)
                .padding(.horizontal, 25)
                .background(Vc.color2)
                .cornerRadius(8)
                .overlay(
                    HStack {
                        Image(systemName: "magnifyingglass")
                            .foregroundColor(.gray)
                            .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
                            .padding(.leading, 8)
                        if isEditing {
                            Button(action: {
                                self.text = ""
                            }) {
                                Image(systemName: "multiply.circle.fill")
                                    .foregroundColor(.gray)
                                    .padding(.trailing, 8)
                            }
                        }
                    }
                )
                .padding(.horizontal, 10)
                .onTapGesture {
                    self.isEditing = true
                }
            if isEditing {
                Button(action: {
                    UIApplication.shared.endEditing(true)
                    self.isEditing = false
                    self.text = ""
                }) {
                    Text("Cancel")
                }
                .padding(.trailing, 10)
                .transition(.move(edge: .trailing))
                .animation(.default)
            }
        }
    }
}
extension UIApplication {
    func endEditing(_ force: Bool) {
        self.windows
            .filter{$0.isKeyWindow}
            .first?
            .endEditing(force)
    }
}
struct ResignKeyboardOnDragGesture: ViewModifier {
    var gesture = DragGesture().onChanged{_ in
        UIApplication.shared.endEditing(true)
    }
    func body(content: Content) -> some View {
        content.gesture(gesture)
    }
}
extension View {
    func resignKeyboardOnDragGesture() -> some View {
        return modifier(ResignKeyboardOnDragGesture())
    }
}

带搜索栏的选择器：

  struct locc: View {
    @State var locationsSelection: [String] = //Your Array
    @State var searchText = ""
    @State var locationSelection: Int = 0
    var body: some View {
        Picker(selection: $locationSelection, label: Text("Country")) {
            SearchBar(text: $searchText)
            if self.searchText != "" {
                ForEach(0..<locationsSelection.filter{$0.hasPrefix(searchText)}.count) {
                    Text(locationsSelection.filter{$0.hasPrefix(searchText)}[$0]).tag($0)
                }.resignKeyboardOnDragGesture()
            }else if self.searchText == "" {
                ForEach(0..<locationsSelection.count) {
                    Text(locationsSelection[$0]).tag($0)
                }.resignKeyboardOnDragGesture()
            }
        }
    }
}

注意：我在另一个包含表单的视图中使用 locc 结构。

于 2020-08-31T15:57:28.047 回答
2

我在这里的博客文章中解决了这个问题：https ://roddy.io/2020/09/07/add-search-bar-to-swiftui-picker/

创建UIViewRepresentable：

struct SearchBar: UIViewRepresentable {

    @Binding var text: String
    var placeholder: String

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

        searchBar.placeholder = placeholder
        searchBar.autocapitalizationType = .none
        searchBar.searchBarStyle = .minimal
        return searchBar
    }

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

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

    class Coordinator: NSObject, UISearchBarDelegate {

        @Binding var text: String

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

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

然后很容易将其嵌入您的Picker：

struct FormView: View {

    let countries = ["Brazil", "Canada", "Egypt", "France", "Germany", "United Kingdom"]

    @State private var pickerSelection: String = ""
    @State private var searchTerm: String = ""
    
    var filteredCountries: [String] {
        countries.filter {
            searchTerm.isEmpty ? true : $0.lowercased().contains(searchTerm.lowercased())
        }
    }

    var body: some View {
        NavigationView {
            Form {
                Picker(selection: $pickerSelection, label: Text("")) {
                    SearchBar(text: $searchTerm, placeholder: "Search Countries")
                    ForEach(filteredCountries, id: \.self) { country in
                        Text(country).tag(country)
                    }
                }
            }
        }
    }
}
于 2020-12-06T01:16:09.360 回答