Skip to main content
  1. Posts/

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

以上です。