使用 NavigationView 进行交叉导航答案

【问题标题】：Cross navigation with NavigationView使用 NavigationView 进行交叉导航
【发布时间】：2020-05-10 12:28:15
【问题描述】：

我有以下结构

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
            }
        }
    }
}

当我从Chapter1 直接转到Chapter2 时，它会破坏Chaper2 中的反向链接。

首先，这是什么原因？

其次，有没有办法通过不同类型的动画从Chapter1 过渡到Chapter2，而不是重复的来回翻转？

【问题讨论】：

标签： swiftui

【解决方案1】：

NavigationView 管理器链接基于每个级别，因此修改其他堆栈级别可能会导致意外行为。

这里是所描述用例的解决方案。使用 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)
        }
    }
}

【讨论】：