SwiftUI - 搜索栏

搜索栏是 SwiftUI 中一个特殊的 UI 控件;它提供了一个界面，用户可以在其中编写查询来搜索给定应用程序中的任何信息或数据。它包括一个文本字段，用户可以在其中编写查询和一些其他元素，如图标，以及一个清除或取消按钮。它是所有 Apple 平台(如 macOS、iOS、watchOS、iPad 等)中最常用的控件。

它通常用于从大量数据中查找某些数据或应用程序、导航、数据检索等，例如，在联系人应用程序中，我们使用搜索栏通过输入姓名的首字母来快速找到人员姓名。

在 SwiftUI 中创建搜索栏

在 SwiftUI 中，我们可以借助 searchable() 修饰符创建搜索栏。此修饰符用于使指定的视图可搜索。表示使用此修饰符，我们可以在可搜索字段中创建一个可文本字段。

语法

以下是语法 −

Searchable(
text: BindingVariable,
placement: SearchFieldPlacement,
prompt: String) -> some View

参数

此视图使用以下参数 −

• text:表示将在搜索字段中显示或编辑的文本。

• placement:表示搜索字段在容器视图中的位置。默认情况下，它的值是自动的，但我们可以将其设置为navigationBarDrawer，sidebar或toolbar。

• prompt:引导用户搜索什么或显示与搜索相关的数据。

示例1

以下SwiftUI程序创建了一个简单的搜索栏。

import SwiftUI
struct ContentView: View {
   @State private var searchData: String = ""   
   var body: some View {
      NavigationStack{
         Text("Searching data:\(searchData)")
            .navigationTitle("Search Here")
      }.searchable(text: $searchData).foregroundStyle(.red)
   }
}
#Preview {
   ContentView()
}   

输出

示例 2

以下 SwiftUI 程序创建了一个搜索栏。在这里，我们将创建一个包含表单列表中显示的建议的搜索栏。现在，使用此搜索栏，我们可以轻松搜索指定的编程语言。

import SwiftUI
struct ProgrammingLanguage: Identifiable {
   let id = UUID()
   let name: String
}
struct ContentView: View {
   @State private var searchData: String = ""
   
   let lang: [ProgrammingLanguage] = [
      ProgrammingLanguage(name: "C"),
      ProgrammingLanguage(name: "C++"),
      ProgrammingLanguage(name: "Java"),
      ProgrammingLanguage(name: "Python"),
      ProgrammingLanguage(name: "C#"),
      ProgrammingLanguage(name: "Swift"),
      ProgrammingLanguage(name: "Go"),
      ProgrammingLanguage(name: "Ruby"),
      ProgrammingLanguage(name: "Scala"),
      ProgrammingLanguage(name: "JavaScript"),
      ProgrammingLanguage(name: "JQuery"),
      ProgrammingLanguage(name: "Objective-C")
   ]   
   var body: some View {
      NavigationStack {
         List {
            ForEach(lang.filter { searchData.isEmpty || $0.name.localizedCaseInsensitiveContains(searchData) }) { language in
               Text(language.name)
            }
         }.navigationTitle("Programming Languages")
      }.searchable(text: $searchData)
   }
}
#Preview {
   ContentView()
}   

输出