SwiftUIでいこう! -Search Bar(new!)

Apple Developer Documentation

How to add a search bar to filter your data - a free SwiftUI by Example tutorial

XcodeのPlaygroundで実行すると検索バーの入力した文字が下の"Searching for"の続きに表示されます。

import SwiftUI
import PlaygroundSupport

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

    var body: some View {
        NavigationView {
            Text("Searching for \(searchText)")
                .searchable(text: $searchText)
                .navigationTitle("Searchable Example")
        }
    }
}

let host = UIHostingController(rootView: ContentView())
PlaygroundPage.current.liveView = host

Playgroundではまず、

import SwiftUI
import PlaygroundSupport

インポートして最後にライブビューように

let host = UIHostingController(rootView: ContentView())
PlaygroundPage.current.liveView = host

を書くと

実行すると画面を表示でき、操作もできるようになります。

.searchable(text: $searchText)

と書くとサーチバーが表示されるようになり

実際にサーチバーに入力すると

 Text("Searching for \(searchText)")

画面には入力された文字は"\(searchText)"に反映されます。

 .searchable(text: $searchText,prompt:"検索します")

と"prompt:"入力したい文字""を追加すると検索バーの中にその文字が表示されるようになります。ここでは"検索します"と表示させています。

それでは実際のリストに検索バーをつけて検索してみます。検索バーの入力と同時にフィルターをかけて絞り込みをします。

先ほどのコードに追加、編集していきます。

まずリストの項目を変数定義します。

 let names = ["Holly", "Josh", "Rhonda", "Ted"]

次に次にリストの絞り込みのコードを書いていきます。 ForEachを使って配列を表示させます。

 NavigationView {
            List {
                ForEach(searchResults, id: \.self) { name in
                    NavigationLink(destination: Text(name)) {
                        Text(name)
                    }
                }
            }
            .searchable(text: $searchText)
            .navigationTitle("Contacts")
        }

ForEachで使う変数searchResultsについて計算プロパティを作ります。先に定義している変数"name"に何か入っている場合はフィルターをかけて絞り込みをする仕組みを作っています。

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

フィルターはsearchTextに入った文字について絞り込みます。

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