【toolbarTitleMenuの使い方】タイトルにメニューを追加する方法

toolbarTitleMenuは、ナビゲーションバーのタイトル部分にメニューを配置するためのモディファイアです。
これを使用することで、タイトルをクリックするとメニューが表示されるインターフェースを簡単に作成できます。

iOS：16.0以上
XCode（当サイトの環境）：15.0.1

以下にその特徴と使い方を具体的なサンプルコードとともに解説します。

基本シンタックス
特徴
サンプルコード
1. サンプルコードの動作
toolbarTitleMenu仕様における注意点
まとめ

基本シンタックス

.toolbarTitleMenu<C>(content: () -> C)

content: メニューの内容を定義するクロージャ。ここにメニューアイテムを追加します。

特徴

ナビゲーションバーのタイトル部分にメニューを配置することで、ユーザーが特定の操作をすぐに実行できるようにします。
また、メニューの内容を自由にカスタマイズできるため、様々な用途に対応可能です。

サンプルコード

以下に、toolbarTitleMenuを使った具体的なサンプルコードを示します。
このコードでは、ナビゲーションバーのタイトル部分に「タイトル」というタイトルを設定し、クリックすると複数のメニューアイテムが表示されます。

import SwiftUI

struct ToolbarTitleMenuSmp: View {
    var body: some View {
        NavigationStack {
            List {
                ForEach(1..<50) { item in
                    Text("ITEM \(item)")
                }
            }
            .navigationTitle("タイトル")
            // タイトルがインラインモードで表示されていないとメニューも表示されない
            .navigationBarTitleDisplayMode(.inline)

            // タイトルメニューのボタン
            .toolbarTitleMenu {
                Button(action: {
                    print("home tapped")
                }) {
                    Text("ホーム")
                    Image(systemName: "house")
                }
                Button(action: {
                    print("setting tapped")
                }) {
                    Text("設定")
                    Image(systemName: "gearshape")
                }
                Button("オプション 1") {
                    print("Option 1 selected")
                }
                Button("オプション 2") {
                    print("Option 2 selected")
                }
                Button("オプション 3") {
                    print("Option 3 selected")
                }
            }
            
            //ダークモードの配色を設定
            .toolbarColorScheme(.dark, for: .navigationBar, .tabBar)
            .toolbarBackground(.visible, for: .navigationBar, .bottomBar)
        }
    }
}