NavigationSplitView（iPad/Mac 向け）

NavigationSplitView は iPad や Mac 向けに、マルチカラムのナビゲーション UI を構築するためのコンポーネントです。メール.app や設定.app のような、サイドバーと詳細画面を持つレイアウトを実現します。

2カラムレイアウト

最も基本的な形は、サイドバーと詳細の2カラム構成です。

struct ContentView: View {
    @State private var selectedItem: String?
    
    let items = ["メール", "メッセージ", "カレンダー"]
    
    var body: some View {
        NavigationSplitView {
            // サイドバー
            List(items, id: \.self, selection: $selectedItem) { item in
                Text(item)
            }
            .navigationTitle("アプリ")
        } detail: {
            // 詳細ビュー
            if let item = selectedItem {
                Text("\(item)の詳細")
                    .navigationTitle(item)
            } else {
                Text("項目を選択してください")
            }
        }
    }
}

3カラムレイアウト

サイドバー、コンテンツ、詳細の3カラム構成も可能です。

struct ContentView: View {
    @State private var selectedCategory: String?
    @State private var selectedItem: String?
    
    let categories = ["受信箱", "送信済み", "下書き"]
    let items = ["メール1", "メール2", "メール3"]
    
    var body: some View {
        NavigationSplitView {
            // サイドバー
            List(categories, id: \.self, selection: $selectedCategory) { category in
                Text(category)
            }
            .navigationTitle("フォルダ")
        } content: {
            // コンテンツ（中央カラム）
            if selectedCategory != nil {
                List(items, id: \.self, selection: $selectedItem) { item in
                    Text(item)
                }
                .navigationTitle(selectedCategory ?? "")
            } else {
                Text("フォルダを選択")
            }
        } detail: {
            // 詳細
            if let item = selectedItem {
                Text("\(item)の詳細")
            } else {
                Text("メールを選択")
            }
        }
    }
}

sidebar

最も左側のカラム。ナビゲーションの起点となる。

content

中央のカラム（3カラム構成の場合）。サイドバーで選択した項目のリストを表示。

detail

最も右側のカラム。選択した項目の詳細を表示。

カラムの表示制御

columnVisibility でカラムの表示状態を制御できます。

struct ContentView: View {
    @State private var columnVisibility: NavigationSplitViewVisibility = .all
    
    var body: some View {
        NavigationSplitView(columnVisibility: $columnVisibility) {
            List { /* サイドバー */ }
        } detail: {
            Text("詳細")
        }
    }
}

値	表示されるカラム
.all	すべてのカラムを表示
.doubleColumn	2カラム表示
.detailOnly	詳細のみ表示
.automatic	デバイスと状態に応じて自動

スタイルのカスタマイズ

navigationSplitViewStyle でレイアウトスタイルを変更できます。

NavigationSplitView { /* ... */ }
    .navigationSplitViewStyle(.balanced)  // バランス型
    // .prominentDetail  // 詳細を強調
    // .automatic        // 自動

iPhone での表示

iPhone では NavigationSplitView は自動的にスタック形式のナビゲーションとして表示されます。サイドバーがリストとして表示され、選択すると詳細画面にプッシュ遷移します。

struct ContentView: View {
    @State private var selectedItem: String?
    let items = ["項目1", "項目2", "項目3"]
    
    var body: some View {
        NavigationSplitView {
            List(items, id: \.self, selection: $selectedItem) { item in
                Text(item)
            }
        } detail: {
            if let item = selectedItem {
                DetailView(item: item)
            }
        }
        // iPhone: スタック表示
        // iPad: サイドバー + 詳細の2カラム表示
    }
}

NavigationStack

シンプルなスタック型ナビゲーション。iPhone 向けのシーケンシャルな画面遷移に適している。

NavigationSplitView

マルチカラムレイアウト。iPad や Mac で複数の情報を同時に表示する場合に適している。

NavigationSplitView を使うことで、iPad や Mac で効率的な作業ができるプロ向けの UI を構築できます。iPhone でも適切にフォールバックされるため、ユニバーサルアプリの開発に最適です。