Post marked as unsolved
Click to stop watching this post.
You have stopped watching this post. Click to start watching again.
Post marked as unsolved with 6 replies
879
Views
iPadOS Sidebar Split Navigation View with SwiftUI
I'm struggling to find the correct way to use the new Sidebar on iPadOS with Split View Controllers (or NavigationView as it's called in SwiftUI).
If you want a Sidebar with a layout like so:
Sidebar -> Main View -> Detail View
It can be achieved with the following code:
NavigationView {
		SidebarView()
		Text("Main")
		Text("Detail")
}
Then SwiftUI will always expect that the main and detail views can be filled.
Ideally, for some but not all of the side bar items, I'd like a structure of:
Sidebar -> Main View
Note the detail view is missing, so ideally the Main View would take up the remainder of the screen. This is not what happens currently - SwiftUI still leaves a lot of space for a detail view.
By writing the initial Navigation View like so we lose the ability to have that detail even for the views that want it:
NavigationView {
		SidebarView()
		Text("Main")
}
I've tried doing things such as using the modifier .navigationViewStyle(StackNavigationViewStyle()) specifically on the detail view that I don't want to appear in a split view style, to no avail.
My question is, based on the example code below, is it possible to have DetailNoSplitView take up the full width of the screen, and not be arranged in a split view style layout like it is currently?
The full, runnable code is below:
import SwiftUI
struct ContentView: View {
var body: some View {
NavigationView {
SidebarView()
Text("Main")
Text("Detail")
}
}
}
struct SidebarView: View {
var body: some View {
List {
NavigationLink(destination: DetailSplitView(number: 1)) {
Label("First", systemImage: "1.circle")
}
NavigationLink(destination: DetailSplitView(number: 2)) {
Label("Second", systemImage: "2.circle")
}
NavigationLink(destination: DetailNoSplitView(number: 3)) {
Label("Third", systemImage: "3.circle")
}
}
.listStyle(SidebarListStyle())
}
}
// Working as expected in a split view context
struct DetailSplitView: View {
let number: Int
var body: some View {
VStack(spacing: 20) {
Text("Main view for: \(number)")
NavigationLink(destination: Text("Detail view for: \(number)")) {
Text("Press here for detail")
}
}
}
}
// Ideally want this to take up the whole screen (not just one side of a split view)
struct DetailNoSplitView: View {
let number: Int
var body: some View {
Text("Detail view for \(number)")
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}