SwiftUI极简教程23:创建一个简单的SearchBar搜索栏

一起养成写作习惯！这是我参与「日新方案 4 月更文挑战」的第23天，点击查看活动概况。

今天职言：能够享用最好的，也要能够接受最差的。

在本章中，你将学会怎么运用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, from: nil, for: 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)
}
}
}
}

快来着手试试吧！

如果本专栏对你有协助，无妨点赞、谈论、重视～