In my app I have a NavigationStack
inside the detail
of a NavigationSplitView
. With the code below the navigation back and forward works fine but if from the detail, I incompletely swipe left to dismiss the view, the NavigationLink
doesn't work anymore. This code is partially copied from Apple Documentation.
Does anyone know what causes the problem?
struct ContentView: View {
let colors: [Color] = [.purple, .pink, .orange]
@State private var selection: Color? = nil
var body: some View {
NavigationSplitView {
List(colors, id: \.self, selection: $selection) { color in
NavigationLink(color.description, value: color)
}
} detail: {
NavigationStack {
if let color = selection {
VStack {
NavigationLink(color.description, value: color)
}
.navigationDestination(for: Color.self) { color in
RoundedRectangle(cornerRadius: 10)
.fill(color)
.frame(width: 150, height: 150)
}
} else {
Text("Pick a color")
}
}
}
}
}
EDIT:
I've made some code improvements creating separate struct
for each view to avoid confusion and better understand the code but the problem persist.
struct ContentView: View {
let colors: [Color] = [.purple, .pink, .orange]
@State private var selection: Color? = nil
var body: some View {
NavigationSplitView {
List(colors, id: \.self, selection: $selection) { color in
NavigationLink(color.description, value: color)
}
} detail: {
NavigationStack {
if let color = selection {
DetailView(color: color)
} else {
Text("Pick a color")
}
}
}
}
}
struct DetailView: View {
let color: Color
var body: some View {
VStack {
NavigationLink("Go to third view", value: color)
.padding()
.background(color)
.foregroundColor(.white)
}
.navigationTitle("Detail View")
.navigationDestination(for: Color.self) { color in
ThirdView(color: color)
}
}
}
struct ThirdView: View {
let color: Color
var body: some View {
RoundedRectangle(cornerRadius: 10)
.fill(color)
.frame(width: 150, height: 150)
.navigationTitle("Third View")
}
}