本文價值與收獲

看完本文后，您將能夠作出下面的界面

[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