NavigationSplitViewの”スタイル”を変更

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

.navigationSplitViewStyleを使用するとNavigationSplitView のスタイルを変更することが出来ます。スタイルを適用するとサイドバーを展開した時の詳細ビューの動作などが変わります。

パラメータ
サンプルコード
1. プログラムのポイント

パラメータ

automatic：自動で調整される
balanced：先頭の列を表示するときに、詳細ビューのサイズを縮小してスペースを確保する
prominentDetail：先頭の列を表示または非表示に後ろで表示される詳細ビューはサイズを保持したままになる

サンプルコード

サンプルコードは、サイドバー、コンテンツビュー、ディテールビューの３カラムを表示するプログラムです。
サイドバーとコンテンツビューで果物と絵の組み合わせを選択するとディテールビューにその組み合わせが表示されます。

プログラムのポイント

NavigationSplitViewのモディファイアとしてnavigationSplitViewStyleを付与しています。.prominentDetail部分に先述のパラメータの値を設定します。

22行目：.navigationSplitViewStyle(.prominentDetail)

import SwiftUI

struct NavigationSplitViewSmp3: View {
    let fruits: [String] = ["apple", "banana", "orenge"]
    let fruitsImg: [String] = ["🍎", "🍌", "🍊"]
    @State private var selected: String?
    @State private var selectedImg: String?
    
    var body: some View {
        NavigationSplitView {
            List(fruits, id: \.self, selection: $selected) { fruit in
                Text(fruit)
            }
        } content: {
            List(fruitsImg, id: \.self, selection: $selectedImg) { fruitImg in
                Text(fruitImg)
            }
        } detail: {
            Text("選択したフルーツ：" + (selected ?? "未選択") + (selectedImg ?? "未選択"))  
        }
        // ビューのスタイルを指定
        .navigationSplitViewStyle(.prominentDetail)
    }
}