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

Question

假设我们有一个 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 中的指导进行操作，但无济于事。

我还遵循了NavigationLink 视图中的SwiftUI Hide TabView bar 中的建议，但发现顶级解决方案的性能并不高，所以我希望实现一个没有延迟出现的解决方案。

Answer 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 })
    }
}

当您按下“< Back”时，TabView 再次出现会有轻微的延迟，如果这真的让您感到困扰，那么您可以制作一个自定义的“后退”按钮并将此state.hideTabView = false移动到点击该按钮的事件中。

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

Answer 2

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

NavigationView {
    TabView {
        //...
    }
}

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