带有导航链接的 SwiftUI 消失后退按钮 [英] SwiftUI disappear back button with navigationLink

问题描述

我有 3 个视图.其中一个有 NavigationView，第二个有 NavigationLink，最后一个只有工具栏的孩子.

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

I have 3 views. One of these have NavigationView second have NavigationLink and last just a child with toolbar.

So my problem when I added toolbar in last view backButton elegant disappear. How can I solve this?

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

解决方案

In the console, you'll notice this message:

2021-04-27 12:37:36.862733-0700 MyApp[12739:255441] [Assert] displayModeButtonItem is internally managed and not exposed for DoubleColumn style. Returning an empty, disconnected UIBarButtonItem to fulfill the non-null contract.

The default style for NavigationView is usually DefaultNavigationViewStyle, which is really just DoubleColumnNavigationViewStyle. Use StackNavigationViewStyle instead, and it works as expected.

Edit: You are right that StackNavigationViewStyle will break iPad split view. But thankfully, DoubleColumnNavigationViewStyle works fine in iPad and doesn't hide the back button. We can then just use a different NavigationStyle depending on the device, as shown in 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!
    }
}

Result:

iPad	iPhone

这篇关于带有导航链接的 SwiftUI 消失后退按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！