通用可搜索 SwiftUI 视图

这个概念验证演示了如何使用 Swift 和 SwiftUI API 原生实现一个通用的 SearchView。该项目最初是为了响应 Swift() Telegram 群组 的请求而发起的。

在此处探索详细示例，了解如何在这些示例应用程序中使用 SearchView

示例国家/地区搜索应用程序	示例水果搜索应用程序

Swift 中的 SearchView 结构体为 SwiftUI 应用程序提供了一个通用且可自定义的搜索界面。本指南将探讨其组件、功能以及如何有效地将其集成到您的项目中。

SearchView 采用通用结构设计，以提供灵活性，定义如下：

• Item：一个符合 Searchable 协议的数据模型，其中包括可识别和可哈希的对象。
• Content：用于在搜索结果中显示每个项目的视图类型。
• Value：Item 中可搜索属性的类型，必须是可哈希的。

• 可搜索属性：使用 KeyPath 传递您的属性，以使其可搜索。
• 动态搜索：根据用户输入和可搜索属性动态更新显示。
• 最近搜索：使用 UserDefaults 管理和显示最近的搜索。
• 可自定义 UI：通过 SearchViewConfiguration 提供文本元素自定义。

我可能会以 KeyPath 的方式通用地支持搜索令牌。

要初始化 SearchView，您需要：

• 要搜索的 Item 对象数组。
• Item 中可搜索属性的 KeyPath。
• 绑定到表示当前搜索查询的 String。
• 一个闭包 (content) 定义了每个 Item 的显示方式。

• 根据搜索查询和指定的可搜索属性过滤项目。
• 在用户键入时提供实时显示更新。

• 将最近的搜索保存到 UserDefaults，并在搜索字段获得焦点但为空时显示它们。
• 包含轻松清除最近搜索的功能。

• SearchViewConfiguration 允许自定义提示、空状态和无结果状态消息等，以获得量身定制的用户体验。

定义您的数据模型并符合 Searchable 协议。

struct Fruit: Searchable {
    var id: UUID = UUID()
    var name: String
    var description: String

    var idStringValue: String {
        id.uuidString
    }
}

extension Fruit {
    // Sample data
    static var example: [Fruit] {
        [
            Fruit(name: "Apple", description: "Green and red."),
            Fruit(name: "Banana", description: "Long and yellow."),
            // Add more fruits...
        ]
    }
}

创建示例数组以在演示中使用

let dataList: [Fruit] = Fruit.example

在您的 SwiftUI 视图中实现 SearchView

@State private var searchQuery: String = ""

var body: some View {
    NavigationStack {
        SearchView(
            items: dataList,
            searchableProperties: [\.name, \.description],
            searchQuery: $searchQuery
        ) { fruit, searchTerm in
            VStack(alignment: .leading) {
                Text(fruit.name).bold().foregroundColor(.blue)
                Text(fruit.description).font(.subheadline)
            }
            .padding(.vertical, 4)
        }
        .navigationTitle("Searchable Items")
    }
}

需要 iOS 17 和 Xcode 15 或更高版本。

1. 在 Xcode 中，导航到 File -> Swift Packages -> Add Package Dependency。
2. 粘贴存储库 URL：https://github.com/cs4alhaider/SearchView。
3. 选择 master 分支或特定版本。

Abdullah Alhaider，cs.alhaider@gmail.com

本项目采用 MIT 许可证 - 有关详细信息，请参阅 LICENSE 文件。