SwiftUI在NavigationLink视图中隐藏TabView栏

问题描述

我有一个TabView和每个Tab项目单独的NavigationView堆栈.它工作正常，但是当我打开任何NavigationLink时，仍会显示TabView栏.每当我单击任何NavigationLink时，我都希望它消失.

I have a TabView and separate NavigationView stacks for every Tab item. It works well but when I open any NavigationLink the TabView bar is still displayed. I'd like it to disappear whenever I click on any NavigationLink.

struct MainView: View {
    @State private var tabSelection = 0

    var body: some View {
        TabView(selection: $tabSelection) {
            FirstView()
                .tabItem {
                    Text("1")
                }
                .tag(0)
            SecondView()
                .tabItem {
                    Text("2")
                }
                .tag(1)
        }
    }
}

struct FirstView: View {
    var body: some View {
        NavigationView {
            NavigationLink(destination: FirstChildView()) { // How can I open FirstViewChild with the TabView bar hidden?
                Text("Go to...")
            }
            .navigationBarTitle("FirstTitle", displayMode: .inline)
        }
    }
}

我找到了一种将TabView放在NavigationView内的解决方案，因此，在单击NavigationLink之后，TabView栏被隐藏了.但这搞乱了Tab项目的NavigationBarTitles.

I found a solution to put a TabView inside a NavigationView, so then after I click on a NavigationLink the TabView bar is hidden. But this messes up NavigationBarTitles for Tab items.

struct MainView: View {
    @State private var tabSelection = 0

    var body: some View {
        NavigationView {
            TabView(selection: $tabSelection) {
                ...
            }
        }
    }
}

struct FirstView: View {
    var body: some View {
        NavigationView {
            NavigationLink(destination: FirstChildView()) {
                Text("Go to...")
            }
            .navigationBarTitle("FirstTitle", displayMode: .inline) // This will not work now
        }
    }
}

使用此解决方案，每个TabView项具有不同的NavigationTabBars的唯一方法是使用嵌套的NavigationViews.也许有一种方法可以正确实现嵌套的NavigationViews? (据我所知，导航层次结构中应该只有一个NavigationView.)

With this solution the only way to have different NavigationTabBars per TabView item, is to use nested NavigationViews. Maybe there is a way to implement nested NavigationViews correctly? (As far as I know there should be only one NavigationView in Navigation hierarchy).

如何在SwiftUI中正确隐藏NavigationLink视图中的TabView栏?

How can I hide TabView bar inside NavigationLink views correctly in SwiftUI?

推荐答案

可能的解决方法可以基于TabBarAccessor. >以编程方式在SwiftUI中检测标签栏或TabView的高度

The possible workaround solution can be based on TabBarAccessor from my answer on Programmatically detect Tab Bar or TabView height in SwiftUI

这是保留NavigationView的选项卡项中的必需修改.使用Xcode 11.4/iOS 13.4进行了测试

Here is a required modification in tab item holding NavigationView. Tested with Xcode 11.4 / iOS 13.4

struct FirstTabView: View {
    @State private var tabBar: UITabBar! = nil

    var body: some View {
        NavigationView {
            NavigationLink(destination:
                FirstChildView()
                    .onAppear { self.tabBar.isHidden = true }     // !!
                    .onDisappear { self.tabBar.isHidden = false } // !!
            ) {
                Text("Go to...")
            }
            .navigationBarTitle("FirstTitle", displayMode: .inline)
        }
        .background(TabBarAccessor { tabbar in   // << here !!
            self.tabBar = tabbar
        })
    }
}

注意:或者当然，如果FirstTabView应该是可重用的并且可以独立实例化，则应该将内部的tabBar属性设为可选，并明确处理不存在的tabBar.

Note: or course if FirstTabView should be reusable and can be instantiated standalone, then tabBar property inside should be made optional and handle ansbsent tabBar explicitly.

这篇关于SwiftUI在NavigationLink视图中隐藏TabView栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！