我最近遇到的一个问题是关于SwiftUI项目中搜索栏的实现。与uIKit不同的是，SwiftUI没有内置的搜索栏控制。您可以使用UIViewRepresentable UISearchBar`在您的SwiftUI项目中。但是，当您查看搜索栏时，完全使用SwiftUI构建搜索栏并不太困难。在本教程中，让我们尝试构建一个SwiftUI版本的搜索栏。
下图给出了关于我们将要构建的搜索栏的一些想法。其外观和感觉与UISearchBar在UIKit。我们还将实施取消按钮，该按钮仅在用户开始键入搜索字段时出现。
编辑笔记: 如果您是SWIFUI新手，可以查看我们的这里的入门教程.
实现搜索栏UI
为了帮助您集中精力构建搜索栏，您可以下载这个初学者项目。编译一次以确保其工作正常。这个应用程序应该给你一个待办项目的列表。现在，让我们通过实现SearchBar.swift档案。
如果您查看IOS中的标准搜索栏，它实际上由一个文本字段和一个取消按钮组成。
首先，我们声明了两个变量：一个是搜索文本的绑定，另一个是存储搜索字段状态的变量(编辑与否)。
我们用了若要布局文本字段和取消纽扣。只有当用户点击搜索字段时，才会显示该按钮。为了预览搜索栏，还请插入以下代码：
添加代码后，应该能够预览搜索字段。单击玩按钮来测试搜索字段。选择文本字段时，取消按钮应该出现。
在当前版本的搜索栏中缺少了一些东西：搜索图标和交叉图标。要将这些图标添加到文本字段，我们可以附加一个overlay它的修饰符。将以下代码放在后面.cornerRadius(8):
我们在文本字段上覆盖两个系统图像。对于“乘.圈.填充”图像，只有在某人开始键入搜索字段时才会出现。当它被点击时，它会将搜索字段重置为空白。再次，您可以通过单击玩纽扣。
使用搜索栏进行数据过滤
既然搜索栏已经准备好使用，让我们切换到ContentView.swift并将搜索栏添加到列表视图中。
就在List视图中，插入以下代码：
这将在标题和列表视图之间添加搜索栏。这个searchText保存搜索文本的状态变量。当用户在搜索字段中键入时，将相应地更新此变量。
若要筛选结果，需要更新List视图如下：
在代码中，我们使用filter函数搜索那些与搜索项匹配的待办事项。在闭包中，我们首先检查搜索文本是否有一个值。如果没有，我们只是返回true，这意味着它返回所有项。否则，我们将检查Name字段是否包含搜索项。
运行这个应用程序来尝试搜索。它应该在键入时过滤待办事项。
取消键盘
正如您所看到的，完全使用SwiftUI创建我们自己的搜索栏并不困难。当搜索栏工作时，有一个小问题我们必须解决。你试过点击取消按钮了吗？它确实清除了搜索字段。然而，软件键盘并没有被撤销。
要解决这个问题，我们需要在action块的取消按钮：
摘要
在本教程中，我们向您展示了如何实现搜索栏。正如您所看到的，完全使用SwiftUI构建一个并不困难。但是，如果您想深入研究并学习如何管理数据库中的项，则可以查看掌握SWIFUI书籍。我们将进一步展示如何使用Core数据持久化数据，并使用FETCH请求处理搜索。另外，你将得到一个待办事项列表应用程序的完整源代码。
作为参考，你可以在这里下载最后的项目.
推荐👇：
如果你想一起进阶，不妨添加一下交流群1012951431
面试题资料或者相关学习资料都在群文件中 进群即可下载！
京公网安备 11010502036488号