如何在 SwiftUI 中制作下拉搜索栏

Question

I want to make a pull down search bar in my app using SwiftUI and have to be compatible with iOS13, so I couldn't use ScrollViewReader. I tried using Introspect , but I didn't understand what it does and how it works, because the documentation doesn't explain how to do stuff for ScrollView other than pull down to refresh. I used introspect for TextField to become and resign FirstResponder, and it works, but when I use introspect for scrollview, the function only runs when the scroll view first appeared.

@State private var willSearch = false

...

.introspectTextField{ textfield in
    textfield.returnKeyType = .done
    if willSearch {
        textfield.becomeFirstResponder()
    }else{
        textfield.resignFirstResponder()
    }
}
// this works when `willSearch` changed value

This is how my ScrollView introspection looks like

extension UIScrollView {
    var isBouncing: Bool {
        return (contentOffset.y + contentInset.top < 0)
    }
}

...

.introspectScrollView { scroll in
    if scroll.isDragging{
        self.willSearch = scroll.isBouncing;
    }
}
// this doesn't work

I also tried detecting scroll by following this suggestion , but it's not very effective, and I can hear my MacBook fan spinning louder than normal, so it probably will impact the performance.

This is roughly how I want it to behave Pull down search bar as seen in Telegram

Answer 1

I prefer to use UIKit to implement inapp navigation and only use SwiftUI to build screen UI. So I work with UIHostingController + UINavigationController and can easily integrate UISearchController . For example like this:

import UIKit
import SwiftUI

class ViewController: UIHostingController<Content>, UISearchResultsUpdating {

    private let viewModel = ViewModel()

    init() {
        super.init(rootView: Content(viewModel: viewModel))
        title = "Test"
    }

    @objc required dynamic init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        let searchController = UISearchController(searchResultsController: nil)
        searchController.searchResultsUpdater = self
        self.navigationItem.searchController = searchController
        navigationController?.view.setNeedsLayout() // this is needed for iOS 13 only
    }

    func updateSearchResults(for searchController: UISearchController) {
        viewModel.searchDidChange(searchController.searchBar.text ?? "")
    }

}

struct Content: View {
    @ObservedObject var viewModel: ViewModel
    var body: some View {
        ScrollView {
            VStack {
                ForEach(viewModel.items, id: \.self) { item in
                    Text(item)
                        .frame(maxWidth: .infinity)
                }
            }
        }
    }
}

class ViewModel: ObservableObject {
    @Published var items: [String]
    private let allItems: [String]
    init() {
        self.allItems = (0..<100).map { "\($0)" }
        self.items = allItems
    }

    func searchDidChange(_ text: String) {
        items = allItems.filter {
            $0.starts(with: text)
        }
    }
}

WARNING: you have to disable Main.storyboard ( https://sarunw.com/posts/how-to-create-new-xcode-project-without-storyboard/ ) and load root controller manually. For example like this:

import UIKit

class SceneDelegate: UIResponder, UIWindowSceneDelegate {

    var window: UIWindow?

    func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        guard let scene = (scene as? UIWindowScene) else { return }
        let window = UIWindow(windowScene: scene)
        window.rootViewController = UINavigationController(rootViewController: ViewController())
        window.makeKeyAndVisible()
        self.window = window
    }

}