如何在 SwiftUI 中滚动时隐藏 SearchBar？

Question

我正在尝试在我的应用中隐藏搜索栏，就像 Apple 在他们的消息应用中所做的那样：

我已经在 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 中实现隐藏和隐藏动画？

Answer 1

SwiftUI 3.0 (iOS 15.0+)

Apple 以非常原生的方式使之成为可能。

您只需将.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) {
    // ...
}

附言您可以在this swift.org article中了解更多关于计算变量和属性的信息