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() }
输出
