SwiftUI 教程

SwiftUI - 主页 SwiftUI - 概览 SwiftUI 与 UIkit

SwiftUI 环境

SwiftUI - 环境设置 SwiftUI - 基本组件 SwiftUI - 构建第一个应用程序

SwiftUI 视图

SwiftUI - 视图 SwiftUI - 自定义文本视图 SwiftUI - 自定义图像视图 SwiftUI - 堆栈

SwiftUI 绘制形状

SwiftUI - 形状 SwiftUI - 绘制线条 SwiftUI - 绘制矩形 SwiftUI - 绘制圆角矩形 SwiftUI - 绘制三角形 SwiftUI - 绘制圆形 SwiftUI - 绘制星形 SwiftUI - 绘制多边形 SwiftUI - 绘制饼图 SwiftUI - 使用内置形状

SwiftUI - 文本

SwiftUI - 文本视图 SwiftUI - 文本输入和输出

SwiftUI - 颜色

SwiftUI - 颜色 SwiftUI - 颜色选择器 SwiftUI - 渐变 SwiftUI - 调整颜色

SwiftUI - 效果

SwiftUI - 效果 SwiftUI - 混合效果 SwiftUI - BLur 效果 SwiftUI - 阴影效果 SwiftUI - 悬停效果

SwiftUI - 动画

SwiftUI - 动画 SwiftUI - 创建动画 SwiftUI - 创建显式动画 SwiftUI - 多个动画 SwiftUI - 过渡 SwiftUI - 不对称过渡 SwiftUI - 自定义过渡

SwiftUI - 图像

SwiftUI - 图像 SwiftUI - 图像作为背景 SwiftUI - 旋转图像 SwiftUI - 媒体

SwiftUI - 视图布局

SwiftUI - 视图布局 SwiftUI - 视图大小 SwiftUI - 视图间距 SwiftUI - 视图填充

SwiftUI - UI 控件

SwiftUI - UI 控件 SwiftUI - 按钮 SwiftUI - 复选框 SwiftUI - 菜单栏 SwiftUI - 工具栏 SwiftUI - 搜索栏 SwiftUI - 文本字段 SwiftUI - 滑块 SwiftUI - 切换 SwiftUI - 选择器 SwiftUI - 菜单

SwiftUI - 列表 &表格

SwiftUI - 列表 SwiftUI - 静态列表 SwiftUI - 动态列表 SwiftUI - 自定义列表 SwiftUI - 表格

SwiftUI - 表单

SwiftUI - 表单 SwiftUI - 在部分中拆分表单

SwiftUI - 事件处理

SwiftUI - 事件处理 SwiftUI - 手势 SwiftUI - 剪贴板 SwiftUI - 拖放 SwiftUI - 焦点 SwiftUI - 警报

SwiftUI - 杂项

SwiftUI - 容器 SwiftUI - 导航 SwiftUI - 通知 SwiftUI - 跨平台 UI SwiftUI - 数据 SwiftUI - 可访问性

SwiftUI - 框架集成

SwiftUI - 框架集成 SwiftUI - 与 UIKit 交互 SwiftUI - 创建 macOS 应用

SwiftUI 有用资源

SwiftUI - 有用资源 SwiftUI - 讨论


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

输出

搜索栏