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 搜索栏与导航栏一致的主要内容,如果未能解决你的问题,请参考以下文章