使用 NavigationLink 打开新视图时如何隐藏 TabView？

Posted 2023-04-13

【中文标题】使用 NavigationLink 打开新视图时如何隐藏 TabView？

【英文标题】：How to hide TabView when opening a new view with NavigationLink?

【发布时间】：2021-02-01 11:17:51

【问题描述】：

假设我们有一个 SwiftUI 视图包含

struct ContentView: View 
    var body: some View 
        TabView 
            FirstView().tabItem 
                // tabItem image and text
            
            SecondView().tabItem 
                // tabItem image and text
            
        
    

现在，假设FirstView 包含一个带有可滚动内容的NavigationView，每个元素使用NavigationLink。我怎样才能使它在触发NavigationLink 目标时（即打开子视图）接管整个页面（全屏）并隐藏TabView？

理想情况下，我希望支持 ios 13+。

我尝试按照Hacking with Swift 的指导进行操作，但无济于事。

我也按照SwiftUI Hide TabView bar inside NavigationLink views中的建议，但发现***解决方案的性能不是很好，所以我希望能实现一个没有延迟出现的解决方案。

【问题讨论】：

这可能对你有帮助：***.com/a/63117839/8697793

【参考方案1】：

将 tabitem 的内容包含在检查共享状态的 if 条件中：

struct ContentView: View 

    @StateObject private var state = State()

    var body: some View 
        TabView 
            FirstView().tabItem 
                if !state.hideTabView 
                    // tabItem image and text
                
            
            SecondView().tabItem 
                if !state.hideTabView 
                    // tabItem image and text
                
            
        
        .environmentObject(state)
    

其中State 是ObservableObject，例如：

class State: ObservableObject 
    @Published hideTabView: Bool = false

然后您可以在通过NavigationLink 链接到的视图上使用onAppear（例如在FirstView 内部）：

struct FirstView: View 
    
    @EnvironmentObject private var state: State
    var body: some View 
        VStack 
            // ... some content
        
        .onAppear(perform:  state.hideTabView = true )
        .onDisappear(perform:  state.hideTabView = false )
    

当您按下“state.hideTabView = false 移动到点击该按钮的事件中。

这是我能想到的一种方法 :) 此外，您可能会发现 this thread 很有帮助。

【参考方案2】：

一种解决方案是从您的子视图（FirstView 和 SecondView）中删除您的 NavigationView，并在您的 TabView 之外放置一个 NavigationView。

NavigationView 
    TabView 
        //...
    

这会将您的TabView 适当地放入导航堆栈中，而不是将其作为导航堆栈的父级。这可能会产生不良结果，包括导航栏标题和 UI 更改，因为您将导航堆栈的根向上游移动，但这适用于我的用例。