SwiftUI如何做个原生SearchBar搜索框(不用UIKit)

本文价值与收获

看完本文后，您将能够作出下面的界面

[email protected]

Jietu20200519-232742.gif

看完本文您将掌握的技能

• 管理一组TextField
• 使用ScrollView
• 设置圆形TextField

代码

import SwiftUI

struct ContentView: View {
    
    let djs = [
        "SwiftUI",
        "原生SearchBar",
        "不",
        "用",
        "UIKit",
       
    ]
    
    @State private var searchTerm : String = ""
    
    var body: some View {
        NavigationView{
            List {
                SearchBar(searchText: $searchTerm)
                ForEach(self.djs.filter {
                    self.searchTerm.isEmpty ? true :
                        $0.localizedCaseInsensitiveContains(self.searchTerm) },
                        id: \.self) { name in
                            Text(name)
                }
            }
            .navigationBarTitle(Text("原生搜索条"))
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

struct SearchBar : View {
    @Binding var searchText: String
    
    var body: some View {
        HStack {
            Image(systemName: "magnifyingglass")
                .padding(.leading, -10)
                .foregroundColor(.secondary)
            TextField("Search", text: $searchText) {
                UIApplication.shared.windows.first { $0.isKeyWindow }?.endEditing(true)
            }
            .padding(.leading, 10)
            Button(action: {
                self.searchText = ""
            }) {
                Image(systemName: "xmark.circle.fill")
                    .foregroundColor(.secondary)
                    .opacity(searchText == "" ? 0 : 1)
            }
        }.padding(.horizontal)
    }
}

推荐

基础文章推荐

• 《SwiftUI是什么，听听大牛们如何说》

经典教程推荐

• onevcat 大神的《SwiftUI 与 Combine 编程》
• 更新近百篇SwiftUI教程《SwiftUI2020教程》
• 帮您突破数据存储难关《SwiftUI vs CoreData数据存储解决方案》

技术源码推荐

推荐文章

CoreData篇

• SwiftUI数据存储之做个笔记App 新增与查询(CoreData)
• SwiftUI进阶之存储用户状态实现登录与登出
• SwiftUI 数据之List显示Sqlite数据库内容（2020年教程）

TextField篇

• 《SwiftUI 一篇文章全面掌握TextField文本框 (教程和全部源码)》
• 《SwiftUI实战之TextField风格自定义与formatters》
• 《SwiftUI实战之TextField如何给键盘增加个返回按钮(隐藏键盘)》
• 《SwiftUI 当键盘出现时避免TextField被遮挡自动向上移动》
• 《SwiftUI实战之TextField如何给键盘增加个返回按钮(隐藏键盘)》

JSON文件篇

• SwiftUI JSON文件下载、存储、解析和展示(代码大全)

---

一篇文章系列

• SwiftUI一篇文章全面掌握List(教程和源码)
• 《SwiftUI 一篇文章全面掌握TextField文本框 (教程和全部源码)》
• SwiftUI一篇文章全面掌握Picker,解决数据选择(教程和源码)
• SwiftUI一篇文章全面掌握Form(教程和源码)
• SwiftUI Color 颜色一篇文章全解决

技术交流

QQ:3365059189
SwiftUI技术交流QQ群:518696470

• 请关注我的专栏icloudend, SwiftUI教程与源码
  https://www.jianshu.com/c/7b3e3b671970