머리말
Search
이 장에서는 목록 검색 및 TabView
하단 탐색 을 위한 검색을 작성 하는 방법을 배웁니다 .
이전 챕터 에서 간단한 ColourAtla
컬러 카드 앱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
검색 방법
색상 이름 검색 의 상호 작용 을 구현 하려면 목록에서 색상 견본 을 검색하는 방법 을 제공해야 합니다. 예시:
// 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()
}
}
上述代码中,我们在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)
})
}
上述代码中,我们创建了两个视图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
主视图中呈现。
我们预览下效果:
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
选中颜色。
我们预览下效果:
我们把之前章节完成的MineView
我的视图也换到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))
}
}
위의 코드 에서 수정자를 Image
사용하여 로드된 아이콘을 만들고 상태에 따라 회전합니다.rotationEffect
show
로드 방법
로딩 아이콘을 회전 시키려면 1초마다 상태 doAnimation
를 전환 하는 메서드를 만듭니다 .show
func doAnimation() {
withAnimation(Animation.easeInOut(duration: 1).repeatForever(autoreverses: true)) {
show.toggle()
}
}
완료 Image
되면 프레젠테이션할 때 호출 하는 메서드 doAnimation
입니다.
마지막으로 원본을 ContentView
로 바꾸고 효과를 확인합니다.LoadingView
ProgressView
프로젝트 미리보기
와서 사용해 보세요!
이 칼럼이 도움이 되셨다면 좋아요, 댓글, 팔로우 부탁드립니다~
Nuggets Technology Community의 작성자 서명 프로그램 모집에 참여하고 있습니다. 링크를 클릭하여 등록하고 제출 하십시오.