Cross navigation with NavigationView

问题

I have the following structure

enum Page {
    case chapter1
    case chapter2
}

struct ContentView: View {
    @State var page: Page? = nil
    var body: some View {
        NavigationView {
            VStack {
                NavigationLink(destination: Chapter1(page: self.$page),
                               tag: .chapter1,
                               selection: self.$page) {
                    Text("Chapter 1")
                }
                NavigationLink(destination: Chapter2(page: self.$page),
                               tag: .chapter2,
                               selection: self.$page) {
                    Text("Chapter 2")
                }
            }
        }
    }
}

struct Chapter1: View {
    @Binding var page: Page?
    var body: some View {
        VStack {
            Button("Back to Overview") {
                self.page = nil
            } 
            Button("Chapter 2") {
                self.page = .chapter2
            }
        }
    }
}

struct Chapter2: View {
    @Binding var page: Page?
    var body: some View {
        VStack {
            Button("Back to Overview") {
                self.page = nil
            }
        }
    }
}

The moment I go from Chapter1 directly to Chapter2 it breaks the backlink in Chaper2.

Firstly, what is the reason for that?

Secondly, is there a way to transition from Chapter1 to Chapter2 with a different kind of animation, instead of duplicate back-and-forth flip?

回答1:

The NavigationView manger links on per-level base, so modifying other stack level can result it unexpected behaviour.

Here is a solution for the described use-case. Tested with Xcode 11.4 / iOS 13.4

struct TestNavigationByEnum: View {
    @State var page: Page? = nil
    var body: some View {
        NavigationView {
            VStack {
                NavigationLink(destination: Chapter1(page: self.$page),
                               tag: .chapter1,
                               selection: self.$page) {
                    Text("Chapter 1")
                }.isDetailLink(false) // important !!

                NavigationLink(destination: Chapter2(page: self.$page),
                               tag: .chapter2,
                               selection: self.$page) {
                    Text("Chapter 2")
                }.isDetailLink(false)
            }
        }
    }
}

struct Chapter1: View {
    @Binding var page: Page?
    var body: some View {
        VStack {
            Button("Back to Overview") {
                self.page = nil
            }
            // own level link
            NavigationLink(destination: Chapter2(page: self.$page)) {
                Text("Chapter 2")
            }.isDetailLink(false)
        }
    }
}

来源：https://stackoverflow.com/questions/61705302/cross-navigation-with-navigationview

标签

swiftui