SwiftUI自定义TabBar覆盖页面内容的问题如何解决？

问题原因 #

你当前使用ZStack作为主容器，将CustomTabBar以底部对齐的方式叠加在TabView之上，所以TabBar会自然覆盖TabView中页面的底部内容。

方案1：使用VStack上下排布（全iOS版本兼容） #

直接将外层容器从ZStack替换为VStack，即可实现两个组件上下排列互不遮挡，同时需要给自定义TabBar添加底部安全区适配和背景，避免和页面内容混在一起。
修改后的MainView代码如下：

import SwiftUI

struct MainView: View {

    @State var currentTab : Tab = .Home
    init() {
        UITabBar.appearance().isHidden = true
    }
    @Namespace var animation

    var body: some View {
        // 把原来的ZStack改成VStack，去掉alignment参数
        VStack(spacing: 0) {
            TabView(selection: $currentTab) {
                HomeView()
                    .tag(Tab.Home)
                
                SearchView()
                    .tag(Tab.Search)
                
                MessagesView()
                    .tag(Tab.Messages)
                
                SettingsView()
                    .tag(Tab.Settings)
            }
            // 自定义TabBar添加背景和底部安全区适配
            CustomTabBar(animation: animation, currentTab: $currentTab)
                .background(.white) // 可修改为你需要的TabBar背景色
                .padding(.bottom, UIApplication.shared.windows.first?.safeAreaInsets.bottom ?? 0)
        }
        .ignoresSafeArea(.container, edges: .bottom) // 让底部安全区的背景也和TabBar统一
    }
}

方案2：使用safeAreaInset（iOS 15+ 适配更简洁） #

如果你的项目最低支持iOS15，可以直接给TabView添加safeAreaInset修饰符，系统会自动给TabView的底部让出TabBar的高度，不需要手动调整布局，还能保留TabBar的悬浮效果：

import SwiftUI

struct MainView: View {

    @State var currentTab : Tab = .Home
    init() {
        UITabBar.appearance().isHidden = true
    }
    @Namespace var animation

    var body: some View {
        TabView(selection: $currentTab) {
            HomeView()
                .tag(Tab.Home)
            
            SearchView()
                .tag(Tab.Search)
            
            MessagesView()
                .tag(Tab.Messages)
            
            SettingsView()
                .tag(Tab.Settings)
        }
        .safeAreaInset(edge: .bottom) { // 直接在底部插入TabBar，系统自动避让
            CustomTabBar(animation: animation, currentTab: $currentTab)
                .background(.white)
        }
    }
}

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