在 SwiftUI 中實現搜索欄：2025 最新語法與最佳實踐

SwiftUI 是 Apple 在 WWDC 2019 推出的新框架，旨在幫助開發者更輕鬆地構建跨平台的應用程式。使用搜索欄是一個常見且重要的功能，能夠提升用戶體驗並使應用程式更易於使用者尋找所需的資料。本文將為您介紹如何在 SwiftUI 中有效地實現搜索欄，並提供完整的教學流程和實作範例。

建立 SearchBar 組件

首先，我們需要創建一個 SearchBar 的 View，然後將它嵌入到我們的應用程式中。以下是建立搜索欄的基本代碼：

struct SearchBar: View {
    @Binding var text: String

    var body: some View {
        HStack {
            TextField("Search ...", text: $text)
                .padding(7)
                .padding(.horizontal, 25)
                .background(Color(.systemGray6))
                .cornerRadius(8)
                .overlay(
                    HStack {
                        Image(systemName: "magnifyingglass")
                            .foregroundColor(.gray)
                            .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
                            .padding(.leading, 8)
                    }
                )
        }
    }
}

在 ContentView 中使用 SearchBar

接下來，我們將這個 SearchBar 組件放入 ContentView 中，並將它與我們的資料進行綁定：

struct ContentView: View {
    @State private var searchText = ""

    var body: some View {
        VStack {
            SearchBar(text: $searchText)
            List {
                // 在此處加入您的資料
                ForEach(data.filter {
                    self.searchText.isEmpty ? true : $0.name.localizedStandardContains(self.searchText)
                }, id: \.self) { item in
                    Text(item.name) // 假設資料有 name 屬性
                }
            }
        }
    }
}

錯誤排除與最佳實踐

在實作過程中，您可能會遇到一些常見的錯誤，例如：

  • TextField 不更新：確保您正確綁定了 @Binding 屬性。
  • 資料未正確篩選：檢查 filter 條件以確保它符合您的資料結構。

延伸應用

除了基本的搜索功能，您還可以進一步擴展此搜索欄的功能，例如：

  • 加入搜索歷史記錄的功能。
  • 在搜索結果中高亮顯示關鍵字。
  • 實現模糊匹配以提高搜索的靈活性。

在 SwiftUI 中使用搜索欄

Q&A（常見問題解答）

1. 如何在 SwiftUI 中實現多條件搜索？

您可以在 filter 條件中添加多個條件，例如：

ForEach(data.filter {
    self.searchText.isEmpty ? true : $0.name.localizedStandardContains(self.searchText) || $0.description.localizedStandardContains(self.searchText)
}, id: \.self) { item in
    Text(item.name)
}

2. 搜索欄的佈局如何優化？

您可以使用 SwiftUI 的布局系統，例如使用 Spacer() 和 padding() 方法來調整搜索欄的位置和大小，以確保它在不同尺寸的螢幕上顯示良好。

3. 如何在搜索結果中顯示圖片？

您可以在 List 中為每個項目添加一個 Image，以顯示相關的圖片，例如：

List {
    ForEach(data.filter {
        self.searchText.isEmpty ? true : $0.name.localizedStandardContains(self.searchText)
    }, id: \.self) { item in
        HStack {
            Image(item.imageName) // 假設每個項目有 imageName 屬性
                .resizable()
                .scaledToFit()
                .frame(width: 50, height: 50)
            Text(item.name)
        }
    }
}

總結來說，在 SwiftUI 中實現搜索欄是一個簡單且有效的功能，只需將 SearchBar 加入應用並與資料綁定，即可提升用戶體驗。

—

Categorized in:

iOSswift

Tagged in:

,