Apple Watch进入NavigationDestination子视图时隐藏并禁用TabBar

要实现WatchOS 9上类似Apple Fitness的导航逻辑，核心是让每个标签页独立管理导航状态，并同步控制TabView的显示与交互。以下是具体实现：

关键思路 #

• 每个标签页使用独立的NavigationStack，确保各自的NavigationTitle正常显示
• 在App层维护状态变量，跟踪是否处于子视图页面，以此控制TabView的指示器显示和滑动交互
• 通过Binding将状态传递给每个标签页，监听导航路径变化同步状态

完整代码 #

import SwiftUI

@main
struct Test_Watch_App_Watch_AppApp: App {
    @State private var isInDetailView = false
    
    @SceneBuilder var body: some Scene {
        WindowGroup {
            TabView {
                ColorTabView(isInDetailView: $isInDetailView)
                FontTabView(isInDetailView: $isInDetailView)
            }
            .tabViewStyle(.page)
            .pageIndicatorVisibility(isInDetailView ? .hidden : .visible)
            .allowsHitTesting(!isInDetailView)
        }
    }
}

struct ColorTabView: View {
    @Binding var isInDetailView: Bool
    @State private var path = NavigationPath()
    
    var body: some View {
        NavigationStack(path: $path) {
            ScrollView {
                VStack {
                    NavigationLink("Mint", value: Color.mint)
                    NavigationLink("Pink", value: Color.pink)
                    NavigationLink("Teal", value: Color.teal)
                }
            }
            .navigationDestination(for: Color.self) { color in
                Text("Hello")
                    .background(color)
                    .onAppear { isInDetailView = true }
                    .onDisappear { isInDetailView = false }
            }
            .navigationTitle("Colors")
            .onChange(of: path) { isInDetailView = !$0.isEmpty }
        }
    }
}

struct FontTabView: View {
    @Binding var isInDetailView: Bool
    @State private var path = NavigationPath()
    
    var body: some View {
        NavigationStack(path: $path) {
            ScrollView {
                VStack {
                    NavigationLink("headline", value: Font.headline)
                    NavigationLink("title", value: Font.title)
                    NavigationLink("caption", value: Font.caption)
                }
            }
            .navigationDestination(for: Font.self) { font in
                Text("Hello")
                    .font(font)
                    .onAppear { isInDetailView = true }
                    .onDisappear { isInDetailView = false }
            }
            .navigationTitle("Fonts")
            .onChange(of: path) { isInDetailView = !$0.isEmpty }
        }
    }
}

代码说明 #

1. 状态管理：App层的isInDetailView变量控制TabView的交互与显示，通过Binding传递给每个标签页
2. 独立导航栈：每个标签页拥有自己的NavigationStack和NavigationPath，保证导航状态独立，NavigationTitle正常显示
3. 交互控制：
   • pageIndicatorVisibility根据状态隐藏/显示页面指示器
   • allowsHitTesting在子视图页面禁用TabView的滑动和点击切换
4. 状态同步：通过onChange(of: path)监听导航路径变化，配合子视图的onAppear/onDisappear，确保状态准确同步

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