如何使用SwiftUI显示搜索栏

Question

新的SwiftUI框架似乎未提供内置的搜索栏组件。我应该使用UISearchController并以某种方式包装它，还是应该使用简单的文本字段并根据文本字段输入更新数据？

编辑：当前的解决方法是使用文本字段作为searchBar。运作良好，但没有搜寻图示

    import SwiftUI

    struct Search : View {

      let array = ["John","Lena","Steve","Chris","Catalina"]

      @State private var searchText = ""

      var body: some View {


          NavigationView{
            List{
                TextField("Type your search",text: $searchText)
                    .textFieldStyle(RoundedBorderTextFieldStyle())

                ForEach(array.filter{$0.hasPrefix(searchText) || searchText == ""}, id:\.self){searchText in
                    Text(searchText)
                }
            }
            .navigationBarTitle(Text("Search"))
        }


      }
    }

    struct Search_Previews : PreviewProvider {
      static var previews: some View {
        Search()
      }
    }

更新为可与Xcode 11.1一起使用

Answer 1

通过包装 UINavigationController，可以在 SwiftUI 中正确实现本机搜索栏。

这种方法为我们提供了实现所有预期行为的优势，包括滚动时自动隐藏/显示、清除和取消按钮以及键盘中的搜索键等。

为 Search Bar 包装 UINavigationController 还可以确保 Apple 对它们所做的任何新更改都会在您的项目中自动采用。

示例输出

单击此处查看实际执行情况

代码（包装 UINavigationController）：

import SwiftUI

struct SearchNavigation<Content: View>: UIViewControllerRepresentable {
    @Binding var text: String
    var search: () -> Void
    var cancel: () -> Void
    var content: () -> Content

    func makeUIViewController(context: Context) -> UINavigationController {
        let navigationController = UINavigationController(rootViewController: context.coordinator.rootViewController)
        navigationController.navigationBar.prefersLargeTitles = true
        
        context.coordinator.searchController.searchBar.delegate = context.coordinator
        
        return navigationController
    }
    
    func updateUIViewController(_ uiViewController: UINavigationController, context: Context) {
        context.coordinator.update(content: content())
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator(content: content(), searchText: $text, searchAction: search, cancelAction: cancel)
    }
    
    class Coordinator: NSObject, UISearchBarDelegate {
        @Binding var text: String
        let rootViewController: UIHostingController<Content>
        let searchController = UISearchController(searchResultsController: nil)
        var search: () -> Void
        var cancel: () -> Void
        
        init(content: Content, searchText: Binding<String>, searchAction: @escaping () -> Void, cancelAction: @escaping () -> Void) {
            rootViewController = UIHostingController(rootView: content)
            searchController.searchBar.autocapitalizationType = .none
            searchController.obscuresBackgroundDuringPresentation = false
            rootViewController.navigationItem.searchController = searchController
            
            _text = searchText
            search = searchAction
            cancel = cancelAction
        }
        
        func update(content: Content) {
            rootViewController.rootView = content
            rootViewController.view.setNeedsDisplay()
        }
        
        func searchBar(_ searchBar: UISearchBar, textDidChange searchText: String) {
            text = searchText
        }
        
        func searchBarSearchButtonClicked(_ searchBar: UISearchBar) {
            search()
        }
        
        func searchBarCancelButtonClicked(_ searchBar: UISearchBar) {
            cancel()
        }
    }
    
}

上面的代码可以按原样使用（当然也可以修改以适应项目的特定需求）。

该视图包括用于“搜索”和“取消”的操作，当在键盘上轻敲搜索键和按下搜索栏的取消按钮时分别调用它们。该视图还包括一个 SwiftUI 视图作为尾随闭包，因此可以直接替换 NavigationView。

用法（在 SwiftUI 视图中）：

import SwiftUI

struct YourView: View {
    // Search string to use in the search bar
    @State var searchString = ""
    
    // Search action. Called when search key pressed on keyboard
    func search() {
    }
    
    // Cancel action. Called when cancel button of search bar pressed
    func cancel() {
    }
    
    // View body
    var body: some View {
        // Search Navigation. Can be used like a normal SwiftUI NavigationView.
        SearchNavigation(text: $searchString, search: search, cancel: cancel) {
            // Example SwiftUI View
            List(dataArray) { data in
                Text(data.text)
            }
            .navigationBarTitle("Usage Example")
        }
        .edgesIgnoringSafeArea(.top)
    }
}

我也写了一篇关于这个的文章，可以参考它以获得额外的澄清。

我希望这会有所帮助，干杯！

Answer 2

这是一个纯粹的swiftUI版本，基于Antoine Weber对上述问题的回答以及我在本博客和本要点中发现的内容。它包含

• 一个清晰的按钮，
• 取消按钮，
• 在拖动列表时退出键盘，然后
• 选择搜索文本字段时隐藏导航视图。

遵循这些答案，可以使用UIApplication窗口上的方法在拖动列表中退出键盘。为了更易于处理，我在UIApplication上创建了一个扩展，并为此扩展了view修饰符，最后创建了View的扩展：

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

因此，用于退出键盘的最后一个修饰符只是一个必须像这样放置在列表中的修饰符：

List {
    ForEach(...) {
        //...
    }
}
.resignKeyboardOnDragGesture()

带有名称示例列表的搜索栏的完整swiftUI项目代码如下。您可以将其粘贴到新的swiftUI项目的ContentView.swift中并进行操作。

import SwiftUI

struct ContentView: View {
    let array = ["Peter", "Paul", "Mary", "Anna-Lena", "George", "John", "Greg", "Thomas", "Robert", "Bernie", "Mike", "Benno", "Hugo", "Miles", "Michael", "Mikel", "Tim", "Tom", "Lottie", "Lorrie", "Barbara"]
    @State private var searchText = ""
    @State private var showCancelButton: Bool = false

    var body: some View {

        NavigationView {
            VStack {
                // Search view
                HStack {
                    HStack {
                        Image(systemName: "magnifyingglass")

                        TextField("search", text: $searchText, onEditingChanged: { isEditing in
                            self.showCancelButton = true
                        }, onCommit: {
                            print("onCommit")
                        }).foregroundColor(.primary)

                        Button(action: {
                            self.searchText = ""
                        }) {
                            Image(systemName: "xmark.circle.fill").opacity(searchText == "" ? 0 : 1)
                        }
                    }
                    .padding(EdgeInsets(top: 8, leading: 6, bottom: 8, trailing: 6))
                    .foregroundColor(.secondary)
                    .background(Color(.secondarySystemBackground))
                    .cornerRadius(10.0)

                    if showCancelButton  {
                        Button("Cancel") {
                                UIApplication.shared.endEditing(true) // this must be placed before the other commands here
                                self.searchText = ""
                                self.showCancelButton = false
                        }
                        .foregroundColor(Color(.systemBlue))
                    }
                }
                .padding(.horizontal)
                .navigationBarHidden(showCancelButton) // .animation(.default) // animation does not work properly

                List {
                    // Filtered list of names
                    ForEach(array.filter{$0.hasPrefix(searchText) || searchText == ""}, id:\.self) {
                        searchText in Text(searchText)
                    }
                }
                .navigationBarTitle(Text("Search"))
                .resignKeyboardOnDragGesture()
            }
        }
    }
}



struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
           ContentView()
              .environment(\.colorScheme, .light)

           ContentView()
              .environment(\.colorScheme, .dark)
        }
    }
}

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

最初显示时，搜索栏的最终结果如下所示

并按以下方式编辑搜索栏时：

在行动中：

Answer 3

iOS 15.0+

macOS 12.0+、Mac Catalyst 15.0+、tvOS 15.0+、watchOS 8.0+

searchable(_:text:placement:)

将此视图标记为可搜索，这将配置搜索字段的显示。https://developer.apple.com/

struct DestinationPageView: View {
    @State private var text = ""
    var body: some View {
      NavigationView {
        PrimaryView()
        SecondaryView()
        Text("Select a primary and secondary item")
     }
     .searchable(text: $text)
  }
}

观看此 WWDC 视频了解更多信息

在 SwiftUI 中打造搜索体验

Answer 4

该YouTube 视频显示了如何完成此操作。归结为：

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() -> SearchBar.Coordinator {
        return Coordinator(text: $text)
    }

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

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

然后代替

TextField($searchText)
              .textFieldStyle(.roundedBorder)

你用

SearchBar(text: $searchText)

Answer 5

我迟到了。但看起来你可以使用

searchable(text: $searchText, placement: .navigationBarDrawer(displayMode: .always), prompt: "Search")

当您向下滚动时， displayMode.always将确保它坚持到 t0p