如何在SwiftUI中滚动时隐藏搜索栏？

Question

我正在尝试像苹果在他们的消息应用程序中所做的那样隐藏我的应用程序中的搜索栏:

我已经在SwiftUI中实现了UISearchBar：

struct SearchBar: UIViewRepresentable {
@Binding var text: String

class Coordinator: NSObject, UISearchBarDelegate {
    @Binding var text: String

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

    func 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.searchBarStyle = .minimal
    searchBar.placeholder = "Поиск по названию, дедлайну или описанию"
    return searchBar
}

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

我如何在SwiftUI中实现隐藏和隐藏动画？

- alexandrov

---

你找到方法了吗？ - jberlana

它可以帮助您在SwiftUI中向NavigationView添加搜索栏。 - Argas

Answer 1

SwiftUI 3.0 (iOS 15.0+)

苹果通过非常本地化的方式实现了这一点。

您只需要使用.searchable()修改器来将您想要使其可搜索的视图，并确保您的视图具有NavigationView作为父视图。

示例

struct CountriesView: View {
    let countries = ["United States", "India", "Ukraine", "Russia", "Sweden"]
    @State var search: String = ""

    var body: some View {
        NavigationView {
            List(countries.filter({
                // we filter our country list by checking whether country name
                // does contain search string or not
                $0.lowercased().contains(search.lowercased()) 
           })) { country in
                Text(country)
            }.searchable(text: $search)
        }
    }
}

顺便提一句，你可以使用计算属性以更加方便的方式过滤数组。

那么，该示例中用于筛选的计算属性将为：

var searchResults: [String] {
   return countries.filter({$0.lowercased().contains(search.lowercased())})
}

所以，List看起来是这样的：

List(searchResults) {
    // ...
}

p.s. 你可以在Swift官网的这篇文章中了解更多关于计算属性的变量和属性。

- alexandrov