SwiftUI 使用 NavigationBar 显示/隐藏标题问题

Posted 2023-04-13

【中文标题】SwiftUI 使用 NavigationBar 显示/隐藏标题问题

【英文标题】：SwiftUI show/hide title issues with NavigationBar

【发布时间】：2020-07-14 16:49:24

【问题描述】：

我有以下代码结构，这给我带来了很多麻烦：

//Main View
struct ContentView: View 

    var body: some View 
        NavigationView
            ZStack(alignment: .center)
                CarouselBuilder()
                ProfileInvoke().navigationBarTitle("").navigationBarHidden(true)
            
        
    


//Carousel filled with Cards from a DB 
...code irrelevant for my problem

//Profile Invoke -> Invokes a slide out menu called Menu that has NavigationLinks in it
struct Menu: View 
    var body: some View 
        ZStack
            VStack(alignment: .center)
                    MenuButton(buttonText: "Settings", buttonCallView: AnyView(SettingsView() ))
                    MenuButton(buttonText: "My Favourites", buttonCallView: AnyView(MyFavouritesView()))
                    MenuButton(buttonText: "Sign Out", buttonCallView: AnyView(SignOutView()))
            .frame(width: UIScreen.main.bounds.width/1.2,alignment: .top)
        
    


//MenuButtons are basic NavigationLinks linking to certain Views given as argument when calling them

我现在确实将 ZStack 包装在 NavigationView 的主视图中，我需要这样做才能使 NavigationLinks 工作。我还必须在这个“***”级别上执行此操作，因为我需要将由滑出菜单中的链接调用的新视图来占据整个屏幕，而不仅仅是显示滑出视图的宽度。

我现在的问题是我当然不希望导航栏占用主视图中的空间。为此，我将其隐藏属性设置为 true。这会贯穿整个应用程序，并且还会禁用由菜单中的按钮链接到的子视图中的导航视图。这让我无法回头。

我的问题是： 1）有没有更优雅的方式来做这一切？ 2) 如何在子视图中重新调用导航栏？ （将它们的隐藏导航栏属性设置回 false 不起作用。

【参考方案1】：

以下是在根视图中隐藏导航栏并在子子视图中显示的可能方法。唯一需要的修改是在根视图中。

使用 Xcode 11.4 / ios 13.4 测试

这里只是一个根，子子视图是常规的，在这种情况下不需要特殊代码。内联查看重要说明。

struct RootNavigationView: View 
    @State private var hideBar = true // << track hide state, and default
    var body: some View 
        NavigationView 
            VStack 
                Text("I'm ROOT")
                Divider()
                NavigationLink("Goto Child", destination: NextChildView(index: 1))
                 .simultaneousGesture(TapGesture().onEnded 
                    self.hideBar = false     // << show, here to be smooth !!
                 )
            
            .navigationBarHidden(hideBar)
        //    .navigationBarTitle("Back to Root") // << optional 
            .onAppear 
                self.hideBar = true  // << hide on back
            
        
    

【讨论】：

非常感谢您为演示所做的努力。这工作正常。非常感谢！

如果您在RootNavigationView 的顶部添加一些视图，您会看到它被导航栏的大小所抵消，即使导航栏不可见。仅当在根上使用 navigationBarTitle 时，此偏移才会消失。但是在这种情况下，当导航到子视图时，您会在根顶部看到一个难看的视图跳转...

我也有同样的经历。不得不重新考虑我的设计以做其他事情，这样我才能摆脱它......