SwiftUI NavigationView 與列表編程導航不起作用

Question

我正在嘗試在 NavigationView 中進行編程導航，但由於某種原因，我無法在視圖之間切換。 從父視圖切換時，一切正常 - 但是當我在其中一個子視圖中嘗試切換時，我會得到這種奇怪的行為（屏幕來回切換）。 我嘗試禁用動畫，但這沒有幫助。 奇怪的是，如果我與.navigationViewStyle(StackNavigationViewStyle())一起刪除一個列表，一切都會開始工作 - 但我需要一個列表。

這似乎有點類似於Deep programmatic SwiftUI NavigationView 導航，但我沒有深度嵌套，它仍然不起作用。

我正在使用 iOS 14。

struct TestView: View {
    @State private var selection: String? = nil

    var body: some View {
        VStack {
            NavigationView {
                VStack {
                    List {
                        NavigationLink(destination: Text("View A"), tag: "A", selection: self.$selection) { Text("A") }
                        NavigationLink(destination: Text("View B"), tag: "B", selection: self.$selection) { Text("B") }
                    }
                }
                .navigationTitle("Navigation")
            }
            .navigationViewStyle(StackNavigationViewStyle())
            Button("Tap to show A") {
                selection = "A"
            }.padding()
            Button("Tap to show B") {
                selection = "B"
            }.padding()
        }
    }
}

struct TestView_Previews: PreviewProvider {
    static var previews: some View {
        TestView()
    }
}

這是我得到的行為：

Answer 1

導航視圖/鏈接旨在直接從父級操作到子級，如果您破壞了該順序，則不應通過 NavLink 使用導航。

您需要做的是使用我認為可以很好地解決您的問題的fullScreenCover 。 復制並粘貼代碼以了解我的意思。

import SwiftUI

struct TestNavView: View {
    @State private var selection: String? = nil
    @State private var isShowing = false
    @Environment(\.presentationMode) var pMode

    var body: some View {
        VStack {
            NavigationView {
                VStack {
                    List {
                        NavigationLink(destination: Text("View A"), tag: "A", selection: self.$selection) { Text("A") }
                        NavigationLink(destination: Text("View B"), tag: "B", selection: self.$selection) { Text("B") }
                    }.fullScreenCover(isPresented: $isShowing, content: {
                        CView()
                    })
                    
                }
                .navigationTitle("Navigation")
            }
            .navigationViewStyle(StackNavigationViewStyle())
            Button("Tap to show A") {
                selection = "A"
            }.padding()
            Button("Tap to show B") {
                isShowing = true
                selection = "B"
            }.padding()
            Button("Tap to show C") {
                isShowing = true
            }.padding()
        }
    }
}

struct TestView_Previews: PreviewProvider {
    static var previews: some View {
        TestNavView()
    }
}

struct CView: View {
    @Environment(\.presentationMode) var pMode
    var body: some View {
        VStack {
            Button("Back") {self.pMode.wrappedValue.dismiss() }
            Spacer()
        Text("C")
            Spacer()
        }

    }
}

Answer 2

如果您只希望呈現的視圖占據屏幕的一半，我建議使用 ZStack 將視圖呈現在主 window 的頂部。 您可以將自己的自定義后退按鈕添加到左上角（或其他位置）。 這將允許兩種視圖輕松呈現和切換。 您還可以添加 withAnimation() 以使疊加的視圖很好地呈現。