SwiftUI NavigationBarに検索バーを設置する方法
Table of Contents
SwiftUIで、NavigationBarに検索用のTextFieldを設置する実装方法をメモします。
実装方法 #
Navigation系のViewとともに、検索機能を付けたいViewにsearchable
モディファイアを適用します。
モディファイアにもいくつか種類があるので、必要に応じて適宜選択する必要があります。
Returnキーをタップしたイベントは、onSubmit(of:_:)
で捕捉します。of
で渡すSubmitTriggers
構造体は.search
を指定します。
import SwiftUI
struct ContentView: View {
@State private var searchText = ""
var body: some View {
NavigationStack {
VStack {
Text(searchText)
}
.padding()
.searchable(text: $searchText, placement: .automatic, prompt: nil)
.onSubmit(of: .search) {
print("search")
}
}
}
}
searchable(text:placement:prompt:) | Apple Developer Documentation
Appleのドキュメントには、さらに詳しい実装方法が解説されています。
Adding a search interface to your app | Apple Developer Documentation
以上です。