TabBar与NavigationBar出现空白区域问题排查求助

Hey there, let's fix that mysterious blank space around your Navigation Bar and Tab Bar! Based on your code and the issue description, here are targeted troubleshooting steps and fixes:

1. 移除MainView中导致内容居中的多余Spacer #

Looking at your MainView code, you've added Spacer() above and below your content switch statement. These spacers are forcing your main content to stay in the center of the screen, which creates blank space both below the Navigation Bar and above your custom Tab Bar.

Fix: Remove the two Spacer() lines in the VStack:

// 修改前的MainView VStack
VStack {
    Spacer() // 移除这个
    switch viewRouter.currentPage {
    // ... 页面内容
    }
    Spacer() // 移除这个
    HStack {
        // TabBarIconView 内容
    }
    // ... TabBar的frame和背景设置
}

2. 调整Safe Area的处理逻辑 #

You're using multiple edgesIgnoringSafeArea modifiers across MainView and GameView, which can cause conflicting layout behavior with the Hosting View Controller's safe area insets.

优化MainView的Safe Area设置: #

Instead of applying .edgesIgnoringSafeArea(.bottom) to the entire VStack, apply it only to your custom Tab Bar to ensure it extends to the bottom edge without affecting the main content:

// 修改后的TabBar部分
HStack {
    // TabBarIconView 内容
}
.frame(width: geometry.size.width, height: geometry.size.height/8)
.background(Color.accentColor.opacity(0.07))
.edgesIgnoringSafeArea(.bottom) // 把这个移到TabBar的HStack上

清理GameView中的冗余Safe Area设置: #

Remove the duplicate .ignoresSafeArea modifiers in GameView that are targeting the bottom edge. Your main content should respect the safe area by default, and only the Tab Bar needs to ignore it:

// 移除GameView中这些冗余的设置
.background(
    RoundedRectangle(
        cornerRadius: 16, style: .continuous
    )
    .fill(Color.accentColor.opacity(0.07))
    // 移除这一行 .ignoresSafeArea(.all, edges: .bottom)
    .padding(.bottom, -250)
)
// 移除这一行 .ignoresSafeArea(.all, edges: .bottom)

3. 检查Navigation Bar的布局层级 #

Make sure your MainView is properly wrapped in a NavigationStack (iOS 16+) or NavigationView (iOS 15 and below) in your app's entry point. The .navigationBarTitle modifier should be applied to the Navigation container, not directly to the MainView's VStack:

Example (iOS 16+):

// 在App的入口或者Hosting View Controller中
NavigationStack {
    MainView(viewRouter: ViewRouter())
        .navigationBarTitle("Ana Menü")
}

4. 验证Hosting View Controller的布局设置 #

If the issue persists, check your UIKit Hosting View Controller's properties:

• Ensure automaticallyAdjustsScrollViewInsets is set to true (default, but worth verifying)
• Make sure there are no extra constraints added to the Hosting View Controller's view that could create blank space

5. 调整自定义TabBar的高度计算 #

Your TabBar's height is set to geometry.size.height/8, which might be too large or not accounting for the safe area bottom inset. Try using a fixed height or combining it with safe area insets for better consistency:

// 使用GeometryReader获取safeAreaInsets
GeometryReader { geometry in
    // ... 其他内容
    HStack {
        // TabBarIconView 内容
    }
    .frame(width: geometry.size.width, height: 60) // 尝试固定高度
    .background(Color.accentColor.opacity(0.07))
    .edgesIgnoringSafeArea(.bottom)
}

After applying these changes, the blank space around Navigation Bar and Tab Bar should be gone. Let me know if you still run into issues!

内容的提问来源于stack exchange，提问作者Hüseyin İyibaş