SwiftUI-Listを使おう！　検索機能をつけよう

サーチバーをつけて絞り込みができるようにします。配列の絞り込みは絞り込んでない時は全部表示できるようになります。

まず、

  let names = ["Holly", "Josh", "Rhonda", "Ted"]
    
  @State private var searchText = ""

１　表示させる要素をが入った配列
２　検索する言葉を入れることができるようにするための変数 searchText。

検索バーに文字を入れるとそれに該当しそうなものを抽出して表示されます。

その絞り込みは、計算プロパティで作ります。

   var searchResults: [String] {
           if searchText.isEmpty {
               return names
           } else {
               return names.filter { $0.contains(searchText) }
           }
       }

検索バーに何もない時は

  if searchText.isEmpty 

return names

配列nameの値がそのまま表示されます。

検索バーに何か文字が入ったとき、

  return names.filter { $0.contains(searchText) }

フィルターをかけます。入力された文字(searchText)に対して絞り込む仕組みです。

検索バーに入れられることにより、表示するリストの内容が変わります。その表示は

 var body: some View {}

のなかに中に

NavigationView {
　　　List {　　}
}

を作ります。List表示させます

そして"ForEach"で配列の値を一つずつ取ってきて表示させます。

 ForEach(searchResults, id: \.self) { name in
          NavigationLink(destination: Text(name)) {
              Text(name)
          }
}

変数searchResultsで絞り込みされたデータをText(name)で表示するといいなります。

ここで肝心なサーチバーを表示させる方法として、モディファイアを追加します。

 NavigationView {
                   List {
                   }
                   .searchable(text: $searchText)
                   .navigationTitle("Contacts")
               }

.searchable(text: $searchText)
.navigationTitle("Contacts")

モディファイアを2つ書くことでサーチバーとナビゲーションのタイトルが表示されるようになります。

全体は以下となります。

struct ContentView: View {
    
    let names = ["Holly", "Josh", "Rhonda", "Ted"]
    
    @State private var searchText = ""
    
    var body: some View {
        
        NavigationView {
                   List {
                       ForEach(searchResults, id: \.self) { name in
                           NavigationLink(destination: Text(name)) {
                               Text(name)
                           }
                       }
                   }
                   .searchable(text: $searchText)
                   .navigationTitle("Contacts")
               }
    }
    
    var searchResults: [String] {
           if searchText.isEmpty {
               return names
           } else {
               return names.filter { $0.contains(searchText) }
           }
       }
}