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

Question

在我的视图和自定义标签栏之间有一个神秘的空白区域，我似乎无法使用 .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

Answer 1

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

VStack(spacing: 0) { 
    ...
}

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

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

}