SwiftUI：如何通过双击TabItem返回NavigationStack根视图

要实现双击TabItem清空导航栈回到根视图的效果，我们可以通过给TabItem添加双击手势，并结合NavigationPath的重置来完成。以下是修改后的完整代码：

修改后的ContentView #

struct ContentView: View {
    @State private var path = NavigationPath()
    // 判断是否处于当前Tab的根视图
    private var isAtRoot: Bool { path.isEmpty }
    
    var body: some View {
        TabView {
            NavigationStack(path: $path) {
                DetailView(path: $path, number: 0)
                    .navigationDestination(for: Int.self) { index in
                        DetailView(path: $path, number: index)
                    }
            }
            .tabItem {
                Image(systemName: "house")
                Text("首页")
            }
            // 添加双击手势监听
            .onTapGesture(count: 2) {
                // 仅当不在根视图时执行清空操作
                if !isAtRoot {
                    path = NavigationPath()
                }
            }
            
            // 示例：其他Tab页面
            Text("我的页面")
                .tabItem {
                    Image(systemName: "person")
                    Text("我的")
                }
        }
    }
}

原DetailView代码保持不变 #

struct DetailView: View {
    @Binding var path: NavigationPath
    var number: Int
    var body: some View {
        VStack {
            NavigationLink("跳转到随机数页面", value: Int.random(in: 1...1000))
        }
        .navigationTitle("编号: \(number)")
    }
}

#Preview {
    ContentView()
}

关键说明 #

• 必须将NavigationStack嵌套进TabView的tabItem内部，才能给对应Tab添加交互逻辑
• 通过onTapGesture(count: 2)监听双击事件，同时增加isAtRoot判断，避免在根视图时执行无意义的清空操作
• 每个TabItem都可以单独设置双击返回逻辑，按需扩展即可

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