SwiftUI，视图和标签栏之间的空白

Posted 2023-02-23

【中文标题】SwiftUI，视图和标签栏之间的空白

【英文标题】：SwiftUI, White space between view and tabbar

【发布时间】：2021-04-26 12:28:38

【问题描述】：

在我的视图和自定义标签栏之间有一个神秘的空白区域，我似乎无法使用 .edgesIgnoreSafeArea 或 .ignoreSafeArea 将其删除。其他人是否遇到同样的问题/对此有解决方案？

我尝试使用不同的技术和代码，但似乎没有任何效果。我在 VStack 中添加了一个带有灰色背景的标签，以使问题更加明显。请看一下，如果这可能是我的错误或问题，请告诉我。

我的代码：

  import SwiftUI

    struct MotherView : View 
        @EnvironmentObject var viewRouter: ViewRouter
    
    var body: some View 
        
        
        GeometryReader  geometry in
            
            VStack 
            
                
                    switch viewRouter.currentPage 
                    case .home:
                        
                                            
                        VStack 
                            Text("hello world")
                        
                        .edgesIgnoringSafeArea(.bottom)
                        .frame(width: geometry.size.width, height: geometry.size.height - 50)
                        .background(Color(#colorLiteral(red: 0.501960814, green: 0.501960814, blue: 0.501960814, alpha: 1)))
                        
                        
                    case .search:
                        SearchView()
                        
                    case .favorites:
                        FavoriteView(fontSize: 12.0)
        

                    
                        case .settings:
                            SettingsView()
                            
                            
                    
    
    
                    
                Spacer()
                    
            
                

                

    VStack 

                    Divider().ignoresSafeArea()

                    HStack 
                        tabbarIcon(width: geometry.size.width, height: geometry.size.height, systemIconName: "house", sytemFillIcon: "house.fill", tabName: "Home", assignedPage: .home)

                        tabbarIcon(width: geometry.size.width, height: geometry.size.height, systemIconName: "magnifyingglass", sytemFillIcon: "magnifyingglass", tabName: "Search", assignedPage: .search)

                        tabbarIcon(width: geometry.size.width, height: geometry.size.height, systemIconName: "bookmark", sytemFillIcon: "bookmark.fill", tabName: "Favorites", assignedPage: .favorites)

                        tabbarIcon(width: geometry.size.width, height: geometry.size.height, systemIconName: "gearshape.2", sytemFillIcon: "gearshape.2.fill", tabName: "Settings", assignedPage: .settings)
                    
                    .frame(width: geometry.size.width, height: geometry.size.height/10)




                
            
            
            
                
                
            
                
                
                
            
            .edgesIgnoringSafeArea(.bottom)
            
            
        
    




    struct tabbarIcon: View 
    
    @State var scale : CGFloat = 1
    @EnvironmentObject var viewRouter: ViewRouter
    let width, height: CGFloat
    let systemIconName,sytemFillIcon, tabName: String
    let assignedPage: Page
    
    var body: some View 
        
        
            Button(action:
                
                if viewRouter.currentPage != assignedPage 
                    viewRouter.currentPage = assignedPage
                
                
                
                
                
             )
                VStack 
                    
                    
                    ZStack 
                        
                        Image(systemName: sytemFillIcon)
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .opacity(viewRouter.currentPage == assignedPage ? 1 : 0)
                        
                        Image(systemName: systemIconName)
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .opacity(viewRouter.currentPage == assignedPage ? 0.0 : 1)
                        
                        
                        
                        
                    
                    
                    
                    
                    //4 icons so /4 of the width of the screen.
                    .frame(width: width/4, height: height/40)
                    
                    Spacer()
                    
                
                .foregroundColor(viewRouter.currentPage == assignedPage ? Color("ShadowCard") : Color("Accentgreen"))
                
            
        
            //Scaling effect when pressed
            .buttonStyle(ScaleButtonStyle())
            
            
        
        
        
        
    



    struct ScaleButtonStyle: ButtonStyle 
        func makeBody(configuration: Self.Configuration) -> some View 
            configuration.label
                .scaleEffect(configuration.isPressed ? 0.8 : 1)
                .animation(.spring(response: 0.15, dampingFraction: 0.6, blendDuration: 1.5))
                
        
    

截图： mysterious white space

【参考方案1】：

这是因为所有VStacks 在元素之间都有默认间距。将所有有问题的VStack ... 替换为：

VStack(spacing: 0)  
    ...

但是，要放置“TabBar”，建议使用ZStack 而不是VStack。

ZStack(alignment: .bottom) 
    
    ContentView()
    TabBar()

【讨论】：

就是这样.. 非常感谢！几天来一直在为这个问题出汗。