删除SwiftUI中导航视图中可搜索搜索栏上方的空间

s3fp2yjn  于 2023-06-28  发布在  Swift
关注(0)|答案(1)|浏览(121)

我正在测试SwiftUI的特性.searchable()。但似乎搜索栏上面总是有一个空间。由于可搜索项是嵌入在导航栏中的,所以我将空间理解为导航栏项的位置。但是有没有办法删除这个空间,让搜索栏看起来像Instagram上的那样?我已经尝试将导航栏样式更改为内联,如下面的代码,但上面仍然有一些空间。搜索栏的位置有什么逻辑吗?

NavigationView{
    SearchView(searchText: $searchText)
        .navigationBarTitleDisplayMode(.inline) 
}
.searchable(text: $searchText, placement: .navigationBarDrawer(displayMode: .always), suggestions: {
    ForEach(searchResults, id: \.self){result in
        Text(result).searchCompletion(result)
        
    }
})

The Space Marked with Brown

kgsdhlau

kgsdhlau1#

我刚找到一种方法把它取出来。删除搜索栏上方空间的方法是避免使用内置的.searchable修饰符,而是通过创建UIViewRepresentable SwiftUI视图来使用UIKit的UISearchBar。这使您可以完全控制搜索栏的外观和行为。下面是一个如何执行此操作的示例:
首先,创建SearchBar结构:

import SwiftUI

struct SearchBar: UIViewRepresentable {
    
    @Binding var text: String
    var placeholder: String
    
    func makeUIView(context: UIViewRepresentableContext<SearchBar>) -> UISearchBar {
        let searchBar = UISearchBar(frame: .zero)
        searchBar.delegate = context.coordinator
        searchBar.searchBarStyle = .minimal
        searchBar.placeholder = placeholder
        searchBar.autocapitalizationType = .none
        return searchBar
    }
    
    func updateUIView(_ uiView: UISearchBar, context: UIViewRepresentableContext<SearchBar>) {
        uiView.text = text
    }
    
    func makeCoordinator() -> SearchBar.Coordinator {
        return Coordinator(text: $text)
    }
    
    class Coordinator: NSObject, UISearchBarDelegate {
        @Binding var text: String
        
        init(text: Binding<String>) {
            _text = text
        }
        
        func searchBar(_ searchBar: UISearchBar, textDidChange searchText: String) {
            text = searchText
        }
    }
}

然后,您可以在SwiftUI视图中使用SearchBar,如下所示:

struct ContentView: View {
    @State private var searchText = ""

    var body: some View {
        VStack {
            SearchBar(text: $searchText, placeholder: "Search")
            // Your other views here...
        }
    }
}

这将在SwiftUI视图的顶部给予一个搜索栏。

相关问题