在本机“设置”应用中,其中有一个NavigationView
,其中带有TextField
,可随着用户滚动而很好地过渡:
我能够使用以下方法创建类似内容:
struct HomeView: View {
@State var searchQuery: String = ""
var body: some View {
NavigationView {
List {
TextField("Search", text: $searchQuery).textFieldStyle(RoundedBorderTextFieldStyle())
}
.navigationBarTitle(Text("My App"))
}
}
}
这给了我这个
但是,它的外观或功能与本机设置实际上并不相同,我甚至不知道如何在其中获得搜索图标。非常感谢!
答案 0 :(得分:3)
您试图在SwiftUI中创建的将是swift的UIKit中的UISearchBar。
所以您需要样式化文本字段
TextField("Search ...", text: $text)
.padding(7)
.padding(.horizontal, 25)
.background(Color(.systemGray6))
.cornerRadius(8)
.padding(.horizontal, 10)
.onTapGesture {
self.isEditing = true
}
然后为了实现放大镜图标,这是UISearchBar项目的标准配置。我们需要在SwiftUI中使用叠加手动添加它们
.overlay(
HStack {
Image(systemName: "magnifyingglass")
.foregroundColor(.gray)
.frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
.padding(.leading, 8)
if isEditing {
Button(action: {
self.text = ""
}) {
Image(systemName: "multiply.circle.fill")
.foregroundColor(.gray)
.padding(.trailing, 8)
}
}
}
)
您可以参考本文以了解更多https://www.appcoda.com/swiftui-search-bar/