如何在 SwiftUI 中隐藏从子视图中的 tabItem 导航的 TabView？

Question

我在 swiftui 中使用 TabView。我想从 tabview tabItem 导航子视图。当我从 taview 导航到 childview 时，它在底部显示 tabview。这是图像.. 单击登录转到 Myview 页面。但是在Myview中，Tabview并没有隐藏

这是我的代码..

1. 标签视图

       struct WelcomeView: View {
           var body: some View {
   
               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)
   
   
   
                }
   
             }
          }
   

2. 在 SettingView 选项卡项中：

        struct SettingView: View {
           @State private var isActive = false
   
           var body: some View {
               NavigationView {
                   VStack(alignment: .leading) {
   
                       VStack {
                           Button(action: {
                               isActive = true
                           }) {
                               Text("Login")
                           }
                           NavigationLink("", destination:  MyView(), isActive: $isActive)
   
                       }
                       }
   
                   }
               }
           }
   

3. 我的视图：

      struct MyView: View {
           var body: some View {
   
               ZStack{
                   Text("Hello My View")
               }.navigationBarHidden(true)
                   .navigationBarTitleDisplayMode(.inline)
   
   
           }
       }
   

当我单击 SettingView tabItem 中的登录按钮时，它会转到 MyView 页面。但是在MyView页面tabview是不隐藏的。

如何在 MyView 页面中隐藏 tabview？

Answer 1

要隐藏标签，我们可以添加一个Bool 来处理是否显示视图。然后通过使用@Binding，我们可以将它传递给其他子视图，无论您在链中所做的任何更改都会影响所有视图。

struct WelcomeView: View {
    @State var isTabViewShown = true
    var body: some View {
        TabView {
            if isTabViewShown {
                HomeView()
                    .tabItem {
                        
                        Image(systemName: "house.fill")
                        Text("Home")
                    }
                
                    .tag(0)
                
                NotificationView()
                    .tabItem {
                        
                        Image(systemName: "envelope.open.fill")
                        Text("Notification")
                    }.tag(1)
                
                
                
                AccountView()
                    .tabItem {
                        
                        Image(systemName: "person.crop.circle")
                        Text("Account")
                    }.tag(2)
                
                SettingView(isTabViewShown: $isTabViewShown)
                    .tabItem {
                        Image(systemName: "gearshape")
                        Text("Setting")
                    }.tag(3)
            }
        }
    }
}

struct MyView: View {
    @Binding var isTabViewShown: Bool
    var body: some View {
        
        ZStack{
                Text("Hello My View")
        }
        .navigationBarHidden(false)
        .navigationBarTitleDisplayMode(.inline)
        .onAppear {
            isTabViewShown = false
        }
    }
}

struct SettingView: View {
    @State private var isActive = false
    @Binding var isTabViewShown: Bool
    var body: some View {
        NavigationView {
            VStack(alignment: .leading) {
                VStack {
                    Button(action: {
                        isActive = true
                    }) {
                        Text("Login")
                    }
                    NavigationLink("", destination:  MyView(isTabViewShown: $isTabViewShown), isActive: $isActive)
                    
                    //Here is a button if you want to show it again
                    Button(action: {
                        isTabViewShown.toggle()
                        //You can also use this is you don't want to use a toggle
//                        isTabViewShown = true
                    }) {
                        Text("Show again")
                    }
                }
            }
        }
    }
}

struct HomeView: View {
    var body: some View {
        Text("Home View")
    }
}

struct NotificationView: View {
    var body: some View {
        Text("Notification View")
    }
}

struct AccountView: View {
    var body: some View {
        Text("Account View")
    }
}