SwiftUI含6个Tab的TabView左上角"More"按钮移除方法

你的问题根源在于原生TabView在Tab数量超过5个时，会自动将多余Tab归入内置的More导航结构，即使隐藏了底部TabBar，这些页面的导航栏依然会保留系统默认的More返回按钮，这是TabView的内置行为，无法通过常规的toolbar修饰符完全移除。

既然你是用侧边菜单来控制页面切换，完全不需要依赖TabView的多Tab标签功能，直接通过状态变量结合ZStack来实现页面切换即可，既避免More按钮问题，也更符合侧边菜单的交互逻辑。

修改后的完整代码 #

import SwiftUI

// 背景色常量
let standardColor = Color(red: 0.96, green: 0.94, blue: 0.88)

struct ContentView: View {
    @State private var showMenu = false
    @State private var selectedTab = 0
    
    var body: some View {
        NavigationStack {
            ZStack {
                // 根据选中的Tab显示对应页面
                Group {
                    switch selectedTab {
                    case 0:
                        home()
                    case 1:
                        ourdate()
                    case 2:
                        ToDoView()
                    case 3:
                        Text("Appointments")
                    case 4:
                        Text("Purchase")
                    case 5:
                        Text("Profile")
                    default:
                        home()
                    }
                }
                .transition(.opacity.combined(with: .move(edge: .trailing)))
                .animation(.easeInOut, value: selectedTab)
                
                // 侧边菜单
                sideMenuView(isShowing: $showMenu, selectedTab: $selectedTab)
            }
            .toolbar(showMenu ? .hidden : .visible, for: .navigationBar)
            .navigationBarTitleDisplayMode(.inline)
            .animation(.easeInOut, value: showMenu)
            .toolbar {
                ToolbarItem(placement: .topBarLeading) {
                    Button(action: { showMenu.toggle() }) {
                        Image(systemName: "line.horizontal.3")
                            .foregroundColor(.black)
                    }
                }
                ToolbarItem(placement: .principal) {
                    let (title, imageName) = selectNavigationName(tab: selectedTab)
                    HStack {
                        Text(title)
                            .font(.headline)
                        Image(systemName: imageName)
                            .imageScale(.small)
                            .bold()
                    }
                }
            }
        }
    }
    
    func selectNavigationName(tab: Int) -> (String, String) {
        switch tab {
        case 0:
            return ("Home", "house")
        case 1:
            return ("Us", "heart")
        case 2:
            return ("ToDo", "list.bullet")
        case 3:
            return ("Appointments", "calendar")
        case 4:
            return ("Purchase", "cart")
        case 5:
            return ("Profile", "person.circle")
        default:
            return ("Home", "house")
        }
    }
}

#Preview {
    ContentView()
        .modelContainer(for: ToDo.self)
}

关键修改说明 #

1. 移除原生TabView的多Tab结构：用switch语句根据selectedTab直接渲染对应页面，彻底摆脱TabView内置的More导航逻辑。
2. 添加页面切换动画：通过.transition和.animation修饰符实现流畅的页面切换效果，替代原来的transaction动画。
3. 保留原有交互逻辑：侧边菜单的selectedTab绑定、导航栏标题逻辑完全保留，不影响原有功能。

这种方式不仅解决了More按钮残留的问题，还让页面切换的逻辑更清晰，更适配侧边菜单的交互场景。

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