NavigationSplitViewにおいて初期表示するビューを変更するには？

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

NavigationSplitViewにおいて、初期表示するビューを指定することが可能です。
preferredCompactColumnを使用することで、複数カラム（サイドバー、コンテンツビュー、ディテールビュー）の中でどのビューを初期表示するか制御することが出来ます。

preferredCompactColumnを使用して何ができる？
パラメータ
サンプルコード
1. プログラムのポイント
2. パラメータによる表示の違い
まとめ

preferredCompactColumnを使用して何ができる？

例えばiPhoneの場合、NavigationSplitViewはデフォルトにおいて、サイドバーが初期表示されます。
そこでpreferredCompactColumnによって、初期表示するViewを指定することで、ディテールビューを表示させたりすることが出来ます。

この機能は、iPhoneなど画面サイズが比較的小さい場合などに活用すると有用かと思います。

パラメータ

sidebar：サイドバーを初期表示する
content：コンテンツビューを初期表示する
detail：ディテールビューを初期表示する

サンプルコード

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

プログラムのポイント

プロパティを@Stateを付与して宣言します。値にはNavigationSplitViewColumn.detailを指定します。先述のパラメータで説明したとおりsidebarやcontentも指定できます。

9行目：@State private var preferredColumn = NavigationSplitViewColumn.detail

NavigationSplitViewのパラメータとしてpreferredCompactColumnを指定します。

12行目：NavigationSplitView(preferredCompactColumn: $preferredColumn)

import SwiftUI

struct NavigationSplitViewSmp2: View {
    let fruits: [String] = ["apple", "banana", "orenge"]
    let fruitsImg: [String] = ["🍎", "🍌", "🍊"]
    @State private var selected: String?
    @State private var selectedImg: String?

    @State private var preferredColumn =
    NavigationSplitViewColumn.detail
    
    var body: some View {
        NavigationSplitView(preferredCompactColumn: $preferredColumn) {
            // iPadにおいてサイドバーに表示されるビュー
            // iPhoneの場合は１番目のコンテンツ
            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 ?? "未選択"))
        }
    }
}