In una NavigationView a due colonne abbiamo una barra laterale, a sinistra, con un elenco di elementi (un menu) e una view di dettaglio. In questo esempio selezionando una voce del menu a sinistra verrà cambiata la view di dettaglio (la colonna di destra). Per memorizzare l’elemento selezionato utilizziamo una proprietà AppStorage
Creaimo un enum
che contenga tutte le selezioni possibile, in questo esempio utilizzeremo alcuni sport
enum Sport: String, CaseIterable, Identifiable {
case calcio
case tennis
case basket
case rugby
case hockey
var id: String { rawValue }
}
Passiamo alla ContentView, dove inizializziamo una chiave "selezione"
@AppStorage("selezione") private var selezione: Sport = .calcio
Inseriamo una NavigationView contenente le due colonne, ovvero una Sidebar a sinistra e una DetailView a destra
NavigationView {
Sidebar(selezione: Binding($selezione))
DetailView(selezione: selezione)
}
.frame(width: 800, height: 400)
Nella Sidebar creiamo un Binding per la selezione
@Binding var selection: Sport?
E nella View elenchiamo tutti gli elementi dell' Enum Sport
List(Sport.allCases, id: \.self, selection: $selezione) { sport in
Text(sport.rawValue)
}
.listStyle(SidebarListStyle())
Inseriamo il toggle per nascondere la Sidebar
.toolbar {
Button(action: toggleSidebar, label: {
Image(systemName: "sidebar.left").help("Toggle Sidebar")
})
}
E la relativa funzione
private func toggleSidebar() {
NSApp.keyWindow?.contentViewController?.tryToPerform(#selector(NSSplitViewController.toggleSidebar(_:)), with: nil)
}
Nella View dettaglio mettiamo uno Switch per mostrare un testo diverso a seconda di quale sport viene scelto nella Sidebar
struct DetailView: View {
var selezione: Sport
var body: some View {
switch selezione {
case .calcio:
Text("⚽️ \(selezione.rawValue)").font(.title).frame(minWidth: 200)
case .tennis:
Text("🎾 \(selezione.rawValue)").font(.title).frame(minWidth: 200)
case .basket:
Text("🏀 \(selezione.rawValue)").font(.title).frame(minWidth: 200)
case .rugby:
Text("🏉 \(selezione.rawValue)").font(.title).frame(minWidth: 200)
case .hockey:
Text("🏒 \(selezione.rawValue)").font(.title).frame(minWidth: 200)
}
}
}
Di seguito il codice completo:
import SwiftUI
enum Sport: String, CaseIterable, Identifiable {
case calcio
case tennis
case basket
case rugby
case hockey
var id: String { rawValue }
}
struct Sidebar: View {
@Binding var selezione: Sport?
var body: some View {
List(Sport.allCases, id: \.self, selection: $selezione) { sport in
Text(sport.rawValue)
}
.listStyle(SidebarListStyle())
.toolbar {
Button(action: toggleSidebar, label: {
Image(systemName: "sidebar.left").help("Toggle Sidebar")
})
}
.frame(minWidth: 150)
}
}
struct DetailView: View {
var selezione: Sport
var body: some View {
switch selezione {
case .calcio:
Text("⚽️ \(selezione.rawValue)").font(.title).frame(minWidth: 200)
case .tennis:
Text("🎾 \(selezione.rawValue)").font(.title).frame(minWidth: 200)
case .basket:
Text("🏀 \(selezione.rawValue)").font(.title).frame(minWidth: 200)
case .rugby:
Text("🏉 \(selezione.rawValue)").font(.title).frame(minWidth: 200)
case .hockey:
Text("🏒 \(selezione.rawValue)").font(.title).frame(minWidth: 200)
}
}
}
private func toggleSidebar() {
NSApp.keyWindow?.contentViewController?.tryToPerform(#selector(NSSplitViewController.toggleSidebar(_:)), with: nil)
}
struct ContentView: View {
@AppStorage("selezione") private var selezione: Sport = .calcio
var body: some View {
NavigationView {
Sidebar(selezione: Binding($selezione))
DetailView(selezione: selezione)
}
.frame(width: 800, height: 400)
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Potete trovare il codice completo su Github