SwiftUIで配列テーブルから文字列を検索する方法


  1. 配列テーブルの作成: SwiftUIでは、Listビューを使用して配列テーブルを作成します。例えば、namesという文字列配列がある場合、次のようにテーブルを作成します。

    struct ContentView: View {
       let names = ["Apple", "Banana", "Orange", "Pineapple"]
    
       var body: some View {
           List(names, id: \.self) { name in
               Text(name)
           }
       }
    }
  2. 検索バーの追加: 次に、検索バーを追加します。@Stateプロパティを使用して、検索文字列を保持します。

    struct ContentView: View {
       @State private var searchText = ""
       let names = ["Apple", "Banana", "Orange", "Pineapple"]
    
       var body: some View {
           VStack {
               SearchBar(text: $searchText)
    
               List(names.filter {
                   searchText.isEmpty ? true : $0.localizedStandardContains(searchText)
               }, id: \.self) { name in
                   Text(name)
               }
           }
       }
    }

    SearchBarは、検索文字列をバインディングするためのカスタムビューです。この例では省略していますが、SearchBarUITextFieldUISearchBarをラップしたものです。

  3. フィルタリング: テーブルの要素を検索文字列に基づいてフィルタリングします。filterメソッドを使用して、配列をフィルタリングし、検索文字列にマッチする要素のみを表示します。

    List(names.filter {
       searchText.isEmpty ? true : $0.localizedStandardContains(searchText)
    }, id: \.self) { name in
       Text(name)
    }

    上記の例では、検索文字列が空の場合は常にtrueを返し、すべての要素を表示します。検索文字列が非空の場合は、localizedStandardContains(_:)メソッドを使用して、大文字と小文字を区別せずに文字列を比較します。

これで、SwiftUIで配列テーブルから文字列を検索する方法がわかりました。必要に応じて、検索バーのデザインや検索ロジックをカスタマイズすることができます。