Is it possible to drive NavigationSplitView navigation with a view in sidebar (left column) that is not a List? All examples that I have seen from this year only contain List in sidebar.
I ask this because I would like to have a more complex layout in sidebar (or first view on iOS) that contains a mix of elements, some of them non-interactive and not targeting navigation. Here’s what I would like to do:
import SwiftUI
struct Thing: Identifiable, Hashable {
let id: UUID
let name: String
}
struct ContentView: View {
let things: [Thing]
@State private var selectedThingId: UUID?
var body: some View {
NavigationSplitView {
ScrollView(.vertical) {
VStack {
ForEach(things) { thing in
Button("Thing: \(thing.name) \( selectedThingId == thing.id ? "selected" : "" )") {
selectedThingId = thing.id
}
}
SomeOtherViewHere()
Button("Navigate to something else") { selectedThingId = someSpecificId }
}
}
} detail: {
// ZStack is workaround for known SDK bug
ZStack {
if let selectedThingId {
Text("There is a thing ID: \(selectedThingId)")
} else {
Text("There is no thing.")
}
}
}
}
}
This actually works as expected on iPadOS and macOS, but not iOS (iPhone). Tapping changes the selection as I see in the button label, but does not push anything to navigation stack, I remain stuck at home screen.
Also filed as FB10332749.
The SwiftUI cookbook for navigation
RSS for tagDiscuss the WWDC22 Session The SwiftUI cookbook for navigation
Posts under wwdc2022-10054 tag
2 Posts
Selecting any option will automatically load the page
Post
Replies
Boosts
Views
Activity
I'm trying to implement the same UI used by the Settings app on iPad: a split view with two columns that are visible at all times.
This code produces the layout i want, but I would like to hide the "toggle sidebar visibility" button that the system introduces.
Is there a SwiftUI API I can use to hide this button? Maybe an alternate way to setup views that tells the system that the button is not necessary?
struct SomeView: View {
var body: some View {
NavigationSplitView(
columnVisibility: .constant(.all),
sidebar: { Text("sidebar") },
detail: { Text("detail") }
)
.navigationSplitViewStyle(.balanced)
}
}