在 SwiftUI 中的特定页面上隐藏标签栏

Posted

技术标签:

【中文标题】在 SwiftUI 中的特定页面上隐藏标签栏【英文标题】:Hiding tab bar on a specific page in SwiftUI 【发布时间】:2019-11-26 02:20:20 【问题描述】:

我正在我的应用程序中使用相机。该应用程序允许您借助 SwiftUI 中的 TabView 导航到此相机视图。但是,问题是,当我在相机视图中时,我想让TabView 隐藏。到目前为止,我一直在努力寻找解决方案,但似乎找不到任何解决方案。

这是screenshot of the code and the view with the tabview

注意:截图中包含预览图。当我在真实设备上运行时,相机工作正常。问题是我需要在进入相机视图后隐藏标签栏。

这是我正在使用的代码示例:

import SwiftUI

struct AppView: View 
    var body: some View 
        TabView
            Home()
                .tabItem 
                    // Add icon
                Text("Home")
            

            MomentsCam()
                .tabItem 
                    // Add icon
                    Text("Camera")
            .navigationBarHidden(true)

            Moments()
                .tabItem
                    //Add icon
                     Text("Moments")
            
        
    

【问题讨论】:

与其提供代码的屏幕截图,不如在这个问题中提供实际代码。否则你会被否决,我选择关闭它,直到你这样做。 我已经添加了代码的副本。 【参考方案1】:

我根据您的情况使用 TabView 更新了 my solution。相同的想法:您使用的是ZStack@State var selection。这个想法是使用.opacityTabViewYourCameraView(在我的示例中只是Image(systemName: "plus.circle")):

struct TabViewModel: View 

    @State var selection: Int = 0

    var body: some View 

        ZStack 
            GeometryReader  geometry in
                TabView(selection: self.$selection) 

                    Text("list")
                        .tabItem 
                            Image(systemName: "list.bullet.below.rectangle")
                    .tag(0)

                    Text("plus")
                        .tabItem 
                            Image(systemName: "camera")
                    .tag(1)

                    Text("more categories!")
                        .tabItem 
                            Image(systemName: "square.grid.2x2")
                    .tag(2)
                
                .opacity(self.selection == 1 ? 0.01 : 1)

                Image(systemName: "plus.circle")
                    .resizable()
                    .frame(width: 60, height: 60)
                    .shadow(color: .gray, radius: 2, x: 0, y: 5)
                    .offset(x: geometry.size.width / 2 - 30, y: geometry.size.height - 80)
                    .onTapGesture 
                        self.selection = 0
                
                .opacity(self.selection == 1 ? 1 : 0)
            

        

    

当您点击相机时 tabItem TabView 变得不可见

【讨论】:

【参考方案2】:

您可以根据需要尝试以下代码。

  struct MomentsCam: View 
                var body: some View 
                    Text("Cam")
                
            

            struct Moments: View 
                var body: some View 
                    Text("Moments Cam")
                
            
            struct AppView: View 

                @State var  showCamera = false
                var body: some View 

                      GeometryReader p in
                    ZStack
                    TabView
                        Home()
                            .tabItem 
                                // Add icon
                            Text("Home")
                        

                        Text("holder")
                            .tabItem 
                                // Add icon
                                Text("Camera")
                        .navigationBarHidden(true).onAppear
                            self.showCamera = true
                            print(p.size)
                        

                        Moments()
                            .tabItem
                                //Add icon
                                 Text("Moments")
                        
                    
                        if self.showCamera
                    MomentsCam().frame(width: p.size.width, height: p.size.height).background(Color.white)
                            
                        
                    
                
            

【讨论】:

以上是关于在 SwiftUI 中的特定页面上隐藏标签栏的主要内容,如果未能解决你的问题,请参考以下文章

在特定子页面上隐藏 Ionic TabBar (IONIC 3)

如何计算 SwiftUI 中的标签栏高度?

如何隐藏特定屏幕上的顶部标签栏?

如何使用 SwiftUI 显示全栈模式?

PhoneGap - 隐藏标签栏页面开关上的后退按钮

隐藏标签栏并在该位置添加工具栏