【SwiftUI】備忘録 検索フィールドについて

はじめに

iPhone アプリを使用していると表示される検索フィールドについて、個人的に気になるのでまとめていきます

標準検索フィールド

import SwiftUI

// 検索フィールド表示のみ
struct TestSearchView: View {
    @State private var searchText = ""
    
    var body: some View {
        NavigationStack{
            Text("Hello, World!")
                .searchable(text: $searchText, prompt: "検索")
        }
    }
}

必要なコード

@State private var searchText = ""

検索の際にsearchTextは流動的に変化するため、@state の状態変数として設定しておくことでView の再描画にも対応可能

.searchable(text: $searchText, prompt: "検索") ※prompt は任意で設定可能

検索フィールドを表示させるために必要なモディファイア

実際の画面

import SwiftUI

// タブに表示される検索フィールド
struct TestTabSearchView: View {
    @State private var searchText = ""
    
    var body: some View {
        TabView{
            Tab("Tab1", systemImage: "figure") {
                //pass
            }
            Tab("Tab2", systemImage: "figure.mind.and.body") {
                //pass
            }
            Tab("Tab3", systemImage: "figure.run") {
                //pass
            }
            Tab(role: .search) {
                NavigationStack{
                    Text("Hello, World!")
                        .searchable(text: $searchText, prompt: "検索")
                }
            }
        }
    }
}

必要なコード

Tab(role: .search){...}

タブのロールを.search (検索) に設定することで検索タブを実装可能
※表示するタブのViewには.searchable(text: $searchText, prompt: "検索") を入れておく

実際の画面

検索タブ押下後の画面

注意点

.searchable(text: $searchText, prompt: "検索")
このモディファイアが対応しているのは、NavigationStack / List / ScrollView / Form といった “検索対象を含むビュー” にのみ対応しているので VStack などには使用不可

終わりに

アプリ開発においては、普段目にする機能を織り込むことによって開発が楽しくなります。不明点・発見した点についてまとめていくことで誰かの助けになればと思います！

参考

Apple 公式ドキュメント