I try to create a Navigation that works on iPhone, iPhone Duo and iPad. NavigationSplitView collapses for compact form factors and makes iPhone Duo support much simpler. The Problem is the semantic of the collapse. Switch from detail to sidebar on compact is not a 'back' action in my case. It should have my choosen Icon and has a meaning. So i wanted to control this using the NavigationSpliViewColumn Binding. This does work forward and backward as long as no NavigationStack was used before. But it stops working when you return to the detail root from a Navigation-Action. I left the Backbutton visible so you can test, that it continues to work, when no Navigation-Action preceeded the switch. Here is my Code:
import SwiftUI
@Observable
final class Compass {
var path: [Route]
init() {
self.path = []
}
}
enum Route: Hashable {
case goal
}
struct ContentView: View {
@Environment(\.horizontalSizeClass) private var hsize
@State private var compass: Compass = Compass()
@State var column: NavigationSplitViewColumn = .detail
var body: some View {
NavigationSplitView(preferredCompactColumn: $column) {
OverviewScreen(column: $column)
} detail: {
TodayScreen()
.toolbar {
ToolbarItem(placement: .topBarLeading) {
Button("overview", systemImage: "calendar") {
self.column = .sidebar
}
}
}
}
.environment(compass)
.onChange(of: column) { old, new in
print("column:", old, "→", new)
}
}
}
struct OverviewScreen: View {
@Binding var column: NavigationSplitViewColumn
@Environment(Compass.self) var compass
var body: some View {
@Bindable var compass = self.compass
ScrollView {
Text("Overview")
.font(.largeTitle)
.fontWeight(.heavy)
Button("Switch") {
self.column = .detail
}
}
}
}
struct TodayScreen: View {
@Environment(Compass.self) var compass
var body: some View {
@Bindable var compass = self.compass
NavigationStack(path: $compass.path) {
ScrollView {
Text("Today")
.font(.largeTitle)
.fontWeight(.heavy)
Button("Goals programtically", systemImage: "flag.fill") {
self.compass.path = [.goal]
}
NavigationLink(value: Route.goal) {
Label("Goal Link", systemImage: "flag.fill")
}
}
.navigationDestination(for: Route.self, destination: self.screen)
}
}
@ContentBuilder
func screen(for route: Route) -> some View {
switch route {
case .goal:
Text("Goals")
}
}
}
#Preview {
ContentView()
}This seems unexpected behaviour. If you ask AI the mental model is NavigationSplitViewColumn represents which column is currently visible for the user. That model would be wrong. Also i can't understand why a NavigationStack has to change the Binding? What am i missing here? Is my idea of the programmatic switch not supported? There are other ways to push from compact to your detail column again, but they all have trade-offs or run into other problems. I would appreciate any help here. AI has not understood this and only does surface level work arounds that fix nothing.
0
0
32