在本章中，你将学会如何使用TextField输入框构建一个SearchBar搜索栏。
在很多App中，我们都可以看到SearchBar搜索栏的身影，比如用来搜索某条资讯，搜索某个联系人，亦或者搜索某个功能……
那么这一章节，我们就来学习下如何创建一个简答的SearchBar搜索栏。
那么，我们开始吧。
首先，创建一个新项目，命名为SwiftUISearchBar。
UI部分
我们看到SearchBar搜索栏的样式其实就是一个TextField输入框，我们在里面输入文字作为搜索条件，TextField输入框输入的内容再关联SearchBar组件，达到搜索的目的。
我们构建一个简单的SearchBarView搜索栏视图。
// SearchBarView搜索栏视图 struct SearchBarView: View { @Binding var text: String @State private var offset: CGFloat = .zero // 使用.animation防止报错，iOS15的特性 var body: some View { TextField("搜你想看的", text: $text) .padding(7) .padding(.horizontal, 25) .background(Color(.systemGray6)) .cornerRadius(8) .overlay( Image(systemName: "magnifyingglass") .foregroundColor(.gray) .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading).padding(.leading, 8) ) .padding(.horizontal, 10) } }
逻辑部分
然后，我们思考下SearchBarView搜索栏的逻辑。
当我们SearchBarView搜索栏没有输入内容时，显示的是“搜你想看的”文字，那么当我们在TextField输入内容的时候， 应该要删除placehoder文字。
我们可以定义一个TextField输入框是否正在编辑isEditing的状态，通过isEditing是否处于编辑状态来判断。
@State private var isEditing = false
当我们点击TextField输入框输入的时候，isEditing状态为true，同时
TextField输入框内部右侧会显示一个清除图标，点击清除图标可以清空我们输入的内容。
而且清除图标和TextField输入框是HStack横向排布，我们完成下交互逻辑。
//点击时 .onTapGesture { self.isEditing = true }
//编辑时显示清除按钮 if isEditing { Button(action: { self.text = "" }) { Image(systemName: "multiply.circle.fill") .foregroundColor(.gray) .padding(.trailing, 8) } }
另外，当我们isEditing是否处于编辑状态时，SearchBarView搜索栏应该右边空出一个位置，显示搜索文字按钮，点击搜索时，isEditing恢复到初始false状态。
搜索按钮和整个TextField输入框也是HStack横向排布。
// 搜索按钮 if isEditing { Button(action: { self.isEditing = false self.text = "" }) { Text("搜索") } .padding(.trailing, 10) .transition(.move(edge: .trailing)) .animation(.default, value: offset) }
我们在模拟器中预览效果。
但这里我们发现一个问题，当我们点击“搜索”按钮的时候，虽然SearchBarView搜索栏恢复初始状态了，但是keyboard键盘没有自动收下去。
我们需要额外添加一个收起keyboard键盘的方法，代码如下：
// 收起键盘 UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil,
这样，我们就实现了点击“搜索”时，清空TextField输入框文字，恢复到初始状态，并且收起keyboard键盘。
完整代码如下：
import SwiftUI struct ContentView: View { @State var text: String = "" var body: some View { VStack { SearchBarView(text: $text) .padding() Spacer() } } } struct ContentView_Previews: PreviewProvider { static var previews: some View { ContentView() } } // SearchBarView搜索栏视图 struct SearchBarView: View { @Binding var text: String @State private var isEditing = false @State private var offset: CGFloat = .zero //使用.animation防止报错，iOS15的特性 var body: some View { HStack { TextField("搜你想看的", text: $text) .padding(7) .padding(.horizontal, 25) .background(Color(.systemGray6)) .cornerRadius(8) .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) } } } ) .padding(.horizontal, 10) // 点击时 .onTapGesture { self.isEditing = true } // 搜索按钮 if isEditing { Button(action: { self.isEditing = false self.text = "" // 收起键盘 UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil) }) { Text("搜索") } .padding(.trailing, 10) .transition(.move(edge: .trailing)) .animation(.default, value: offset) } } } }
快来动手试试吧！
