ios SwiftUI如何用TabView隐藏导航栏

w51jfk4q  于 2023-02-17  发布在  iOS
关注(0)|答案(7)|浏览(245)

我在NavigationView内使用SwiftUI TabView,但我就是不能隐藏iOS 13.0模拟器中的导航栏.
下面是代码:

import SwiftUI

struct TestView: View {
    var body: some View {
        ZStack {
            Color.green
            Text("Hello")
        }
    }
}

struct ContentView: View {
    var body: some View {
        NavigationView {
            ZStack {
                Color.red
                TabView(selection: .constant(0),
                        content: {
                            TestView()
                                .tabItem { Text("test") }
                                .tag(0)
                                .navigationBarTitle("")
                                .navigationBarHidden(true)
                        })
            }

        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }

}

有人帮忙吗?谢谢!

gcuhipw9

gcuhipw91#

你看看这个

TabView {
        ECHomeView().tabItem {
            VStack {
                Text("Home")
                Image.Home.renderingMode(.template)
            }
        }.navigationBarHidden(true)
        ECMyClaimsView().tabItem {
            VStack {
                Text("My Claims")
                Image.Myclaims.renderingMode(.template)
            }
        }.navigationBarHidden(true).navigationBarTitle("")
        ECAddClaimView().tabItem {
            VStack {
                Text("Create")
                Image.Create.renderingMode(.template)
            }
        }.navigationBarHidden(true).navigationBarTitle("")
        ECMyApprovalsView().tabItem {
            VStack {
                Text("My Approvals")
                Image.MyApprovals.renderingMode(.template)
            }
        }.navigationBarHidden(true).navigationBarTitle("")
        ECMenuView().tabItem {
            VStack {
                Text("Menu")
                Image.Menu.renderingMode(.template)
            }
        }.navigationBarHidden(true).navigationBarTitle("")
    }
insrf1ej

insrf1ej2#

我想是系统故障。我也有同样的问题。

这是我的解决方案

1.添加UIApplication扩展名

https://stackoverflow.com/a/30858591/12496427

extension UIApplication {
    class func topViewController(controller: UIViewController? = UIApplication.shared.keyWindow?.rootViewController) -> UIViewController? {
        if let navigationController = controller as? UINavigationController {
            return topViewController(controller: navigationController.visibleViewController)
        }
        if let tabController = controller as? UITabBarController {
            if let selected = tabController.selectedViewController {
                return topViewController(controller: selected)
            }
        }
        if let presented = controller?.presentedViewController {
            return topViewController(controller: presented)
        }
        return controller
    }
}

2.在onAppear()函数中使用

struct TestView: View {
    var body: some View {
        ZStack {
            Color.green
            Text("Hello")
        }
/////// HERE ////////
        .onAppear { 
            UIApplication.topViewController()?
               .navigationController?.isNavigationBarHidden = true
        }
/////// HERE ////////
    }
}

struct ContentView: View {
    var body: some View {
        NavigationView {
            ZStack {
                Color.red
                TabView(selection: .constant(0),
                        content: {
                            TestView()
                                .tabItem { Text("test") }
                                .tag(0)
                                .navigationBarTitle("")
                                .navigationBarHidden(true)
                        })
            }

        }
    }
}
vs91vp4v

vs91vp4v3#

在要隐藏NavigationView的视图中,使用.navigationBarHidden(true)将其隐藏。

struct TestView: View {
    var body: some View {
        ZStack {
            Color.green
            Text("Hello")
        }
        .navigationBarHidden(true)
    }
}

如果您不想使用大的NavigationView,请使用.navigationBarTitleDisplayMode(.inline)来缩小大小,并继续使用ToolBarItems

oxiaedzo

oxiaedzo4#

如果你可以访问设置是否显示导航栏的布尔值,你就可以解决这个问题,但是这并不令人愉快--我认为这个问题背后一定有bug。
包含TabViewNavigationView有一个修饰符来控制导航条是否显示。

NavigationView {
                NavigationLink(destination:
                                TabBarScreen(domainDependencies: domainDependencies).environmentObject(navState),
                               isActive: $navState.initialNavMainLink) {
                    EmptyView()
                }.isDetailLink(false)
            }
            .navigationViewStyle(StackNavigationViewStyle())
            //the property here governs hiding of nav bar:
            .navigationBarHidden(navState.initialNavBarHidden)

我把这个属性(initialNavBarHidden)放在我的NavState类中,这个对象包含了我整个应用程序导航的所有导航链接等,这个对象放在@environment中,所以我可以在任何地方使用它。
在每个标签的.onAppear上,如果我将该属性设置为false,然后设置为true,使用DispatchQueue.main.asyncAfter ..并在它们之间设置一个短间隔,那么问题就解决了。正如我所说,这是一个黑客,但它工作。在研究了这个问题几天后,我无法得到任何其他工作。
我在navState类中有一个函数,如下所示:

func tabBarBugFix() {
        DispatchQueue.main.asyncAfter(deadline: .now()) {
            self.initialNavBarHidden = false
            DispatchQueue.main.asyncAfter(deadline: .now() + 0.00001) {
                self.initialNavBarHidden = true
            }
        }
    }

对于每个选项卡页面,我将其命名为onAppear,例如:

struct PostPage: View {
    
    @EnvironmentObject var navState: NavState
    
    var body: some View {
        Text("Create a Post")
            .onAppear() {
                navState.tabBarBugFix()
            }
    }
}

你会遇到一个很小的视觉故障,这很可怕,但很短暂。作为一个更好的解决方案,我实际上打算把我的标签栏完全从NavigationView中拿出来,因为这就是错误发生的地方。

yx2lnoni

yx2lnoni5#

我也遇到了同样的问题,尽管我用.navigationBarHidden(true).navigationBarTitle("")装饰了每个视图,但当我在iOS 15系列上从另一个视图移到TabView时,顶部空间并没有隐藏。
所以我尝试了下面的方法,即使从另一个视图移动到TabView,顶部空间也能正确隐藏。
下面是一个简单的示例。

@State var selectedTab: TestTab = .test1
@State var test1ViewNavigationBarHidden = false
@State var opacity = 0.0

var body: some View {
    ZStack {
        NavigationView {
            TabView(selection: $selectedTab) {
                Test1View()
                    .navigationBarHidden(test1ViewNavigationBarHidden)
                    .navigationBarTitle("")
                    .onAppear{
                        Task {
                            try! await Task.sleep(seconds: UInt64(0.001))
                            test1ViewNavigationBarHidden = true
                        }
                    }
                    .tag(TestTab.test1)

                Test2View()
                    .navigationBarHidden(true).navigationBarTitle("")
                    .tag(TestTab.test2)

                Test3View()
                    .navigationBarHidden(true).navigationBarTitle("")
                    .tag(TestTab.test3)
            }
        }
        .navigationViewStyle(StackNavigationViewStyle())
    }
    .opacity(opacity)
    .onAppear {
        withAnimation(.linear(duration: 0.3)) {
            opacity = 1.0
        }
    }
}

.navigationBarHidden(false)被应用于TabView的第一个视图,经过一段延迟后,它被设置为true。
因为它在显示时会 Flink 片刻,所以如果在显示RootView时使用动画,它会显示得很好。
它看起来可能有点咄咄逼人,但在我的项目中工作得很好。

vptzau2j

vptzau2j6#

你已经用.navigationBarHidden(true)隐藏了导航栏.在这里你看到了safe area,所以你可以让你的视图扩展到安全区域通过使用.ignoresSafeArea()

struct ContentView: View {
    var body: some View {
        NavigationView {
            ZStack {
                Color.red
                
                TabView(selection: .constant(0),
                        content: {
                            TestView()
                                .tabItem { Text("test") }
                                .tag(0)
                                .navigationBarTitle("")
                                .navigationBarHidden(true)
                                .ignoresSafeArea() //<-here
                        })
            }
            
        }
    }
}

第一节第一节第一节第一节第一次

g9icjywg

g9icjywg7#

负填充技巧怎么样?

struct ContentView: View {
  var body: some View {
    NavigationView {
      TabView {
        List(1 ..< 40, id: \.self) {
          Text("A" + $0.description)
        }.tag(1).navigationBarHidden(true).navigationBarTitleDisplayMode(.inline)
        List(1 ..< 40, id: \.self) {
          Text("B" + $0.description)
        }.tag(2).navigationBarHidden(true).navigationBarTitleDisplayMode(.inline)
      }.padding(.bottom, -50) // <- trick
    }
  }
}

相关问题