New SwiftUI - WWDC22- NavigationSplitView

大きな画面ではサイドバーにリスト表示ができるがNavigationSplitViewを見ていきます。公式のドキュメント

Apple Developer Documentation

NavigationViewが"deprecated"ということで使えなくなるのでその代わりに使うものの紹介。NavigationStackとNavigationSplitViewを使うということ。

Migrating to new navigation types | Apple Developer Documentation

NavigationSplitViewでの基本形2カラム。

NavigationSplitView {
    /* column 1 */
} detail: {
    /* column 2 */
}

3カラム。

NavigationSplitView {
    /* column 1 */
} content: {
    /* column 2 */
} detail: {
    /* column 3 */
}

そして以下サイト。

What’s new in SwiftUI for iOS 16

2カラムの表示は以下となります。

struct ContentView: View {
    @State private var players = ["Dani", "Jamie", "Roy"]
    @State private var selectedPlayer: String?

    var body: some View {
        NavigationSplitView {
            List(players, id: \.self, selection: $selectedPlayer, rowContent: Text.init)
        } detail: {
            Text(selectedPlayer ?? "Please choose a player.")
        }
    }
}

となります。

3カラムは

struct Team: Identifiable, Hashable {
    let id = UUID()
    var name: String
    var players: [String]
}

struct ContentView: View {
    @State private var teams = [Team(name: "AFC Richmond", players: ["Dani", "Jamie", "Row"])]

    @State private var selectedTeam: Team?
    @State private var selectedPlayer: String?

    var body: some View {
        NavigationSplitView {
            List(teams, selection: $selectedTeam) { team in
                Text(team.name).tag(team)
            }
            .navigationSplitViewColumnWidth(250)
        } content: {
            List(selectedTeam?.players ?? [], id: \.self, selection: $selectedPlayer) { player in
                Text(player)
            }
        } detail: {
            Text(selectedPlayer ?? "Please choose a player.")
        }
        .navigationSplitViewStyle(.prominentDetail)
    }
}

3カラムですがもっと単純に下ものが

struct ContentView: View {
    @State var visivility:NavigationSplitViewVisibility = .automatic

    var body: some View {
        NavigationSplitView(columnVisibility: $visivility) {
            Text("Side Bar")
        } content: {
            Text("Main Contents")
        } detail: {
            Text("Detail contents")
        }
        .navigationSplitViewStyle(.prominentDetail)
    }
}

ここで必要なものが"NavigationSplitViewVisibility"

Apple Developer Documentation

NavigationSplitViewの表示の設定ができるものとなっています。

・Hide all but the trailing column with detailOnly.

・Hide the leading column of a three-column navigation split view with doubleColumn.

・Show all the columns with all.

・Rely on the automatic behavior for the current context with automatic.

@State var visivility:NavigationSplitViewVisibility = .automatic

モディファイアで設定します。

.automatic、.all、.doubleColumn、.detailOnly

上記の説明に該当するものが用意されています。