SwiftUI中从TabView子页面跳转时如何隐藏底部TabView
问题原因
SwiftUI中TabView的子视图内部嵌套NavigationView进行跳转时,跳转的页面仍然属于TabView的层级范围内,所以底部TabBar会一直显示。
解决方法
方案一:调整导航层级(兼容所有iOS版本)
第一步:修改WelcomeView结构,将NavigationView套在TabView外层
struct WelcomeView: View { var body: some View { NavigationView { TabView { HomeView() .tabItem { Image("home_icon") Text("Home") } .tag(0) NotificationView() .tabItem { Image("notification_icon") Text("Notification") }.tag(1) AccountView() .tabItem { Image("account_icon") Text("Account") }.tag(2) SettingView() .tabItem { Image("settings_icon") Text("Setting") }.tag(3) } .navigationTitle("") .navigationBarHidden(true) } } }
第二步:删除SettingView内部的NavigationView,保留跳转逻辑
struct SettingView: View { @State private var isActive = false var body: some View { VStack(alignment: .leading) { VStack { Button(action: { isActive = true }) { Text("Login") } NavigationLink("", destination: MyView(), isActive: $isActive) } } } }
方案二:iOS16+ 专用极简方案
如果你的项目最低适配iOS16,不需要调整层级,直接在目标页面添加toolbar修饰符强制隐藏TabBar即可:
struct MyView: View { var body: some View { ZStack{ Text("Hello My View") }.navigationBarHidden(true) .navigationBarTitleDisplayMode(.inline) .toolbar(.hidden, for: .tabBar) // 新增此行强制隐藏TabBar } }
实现原理
- 导航层级高于TabView层级时,跳转的新页面会覆盖整个TabView区域,自然隐藏底部TabBar
- iOS16新增的
toolbar修饰符可以精准控制指定场景的工具栏显隐,无需调整层级即可实现TabBar隐藏
内容的提问来源于stack exchange,提问作者Enamul Haque
相关产品推荐
相关产品推荐

