[SwiftUI]TextField(テキストフィールド)で検索バー(search bar)を実装するには？

どうも、ちょげ(@chogetarou)です。

TextFieldで検索バーを実装する方法を紹介します。

方法
使用例

方法

TextFieldで検索バーを実装するには、まず、検索用の変数を用意します。

@State var searchText = ""

次に、HStackを用意し、HStack内にImageとTextFieldを指定します。

Imageには検索アイコンを表示し、TextFieldでは検索用の変数を指定します。。

HStack {
    Image(systemName: "magnifyingglass") //検索アイコン
    TextField("Search ...", text: $searchText)
}

そして、HStackに背景色とパディングを付与します。

HStack {
    ・・・
}
.padding()
.background(Color(.systemGray6))//背景色
.padding()

ここまでで検索バーの完成です。

ここから検索をするには、検索用の変数を使ってフィルター処理などをします。

date.filter {/*フィルター処理*/}

使用例

以下は、使用例です。

struct ContentView: View {
    let fruits : [String] = ["Apple", "Banana", "StrawBerry", "Grape", "Watermelon"]
        
    @State var isEditing = false
    @State var searchText = ""
    
    var filterdFruits: [String] {
            if searchText.isEmpty {
                return fruits
            } else {
                return fruits.filter {$0.uppercased().contains(searchText.uppercased())}
            }
        }
    var body: some View {
        VStack {
            HStack {
                Image(systemName: "magnifyingglass")
                TextField("Search ...", text: $searchText, onEditingChanged: { isEditing in
                    self.isEditing = isEditing
                })
                if isEditing {
                    Button(action: {
                        self.searchText = ""
                    }){
                    Image(systemName: "multiply.circle.fill")
                                        .foregroundColor(.gray)
                    }
                }
            }
            .padding()
            .background(Color(.systemGray6))
            .padding()
            
            List {
                ForEach(filterdFruits, id: \.self) { fruit in
                    Text(fruit)
                }
            }
        }
    }
    
}