移除SwiftUI自定义5+项TabBar中导航视图的"more"按钮

问题根源 #

当TabView的标签数量超过5个时，iOS系统默认会把超出的标签自动归入"More"列表，即便你隐藏了系统自带的UITabBar，这个导航层级的逻辑依然在后台运行，导致切换到第5、6个标签时，导航栏出现多余的"More"返回按钮。你之前尝试的navigationBarBackButtonHidden(true)和隐藏TabBar工具栏无效，是因为导航结构的层级问题没解决。

解决方案：重构导航结构 #

核心思路是不要给每个Tab单独嵌套NavigationView/NavigationStack，而是把整个TabView包裹在一个顶层的导航容器中，统一管理导航层级，避免系统自动生成的More导航栈干扰。

修改后的完整代码 #

import SwiftUI
import Combine
import MapKit

struct MainTabView: View {
    @State private var selectedTab = 0
    @EnvironmentObject var pop: PopToRoot
    @Namespace var animation

    init() {
        UITabBar.appearance().isHidden = true
    }
    
    var body: some View {
        // 顶层统一使用NavigationStack（适配iOS16+）
        NavigationStack {
            TabView(selection: $selectedTab){
                // 移除每个Tab内部的NavigationView/NavigationStack
                FeedView()
                    .tag(1)
                JobsView()
                    .tag(2)
                ExploreView()
                    .tag(3)
                QuestionView()
                    .tag(4)
                MessagesHomeView()
                    .tag(5)
                ProfileView()
                    .tag(6)
            }
            .overlay (
                HStack {
                    TabBarButton(change: $selectedTab, title: "Home", index: 1, image: selectedTab == 1 ? "h.circle.fill" : "h.circle", animation: animation)
                    TabBarButton(change: $selectedTab, title: "Jobs/Shop", index: 2, image: "", animation: animation)
                    TabBarButton(change: $selectedTab, title: "Explore", index: 3, image: "magnifyingglass", animation: animation)
                    TabBarButton(change: $selectedTab, title: "Ask", index: 4, image: "questionmark", animation: animation)
                    TabBarButton(change: $selectedTab, title: "Messages", index: 5, image: selectedTab == 5 ? "message.fill" : "message", animation: animation)
                    TabBarButton(change: $selectedTab, title: "Profile", index: 6, image: selectedTab == 6 ? "person.crop.circle.fill" : "person.crop.circle", animation: animation)
                }
                , alignment: .bottom
            )
        }
    }
}

// 以下部分保持不变，无需修改
struct TabBarButton: View {
    @Binding var change: Int
    var title: String
    var index: Int
    var image: String
    var animation: Namespace.ID
    @EnvironmentObject var popRoot: PopToRoot
    var body: some View{
        Button {
            change = index
            withAnimation {
                popRoot.tab = index
            }
        } label: {
            VStack {
                Image(systemName: image).font(.title2)
                Text(title).font(.system(size: 10))
            }
            .foregroundColor(popRoot.tab == index ? .orange : .primary.opacity(0.5))
            .frame(maxWidth: .infinity)
            .overlay (
                ZStack {
                    if popRoot.tab == index {
                        TabIndicator()
                            .fill(.orange.gradient)
                            .matchedGeometryEffect(id: "TAB", in: animation)
                            .padding(.top, -9)
                            .padding(.horizontal, 8)
                    }
                }
            )
        }
    }
}

struct TabIndicator: Shape {
    func path(in rect: CGRect) -> Path {
        let newRect = CGRect(x: rect.origin.x, y: rect.origin.y, width: rect.width, height: 3)
        return Path { path in
            path.addRect(newRect)
        }
    }
}

额外调整（按需） #

如果某个子页面不需要显示导航栏，可以在该页面的视图代码中添加隐藏导航栏的修饰符：

// 比如ProfileView不需要导航栏
struct ProfileView: View {
    var body: some View {
        // 你的页面内容
        .toolbar(.hidden, for: .navigationBar)
    }
}

如果子页面需要自定义导航栏（比如添加标题、按钮），直接在子页面内使用.navigationTitle()、.toolbar()等修饰符即可，顶层的NavigationStack会自动处理导航逻辑。

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