SwiftUI缩放转场效果引发Tab Bar显示异常问题求助

问题分析 #

直接在NavigationLink的destination中设置.toolbar(.hidden, for: .tabBar)，会导致导航过渡动画与Tab Bar状态更新不同步，滑动关闭页面时Tab Bar的显示状态不稳定。

解决方案 #

通过绑定导航路径的状态，在Tab Bar所在层级动态控制其显示/隐藏，确保返回时Tab Bar能稳定恢复可见。

修改后的完整代码 #

struct ContentView: View {
    @State private var selection: Tab = .home
    @State private var homeNavigationPath = NavigationPath() // 跟踪Home标签页的导航路径
    
    enum Tab {
        case home
        case settings
    }
    
    var body: some View {
        TabView(selection: $selection) {
            NavigationStack(path: $homeNavigationPath) {
                TestView()
                    .navigationDestination(for: Route.self) { route in
                        switch route {
                        case .overview:
                            TestOverview()
                                .navigationTransition(.zoom(sourceID: "itemId", in: Namespace().wrappedValue))
                                .navigationBarBackButtonHidden()
                        }
                    }
            }
            .tabItem {
                Image(systemName: "house")
                Text("Home")
            }
            .tag(Tab.home)
            // 根据导航路径是否为空控制Tab Bar显示状态
            .toolbar(homeNavigationPath.isEmpty ? .visible : .hidden, for: .tabBar)
            
            VStack {
                EmptyView()
            }
            .tabItem {
                Image(systemName: "gear")
                Text("Settings")
            }
            .tag(Tab.settings)
        }
    }
}

// 定义导航路由枚举
enum Route {
    case overview
}

struct TestView: View {
    @Namespace var animation
    @Environment(\.navigationPath) private var navigationPath
    
    var body: some View {
        Button {
            navigationPath.append(Route.overview) // 通过路径跳转
        } label: {
            VStack{
                Image(systemName: "pencil.and.outline")
                    .resizable()
                    .scaledToFit()
                Text("Navigation to overview")
                    .font(.title)
                    .padding()
            }
            .frame(width: 350, height: 150)
            .matchedTransitionSource(id: "itemId", in: animation)
        }
        .navigationTransition(.zoom(sourceID: "itemId", in: animation))
    }
}

struct TestOverview: View {
    var body: some View {
        VStack {
            Text("Overview")
        }
    }
}

关键修改点 #

• 添加导航路径跟踪：在ContentView中声明homeNavigationPath并绑定到Home标签页的NavigationStack，用于判断当前是否处于导航层级中。
• 动态控制Tab Bar显示：通过toolbar(homeNavigationPath.isEmpty ? .visible : .hidden, for: .tabBar)，根据路径是否为空决定Tab Bar的显示状态，确保返回时路径清空后Tab Bar自动恢复可见。
• 改用navigationDestination跳转：替代直接在NavigationLink中设置目标视图，让导航状态更可控，避免过渡动画与Toolbar状态的冲突。

这样修改后，无论通过点击返回按钮还是滑动关闭页面，只要导航路径清空，Tab Bar都会稳定恢复可见状态。

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