SwiftUI 搜索栏与导航栏一致

Posted

技术标签:

【中文标题】SwiftUI 搜索栏与导航栏一致【英文标题】:SwiftUI Search Bar in line with navigation bar 【发布时间】:2021-08-16 11:29:55 【问题描述】:

有没有人有工作的 Swiftui 代码,可以在导航栏中生成一个与后退按钮内联的搜索栏?就好像它是一个工具栏项一样。

目前我的代码会在导航返回按钮下方生成一个搜索栏,但希望它像附图所示的那样排列(“hi”在哪里):

我正在使用我在示例中找到的代码:

    var body: some View 

        let shopList = genShopList(receiptList: allReceipts)

        
        VStack
            
        
        .navigationBarSearch(self.$searchInput)

        
        
    
    
public extension View 
    public func navigationBarSearch(_ searchText: Binding<String>) -> some View 
        return overlay(SearchBar(text: searchText)
                        .frame(width: 0, height: 0))
    


fileprivate struct SearchBar: UIViewControllerRepresentable 
    @Binding
    var text: String
    
    init(text: Binding<String>) 
        self._text = text
    
    
    func makeUIViewController(context: Context) -> SearchBarWrapperController 
        return SearchBarWrapperController()
    
    
    func updateUIViewController(_ controller: SearchBarWrapperController, context: Context) 
        controller.searchController = context.coordinator.searchController
    
    
    func makeCoordinator() -> Coordinator 
        return Coordinator(text: $text)
    
    
    class Coordinator: NSObject, UISearchResultsUpdating 
        @Binding
        var text: String
        let searchController: UISearchController
        
        private var subscription: AnyCancellable?
        
        init(text: Binding<String>) 
            self._text = text
            self.searchController = UISearchController(searchResultsController: nil)
            
            super.init()
            
            searchController.searchResultsUpdater = self
            searchController.hidesNavigationBarDuringPresentation = true
            searchController.obscuresBackgroundDuringPresentation = false
            
            self.searchController.searchBar.text = self.text
            self.subscription = self.text.publisher.sink  _ in
                self.searchController.searchBar.text = self.text
            
        
        
        deinit 
            self.subscription?.cancel()
        
        
        func updateSearchResults(for searchController: UISearchController) 
            guard let text = searchController.searchBar.text else  return 
            self.text = text
        
    
    
    class SearchBarWrapperController: UIViewController 
        var searchController: UISearchController? 
            didSet 
                self.parent?.navigationItem.searchController = searchController
            
        
        
        override func viewWillAppear(_ animated: Bool) 
            self.parent?.navigationItem.searchController = searchController
        
        override func viewDidAppear(_ animated: Bool) 
            self.parent?.navigationItem.searchController = searchController
        
    

如果有人对此问题有解决方案,将不胜感激!我知道在 ios 15 中,他们推出了 .searchable,但也在寻找适用于早期版本的东西。

【问题讨论】:

很难理解你想要什么。你是什​​么意思'导航栏中与后退按钮内联的搜索栏?' 【参考方案1】:

您可以使用.toolbar 修饰符(iOS 14+)和带有.principal 位置的项目将任何控件放在您想要的位置,例如:

var body: some View 
  VStack 
    // rest of view
  
  .toolbar 
    ToolbarItem(placement: .principal) 
      MySearchField(text: $searchText)
    
  

有几点需要注意:

    当使用.navigationBarTitleDisplayMode(.inline) 设置或当您有一个大标题并向上滚动页面时,主要位置会覆盖内联导航标题。

    您的自定义视图可能会水平扩展太多,以至于后退按钮会丢失任何文本组件。在这里,我用了TextField来说明这一点:

您可以通过使用.frame(maxWidth:) 指定最大宽度来缓解这种情况,但至少需要注意这一点。

【讨论】:

以上是关于SwiftUI 搜索栏与导航栏一致的主要内容,如果未能解决你的问题,请参考以下文章

导航栏与状态栏

在 iOS 7 中让导航栏与状态栏重叠

让导航栏与iOS 7中的状态栏重叠

iOS:向应用程序窗口添加导航栏与状态栏冲突

如何匹配导航栏与状态栏ios7

停止导航栏与表格一起滚动