- Published on
Search in SwiftUI
- Authors
- Name
App中经常有搜索的需求，在 SwiftUI 中，系统给我们提供了搜索的标准集成方案。今天我们来学习一下：
Overview
想要在 App 中展示一个搜索栏，首先需要创建和管理用存储搜索文本的变量，并且可以选择性存储称为 tokens 的离散搜索词。然后，通过在应用中的某个视图上应用 searchable 修饰符，将这些存储与搜索栏进行绑定。
我帮你把这段话翻译一下，同样保持技术文档风格：
当用户与搜索框交互时，他们实际上是在间接修改底层存储，从而改变搜索参数。你的应用会相应地更新界面的其他部分。 为了增强搜索体验，你还可以：
- 在搜索过程中提供建议（既可以针对输入的文本，也可以针对 tokens）。
- 实现搜索范围（search scopes），帮助用户缩小搜索空间。
- 检测用户何时激活搜索框，并通过环境值以编程方式关闭搜索框。
Best practices
- 显示能够描述可搜索信息类型的占位符文本。例如，Apple TV 应用的占位符文本是 “节目、电影及更多”。避免使用 “搜索” 之类的词作为占位符，因为它并没有提供有用的信息。
- 如果可能，当用户开始输入时就立即启动搜索。在输入过程中就执行搜索，会让搜索体验更灵敏，因为随着文本越来越具体，结果也会被不断优化。
- 在搜索开始之前，或用户输入时，考虑显示一些建议的搜索词。这能通过推荐常见搜索，让用户更快找到想要的内容，即使搜索本身还没有真正开始。
- 简化搜索结果。优先展示最相关的搜索结果，减少用户需要滚动才能找到目标的情况。除了将最有可能的结果排在前面之外，还可以对结果进行分类，帮助用户更快地定位。
- 考虑让用户对搜索结果进行筛选。例如，你可以在搜索结果区域中加入 范围控制（scope control），帮助用户快速、轻松地过滤结果。
Scope control
- 使用 范围控制（scope control） 在清晰定义的搜索类别之间进行筛选。范围控制可以帮助用户从更广的范围逐步缩小到更具体的范围。例如，在 iPhone 的邮件应用中，范围控制能让用户从搜索整个邮箱转到只搜索当前正在查看的邮箱。开发者指导可参考 Scoping a search operation。
- 默认使用较广的范围，并让用户在需要时自行缩小。较广的范围能提供完整结果集的上下文信息，这有助于在用户选择缩小范围时提供有用的引导。
- 使用 tokens 根据常见的搜索词或项目进行过滤。当你定义了一个 token，它所代表的术语会以一种封装的视觉样式呈现，表示用户可以将其作为单一项目来选择和编辑。Tokens 可以帮助澄清搜索条件，例如在邮件中按特定联系人过滤，或在信息中按照片过滤，从而将搜索聚焦到特定属性集。与此相关的 macOS 组件可参考 Token fields。
- 考虑将 tokens 与搜索建议 结合使用。用户可能并不知道有哪些 tokens 可用，因此把 tokens 与搜索建议搭配，可以帮助他们学习如何使用。
Platform considerations
iOS
搜索入口主要有三种放置位置： 在屏幕底部的 标签栏（tab bar） 中 在屏幕底部或顶部的 工具栏（toolbar） 中 直接内嵌在内容中（inline） 选择哪种方式取决于应用的布局、内容和导航方式。
Search in a tab bar
你可以把搜索作为一个 视觉上独立的标签 放在标签栏（tab bar）的尾端。这样可以让搜索在用户切换应用各个版块时始终可见并随时可用。
默认聚焦搜索框：让用户能快速找到所需内容。当搜索框一开始就是聚焦状态时，键盘会立即弹出，并显示在搜索框下方，用户可以马上开始搜索。这种方式提供了一种更“瞬时”的体验，当用户退出搜索时，会直接回到之前的标签页，非常适合需要让搜索快速、无缝完成的场景。
默认不聚焦搜索框：有助于促进探索和发现。当搜索框一开始是不聚焦状态时，搜索标签会在屏幕底部展开成一个未选中的输入框。这样能为屏幕的其余部分留出空间，用于内容探索或导航，直到用户点选搜索框才真正开始搜索。这种方式很适合内容量庞大的应用，例如 音乐 或 电视。
Search in a toolbar
在底部放置搜索框（优先推荐） 如果底部有空间，可以把搜索框加到已有的工具栏中，或者作为一个仅包含搜索的独立工具栏。底部搜索在任何需要突出搜索优先级的场景下都很有用，因为它让搜索入口始终易于触达。 示例：设置（Settings）应用中搜索是底部唯一的控件；邮件（Mail）和备忘录（Notes）应用中，搜索与其他重要控件并列在底部工具栏中。
在顶部放置搜索框 当你需要把屏幕底部留给主要内容，或者应用没有底部工具栏时，可以将搜索放在顶部。如果底部内容是应用的核心功能，避免让搜索遮挡它。 示例：钱包（Wallet）应用把通行证堆叠放在屏幕底部以便快速访问和预览，因此搜索放在顶部。
作为内容内嵌搜索框（inline search field） 在某些场景下，你可能希望搜索框直接出现在与内容并列的位置。 当搜索只针对单个视图时，把搜索放在与内容并列的位置能强化两者之间的关系。这样用户更容易理解该搜索仅应用于当前视图，而不是全局搜索。 示例：音乐（Music）应用的主搜索位于标签栏，但用户进入“资料库”后，可以在列表顶部看到一个内嵌搜索框，用于筛选歌曲和专辑。
推荐优先放在底部 总体上，即使搜索仅适用于应用的一部分内容，也最好放在底部，保证用户容易触达。 示例：设置（Settings）应用中，无论是全局搜索还是单个应用设置的搜索，都放在底部。 如果底部没有空间（比如被标签栏或其他关键 UI 占用），也可以把搜索内嵌到顶部。
顶部的内嵌搜索位置 当搜索放在顶部时，应将其放在所搜索列表的上方，并在用户滚动时将搜索框固定在顶部工具栏。这能让该搜索与其他位置的搜索保持清晰区分。