隐藏导航栏但保留后退按钮 - SwiftUI答案

【问题标题】：Hide navigation bar but keep back button - SwiftUI隐藏导航栏但保留后退按钮 - SwiftUI
【发布时间】：2021-04-06 19:01:14
【问题描述】：

是否可以隐藏/删除 NavigationBar 但保持后退按钮可见？

我曾尝试隐藏整个导航栏并使用 NavigationLink 添加自定义后退按钮，但是当我按下后退时，我在第一个视图 (ProductList) 上获得了一个后退按钮，这是以前不存在的。

如果我必须创建一个自定义后退按钮，是否有不同于NavigationLink 的方法，就像我在Tab1View 中使用的那样，在导航返回时消除出现在ProductList 中的后退按钮？

这是第一个使用NavigationLink 到TabBar 的视图：

struct ProductList: View {
    ScrollView{
        VStack{
            ForEach(matchedItems) { item in
                NavigationLink(destination: TabView(product: item)){
                        Text("MoveToTabView")
                   }
                }
            }
         }
    }
}

然后我使用TabBar 隐藏NavigationBar：

 struct TabView: View {
    var product: ProductModel
    var body: some View {
        TabView {
            // TAB 1
            Tab1View(product: product).tabItem {
                    Text(product.detailTabNames[0])
                }
                .navigationBarTitle("")
                .navigationBarHidden(true)
            // TAB 2
            Tab2View(product: product).tabItem {
                    Text(product.detailTabNames[1])
                }
                .navigationBarTitle("")
                .navigationBarHidden(true)
        }
    }
}

最后是Tabbar 中的最后一个View，我将在其中添加我自己的自定义后退按钮：

struct Tab1View: View {
    var product: ProductModel
    var body: some View {
        ZStack(alignment: .topLeading) {
            Text("Tab1View")
            NavigationLink(destination: ProductList()){
                Image(systemName: "chevron.backward")
            }
        }
    }
}

【问题讨论】：

后退按钮是 NavigationBar 的组成部分。如果你隐藏栏，你需要自定义后退按钮。
@Asperi - 谢谢，我已经使用 NavigationLink 添加了一个自定义后退按钮，它位于代码的最后一点：NavigationLink(destination: ProductList()){ Image(systemName: "chevron .backward") }。通过这样做，它会导致我的原始视图 ProductList 有一个后退按钮，如果这有意义的话，原来的没有后退按钮？

标签： ios xcode swiftui

【解决方案1】：

为了保留后退导航功能，您仍然需要导航栏。使用您想要的视图执行此操作的方法是：

.navigationBarTitle("", displayMode: .inline)

除此之外，您还需要保持导航栏可见。否则，SwiftUI 将不会显示返回的导航链接。

【讨论】：

谢谢，这确实像我想要的那样隐藏了NavigationBar，但不幸的是，它将NavigationBar 填充保留在顶部，所以一切都在向下移动。如果我将NavigationBar 隐藏在一起，它会删除我所追求的填充。
在这种情况下，最好的办法是使用 ZStack 在顶部放置一个按钮，以充当后退按钮。
谢谢，我已经有了 ZStack 和 NavigationLink，它在最后一段代码中： NavigationLink(destination: ProductList()){ Image(systemName: "chevron.backward") } .通过这样做，它会导致我的原始视图 ProductList 有一个后退按钮，如果这有意义的话，原来的没有后退按钮？

【解决方案2】：

我似乎已经通过关注this 并使用@Environment 解决了我的问题

所以不要像这样在我的最终标签中使用NavigationLink：

ZStack(alignment: .topLeading) {
            Text("Tab1View")
            NavigationLink(destination: ProductList()){
                Image(systemName: "chevron.backward")
            }
}

我现在正在使用一个按钮，使用 @Environment 来关闭这样的视图：

struct Tab1View: View {

@Environment(\.presentationMode) var presentation

    var product: ProductModel
    var body: some View {
        ZStack(alignment: .topLeading) {
            Text("Tab1View")
            Button(action: {
                self.presentation.wrappedValue.dismiss()
            }, label: {
                Text("PressMe")
            })
        }
    }
}

这样做可以让我以同样的方式在 TabView 中隐藏NavigationBar：

.navigationBarTitle("")
.navigationBarHidden(true)

【讨论】：