NavigationLink on detail NavigationSplitView breaks navigation stack hierarchy

225 Views Asked by At

For my Mac and iPad targets, I use on my app a NavigationSplitView with standard structure:

NavigationSplitView {
 FirstView()
 } content: {
SecondView()
 } detail: {
 ThirdView()
 }

In fact, thirdView (Detail view) only appears on this hierarchy at first launch, as it is really called from the SecondView, which contains a list of items:

struct SecondView: View {
  var body: some View {
    List(myData, id: \.id) { item in
      NavigationLink(destination: ThirdView(item: itemType)) {
                ItemCellView(item: itemCellType)

And finally, ThirdView itself containing its own NavigationLinks:

struct StudentDetailView: View {
  var body: some View {
    NavigationLink(destination: EvenMoreDetailedView(item: itemType)) {
       Label("More details", systemImage: "info")
        }

The problem is that, this way, although all navigation works perfectly from MainView to DetailView, when tapping on "More detail", EvenMoreDetailedView appears in its place (third panel), but without any "back" button or so, which I understand is due to any kind of inconsistency on navigation stack.

I have tried even adding this "back" button myself, but I don't know what code to add on the button to go back on navigation stack. I suposse, anyway there must be a better way...

1

There are 1 best solutions below

0
arroyot24 On

I myself have found the solution on Apple Official Documentation. On NavigationSplitView section, they say:

You can also embed a NavigationStack in a column. Tapping or clicking a NavigationLink that appears in an earlier column sets the view that the stack displays over its root view. Activating a link in the same column adds a view to the stack. Either way, the link must present a data type for which the stack has a corresponding navigationDestination(for:destination:) modifier.

So I embedded in a NavigationStack my DetailView. Now it works with no more code:

NavigationSplitView {
 FirstView()
 } content: {
SecondView()
 } detail: {
NavigationStack {
 ThirdView()
  }
}