NavigationSplitViewにおいて各カラムの幅を指定するには？

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

.navigationSplitViewColumnWidth は SwiftUI の NavigationSplitView に関連するビューモディファイアで、特定のカラム（サイドバー、コンテンツビュー、ディテールビュー）の幅をカスタマイズするために使用されます。

これにより、アプリケーションのレイアウトをより細かく制御し、デバイスの画面サイズや向きに応じて適切なカラム幅を設定できます。

パラメータ
サンプルコード
1. プログラムのポイント
2. サイズを適用したビュー
注意点
まとめ

パラメータ

以下のパラメータが用意されています。
基本的にidealの設定が適用されますが、最小サイズと最大サイズを設定しておくことで、他のビューと干渉しidealサイズが適用できない場合に、最小サイズと最大サイズの間に設定されるようになります。

また、最小サイズと最大サイズを省略して、idealのみ設定することも可能です。

min：最小サイズ
ideal：理想のサイズ
max：最大サイズ

サンプルコード

サンプルコードは、サイドバー、コンテンツビュー、ディテールビューの３カラムを表示するプログラムです。
サイドバーとコンテンツビューにnavigationSplitViewColumnWidthを付与してサイズを指定しています。

プログラムのポイント

以下の行でサイドバーの幅を指定しています。最小サイズと最大サイズの記述は省略しています。

16行目：.navigationSplitViewColumnWidth(230)

同様に以下の行でコンテンツビューの幅を指定しています。こちらは最小サイズと最大サイズも記述しています。

22行目：.navigationSplitViewColumnWidth(min: 50, ideal: 150, max: 400)

import SwiftUI

struct NavigationSplitViewSmp: View {
    let fruits: [String] = ["apple", "banana", "orenge"]
    let fruitsImg: [String] = ["🍎", "🍌", "🍊"]
    @State private var selected: String?
    @State private var selectedImg: String?
    @State private var columnVisibility =
    NavigationSplitViewVisibility.all
    
    var body: some View {
        NavigationSplitView(columnVisibility: $columnVisibility) {
            List(fruits, id: \.self, selection: $selected) { fruit in
                Text(fruit)
            }
            // 省略してidealのみ設定
            .navigationSplitViewColumnWidth(230)
        } content: {
            List(fruitsImg, id: \.self, selection: $selectedImg) { fruitImg in
                Text(fruitImg)
            }
            // 50〜400の幅の中で150を理想のサイズと設定
            .navigationSplitViewColumnWidth(min: 50, ideal: 150, max: 400)
        } detail: {
            Text("選択したフルーツ：" + (selected ?? "未選択") + (selectedImg ?? "未選択"))
        }
    }
}