前言

在本章中，你将学会构建Search查找进行列表查找和TabView底部导航。

在上一章节中，咱们完结了一个简单的ColourAtla色卡App，接下来咱们继续完善App的相关内容。

SearchBar查找栏

首先是SearchBar查找栏，查找栏的作用是依据列表的内容进行检索，找出咱们需要的色卡。

咱们运用TextField输入框来构建SearchBar查找栏，咱们先声明一个变量来存储咱们的查找内容。示例：

@State var search = ""

然后构建SearchBar查找栏的款式。示例：

// MARK: 查找
private var SearchBarView: some View {
TextField("查找色彩值", text: $search)
.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，运用TextField输入框作为查找栏，然后绑定search内容，然后运用润饰符完善了SearchBar查找栏的款式。咱们先替换原有的CardTitleView看看作用：

SwiftUI极简教程40:构建SearchBar搜索栏和TabView底部导航

查找办法

为了完结查找色彩名称的交互，咱们需要供给一个办法，查找列表中的色卡。示例：

// MARK: 查找色彩办法
func searchColor() {
let query = search.lowercased()
DispatchQueue.global(qos: .background).async {
let filter = cardItems.filter { $0.cardColorRBG.lowercased().contains(query) }
DispatchQueue.main.async {
withAnimation(.spring()) {
self.cardItems = filter
}
}
}
}

上述代码中，咱们创立了一个查找色彩的办法searchColor，通过依据查找文字内容search，查找cardItems色卡数组中的cardColorRBG卡片色彩值参数，如果匹配成功，就在cardItems色卡数组中找到并展现这个色彩。

咱们在SearchBarView视图中，当咱们TextField输入框内容变化时调用这个办法。示例：

.onChange(of: search) { _ in
 if search != "" {
  searchColor()
 } else {
  search = ""
  getColors()
 }
}

SwiftUI极简教程40:构建SearchBar搜索栏和TabView底部导航

上述代码中，咱们在TextField输入框查找内容search变量改动时，且search输入内容不为空时调用searchColor查找色彩的办法，当search输入内容为空时，又从头调用getColors获取色彩的办法，这样，咱们就完结了查找色彩值的交互。

查找栏切换

接下来，咱们来完结标题栏和查找栏的切换。

咱们尝试在标题栏右侧参加一个查找图标，点击查找图标切换到查找栏，在查找栏输入框右侧也添加一个撤销按钮，点击撤销又回到标题栏中。

先声明一个存储变量showSearchBar用于判别切换状况。

@State var showSearchBar = false

然后构建查找按钮的款式和撤销按钮的款式。示例：

// MARK: 查找icon
private var SearchButtonView: some View {
Button(action: {
withAnimation(.easeOut) {
showSearchBar.toggle()
}
}, label: {
Image(systemName: "magnifyingglass")
.font(.system(size: 20, weight: .bold))
.foregroundColor(.gray)
})
}
// MARK: 撤销按钮
private var CloseButtonView: some View {
Button(action: {
withAnimation(.easeOut) {
search = ""
getColors()
showSearchBar.toggle()
}
}, label: {
Text("撤销")
.foregroundColor(.gray)
})
}

SwiftUI极简教程40:构建SearchBar搜索栏和TabView底部导航

上述代码中，咱们创立了两个视图SearchButtonView和CloseButtonView。

在SearchButtonView视图中，咱们运用体系查找图标做一个查找按钮操作，点击时更改showSearchBar的状况。

在CloseButtonView视图中，咱们运用文字按钮做一个撤销按钮的操作，点击时清空输入框的内容search，而且更改showSearchBar的状况，同时调用getColors获取色彩的办法。

完结这些后，咱们进行款式的组装，示例：

// MARK: 查找切换
private var SwitchSearchBar: some View {
HStack(spacing: 20) {
if showSearchBar {
SearchBarView
CloseButtonView
} else {
CardTitleView
Spacer()
SearchButtonView
}
}
.padding(.top, 20)
.padding(.bottom, 10)
.padding(.horizontal)
.zIndex(1)
}

上述代码中，咱们构建了一个新的视图SwitchSearchBar。

在SwitchSearchBar视图中，咱们依据showSearchBar的状况切换展现查找栏还是标题栏的内容，并把SwitchSearchBar视图在ContentView主视图中呈现。

咱们预览下作用：

SwiftUI极简教程40:构建SearchBar搜索栏和TabView底部导航

TabView底部导航

咱们创立一个新的SwiftUI文件，命名为TabberView。

struct TabberView: View {
@State private var selectedTab = 0
var body: some View {
TabView(selection: $selectedTab) {
ContentView()
.tabItem {
if self.selectedTab == 0 {
Image(systemName: "house")
} else {
Image(systemName: "house.fill")
}
Text("首页")
}
.tag(0)
Text("我的")
.tabItem {
if self.selectedTab == 1 {
Image(systemName: "person")
} else {
Image(systemName: "person.fill")
}
Text("我的")
}
.tag(1)
}
.accentColor(Color.Hex(0x409EFF))
}
}

上述代码中，咱们运用TabView来构建底部导航。

咱们声明一个变量selectedTab来跟踪当时选中的是哪一个菜单，然后在TabView中绑定selectedTab的值。咱们运用tabItem润饰符来显现当时菜单的内容，而且依据selectedTab选中的状况润饰底部菜单的图标和文字。

最后咱们给选中的菜单加上accentColor选中色彩。

咱们预览下作用：

SwiftUI极简教程40:构建SearchBar搜索栏和TabView底部导航

咱们把之前章节完结的MineView我的视图也换到TabView底部菜单中，预览看下作用：

SwiftUI极简教程40:构建SearchBar搜索栏和TabView底部导航

LoadingView加载动画

加载款式

之前咱们运用ProgressView作为加载中的缺省动画，作为一个ColourAtla色卡App，运用ProgressView作为加载动画，这不行高雅。

咱们能够运用SwiftUI官方的rotationEffect润饰符构建一个加载动画，先创立一个新的SwiftUI文件，命名为LoadingView。

首先声明一个变量存储旋转状况，然后构建一个旋转的图片icon。

import SwiftUI
struct LoadingView: View {
@State var show: Bool = false
var body: some View {
Image(systemName: "sun.min.fill")
.resizable()
.foregroundColor(Color.Hex(0xFAD0C4))
.aspectRatio(contentMode: .fit)
.frame(width: 60, height: 60)
.rotationEffect(.degrees(show ? 360 : 0))
}
}

SwiftUI极简教程40:构建SearchBar搜索栏和TabView底部导航

上述代码中，咱们运用Image构建了一个加载的图标，然后运用rotationEffect润饰符依据show的状况进行旋转。

加载办法

为了让加载图标循环旋转，咱们创立一个办法doAnimation让show的状况每1秒切换1次。

func doAnimation() {
withAnimation(Animation.easeInOut(duration: 1).repeatForever(autoreverses: true)) {
show.toggle()
}
}

完结后，咱们在Image展现时调用doAnimation的办法。

SwiftUI极简教程40:构建SearchBar搜索栏和TabView底部导航

最后，咱们在ContentView用LoadingView替换原来的ProgressView，然后查看下作用：

SwiftUI极简教程40:构建SearchBar搜索栏和TabView底部导航

项目预览

SwiftUI极简教程40:构建SearchBar搜索栏和TabView底部导航

快来动手试试吧！

如果本专栏对你有帮助，不妨点赞、谈论、关注～

我正在参加技能社区创作者签约计划招募活动，点击链接报名投稿。