SwiftUI TabView底部出现可导航的异常空白区域求助

你遇到的底部空白区域就是原生TabBar——默认TabView会自带这个导航栏，即便你自定义了TabBar，原生TabBar只是隐藏了内容，但其占位区域还在，点击时就会触发默认导航逻辑。

解决步骤： #

1. 彻底隐藏原生TabBar
   给TabView添加.toolbar(.hidden, for: .tabBar)修饰符，这会完全移除原生TabBar的占位区域，兼容iOS15及以上版本。iOS16+也可以用.tabBarHidden()，但前者兼容性更广。

2. 调整布局结构
   原来的VStack布局会让TabView和自定义TabBar垂直排列，容易导致TabView未占满屏幕、原生TabBar区域暴露。改用ZStack将自定义TabBar叠加在TabView底部，确保布局紧凑。

修改后的ContentView代码： #

struct ContentView: View {
    @State var selectedTab = 0

    var body: some View {
        ZStack(alignment: .bottom) {
            TabView(selection: $selectedTab) {
                MyGarageView().tag(0)
                FuelView().tag(1)
                FinderView().tag(2)
            }
            .tabViewStyle(.page(indexDisplayMode: .never)) // 移除分页指示器（如果不需要）
            .toolbar(.hidden, for: .tabBar) // 隐藏原生TabBar

            // 自定义TabBar
            HStack{
                ForEach(TabbedItems.allCases, id: \.self){ item in
                    Button{
                        selectedTab = item.rawValue
                    } label: {
                        CustomTabItem(imageName: item.iconName, title: item.title, isActive: (selectedTab == item.rawValue))
                    }
                }
            }
            .padding(6)
            .frame(height: 75)
            .cornerRadius(15)
            .padding(.horizontal, 26)
            .padding(.bottom, 10) // 适配底部安全区，避免被设备底部边框遮挡
        }
    }
}

额外注意事项： #

• 确保TabView的子视图（MyGarageView等）没有额外的底部padding或固定高度限制，避免TabView无法占满屏幕剩余空间
• 如果自定义TabBar位置仍有偏差，可调整.padding(.bottom)的值适配不同设备的安全区尺寸

内容的提问来源于stack exchange，提问作者Lawrence