带有 navigationLink 的 SwiftUI 消失后退按钮

Question

我有 3 个视图。其中一个有 NavigationView，第二个有 NavigationLink，最后一个只是带有工具栏的子项。

所以当我在最后一个视图中添加工具栏时我的问题 backButton 优雅消失了。我该如何解决这个问题？

Screen recording of my problem

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack {
                Text("Hello, world!")
                    .padding()
                NavigationLink(destination: ListView()) {
                    
                    Image(systemName: "trash")
                        .font(.largeTitle)
                        .foregroundColor(.red)
                }
            }.navigationBarHidden(true)
            .navigationTitle("Image")
        }
    }
}

---

import SwiftUI

struct ListView: View {
    @Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>

    var body: some View {
        VStack {
            List {
                NavigationLink(destination: DetailView()) {
                    Text("Detail")
                }
            }
            
        }.navigationBarTitle(Text("Data"), displayMode: .large)
        .toolbar {
            Button("Save") {
                presentationMode.wrappedValue.dismiss()
            }
        }
    }
}

---

import SwiftUI

struct DetailView: View {
    @Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>
    var body: some View {
        
        VStack {
            Text("DetailView")
                .padding()
        }.navigationBarTitle(Text("Data"), displayMode: .large)
        .toolbar {
            Button("Save") {
                presentationMode.wrappedValue.dismiss()
            }
        }
    }
}

Answer 1

在控制台中，您会注意到以下消息：

2021-04-27 12:37:36.862733-0700 MyApp[12739:255441] [Assert] displayModeButtonItem 是内部管理的，不会针对 DoubleColumn 样式公开。返回一个空的、断开连接的 UIBarButtonItem 以履行非空合同。

NavigationView 的默认样式通常为DefaultNavigationViewStyle、which is really just DoubleColumnNavigationViewStyle。请改用StackNavigationViewStyle，它按预期工作。

编辑：你说得对，StackNavigationViewStyle 会破坏 iPad 拆分视图。但幸运的是，DoubleColumnNavigationViewStyle 在 iPad 上运行良好，并且不会隐藏后退按钮。然后我们可以根据设备使用不同的NavigationStyle，如this answer所示。

struct ResponsiveNavigationStyle: ViewModifier {
    @Environment(\.horizontalSizeClass) var horizontalSizeClass

    @ViewBuilder
    func body(content: Content) -> some View {
        if horizontalSizeClass == .compact { /// iPhone
            content.navigationViewStyle(StackNavigationViewStyle())
        } else { /// iPad or larger iPhone in landscape
            content.navigationViewStyle(DoubleColumnNavigationViewStyle())
        }
    }
}

struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack {
                Text("Hello, world!")
                    .padding()
                NavigationLink(destination: ListView()) {
                    
                    Image(systemName: "trash")
                        .font(.largeTitle)
                        .foregroundColor(.red)
                }
            }
            .navigationBarHidden(true)
            .navigationTitle("Image")
        }
        .modifier(ResponsiveNavigationStyle()) /// here!
    }
}

结果：

iPad	iPhone