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

Posted 2023-02-24

【中文标题】隐藏导航栏但保留后退按钮 - SwiftUI

【英文标题】：Hide navigation bar but keep back button - 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 有一个后退按钮，如果这有意义的话，原来的没有后退按钮？

【参考方案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)