使用 NavigationView 进行交叉导航 [英] Cross navigation with NavigationView

问题描述

我有以下结构

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 中的反向链接.

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

首先，这是什么原因?

第二，有没有办法用不同的动画从Chapter1 过渡到Chapter2，而不是重复的来回翻转?

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

推荐答案

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

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

这是所描述用例的解决方案.使用 Xcode 11.4/iOS 13.4 测试

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

这篇关于使用 NavigationView 进行交叉导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！