![見出し画像](https://assets.st-note.com/production/uploads/images/81561098/rectangle_large_type_2_8eedc0ebcbd9e12a9efa398332407082.png?width=800)
New SwiftUI - WWDC22- NavigationSplitView
大きな画面ではサイドバーにリスト表示ができるがNavigationSplitViewを見ていきます。公式のドキュメント
NavigationViewが"deprecated"ということで使えなくなるのでその代わりに使うものの紹介。NavigationStackとNavigationSplitViewを使うということ。
NavigationSplitViewでの基本形2カラム。
NavigationSplitView {
/* column 1 */
} detail: {
/* column 2 */
}
3カラム。
NavigationSplitView {
/* column 1 */
} content: {
/* column 2 */
} detail: {
/* column 3 */
}
そして以下サイト。
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.")
}
}
}
![](https://assets.st-note.com/img/1656535529272-ahHGlJxRxI.png?width=800)
![](https://assets.st-note.com/img/1656535564278-Ec3nR5gKMG.png?width=800)
となります。
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)
}
}
![](https://assets.st-note.com/img/1656622863178-Gaed4lCsiW.png?width=800)
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)
}
}
![](https://assets.st-note.com/img/1656623521999-JdQh9fGLVv.png?width=800)
ここで必要なものが"NavigationSplitViewVisibility"
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
上記の説明に該当するものが用意されています。
この記事が気に入ったらサポートをしてみませんか?