SwiftUI TabView中点击父Tab项关闭子视图的实现方法

我有一个包含两个标签页的SwiftUI TabView，其中第一个标签页通过NavigationLink展示子视图。现在想要实现：当子视图处于展示状态时，点击该父视图对应的Tab项，能自动关闭子视图并返回父视图。试过.onChange和@Environment(.presentationMode)等方法，但都没达到预期效果，请问这种场景下怎么实现？

原代码如下：

struct ContentView: View {
    var body: some View {
        TabView {
            NavigationView {
                VStack {
                    Text("View1")
                    NavigationLink {
                        Text("Child View")
                    } label: {
                        Text("Go to child view")
                    }
                }
            }
            // 当子视图展示时，点击该Tab项希望关闭子视图，如何实现？
            .tabItem {
                Label("view1", systemImage: "1.circle")
            }
            
            Text("View2")
                .tabItem {
                    Label("view2", systemImage: "2.circle")
                }
        }
    }
}

解决方案 #

可以通过绑定TabView的选中状态，结合NavigationLink的激活状态控制来实现需求，具体代码修改如下：

struct ContentView: View {
    // 绑定TabView的选中标签索引
    @State private var selectedTab = 0
    // 控制NavigationLink的激活状态
    @State private var isChildActive = false
    
    var body: some View {
        TabView(selection: $selectedTab) {
            NavigationView {
                VStack {
                    Text("View1")
                    // 使用isActive绑定管理子视图的展示/关闭
                    NavigationLink(isActive: $isChildActive) {
                        Text("Child View")
                    } label: {
                        Text("Go to child view")
                    }
                }
            }
            .tabItem {
                Label("view1", systemImage: "1.circle")
            }
            .tag(0)
            // 监听标签选中变化，触发子视图关闭逻辑
            .onChange(of: selectedTab) { newValue in
                // 当选中当前标签且子视图处于激活状态时，关闭子视图
                if newValue == 0 && isChildActive {
                    isChildActive = false
                }
            }
            
            Text("View2")
                .tabItem {
                    Label("view2", systemImage: "2.circle")
                }
                .tag(1)
        }
    }
}

逻辑说明 #

1. 绑定Tab选中状态：给TabView添加selection绑定，同时为每个标签页设置.tag标识，实时获取当前选中的标签索引。
2. 控制NavigationLink：使用isActive绑定替代默认触发方式，通过isChildActive变量直接控制子视图的展示状态。
3. 监听标签切换：通过.onChange监听选中标签的变化，当用户点击第一个标签（当前已在子视图页面）时，将isChildActive设为false，自动关闭子视图返回父视图。

如果你的项目基于iOS 16及以上版本，推荐使用NavigationStack替代NavigationView，实现逻辑完全一致，只需替换容器组件即可。

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