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

【问题标题】：How to hide TabView when opening a new view with NavigationLink?使用 NavigationLink 打开新视图时如何隐藏 TabView？
【发布时间】：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中的建议，但发现顶级解决方案的性能不是很好，所以我希望能实现一个没有延迟出现的解决方案。

【问题讨论】：

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

标签： ios swiftui swiftui-navigationlink swiftui-navigationview swiftui-tabview

【解决方案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 更改，因为您将导航堆栈的根向上游移动，但这适用于我的用例。

【讨论】：