Why I am putting TabView into a NavigationView is because I need to hide the bottom tab bar when user goes into 2nd level \'detail\' views which have their own bottom action
The idea is to join TabView
selection with NavigationView
content dynamically.
Demo:
Here is simplified code depicting approach (with using your views). The NavigationView
and TabView
just position independently in ZStack
, but content of NavigationView
depends on the selection of TabView
(which content is just stub), thus they don't bother each other. Also in such case it becomes possible to hide/unhide TabView
depending on some condition - in this case, for simplicity, presence of root list view.
struct TestTabsOverNavigation: View {
@State private var tabVisible = true
@State private var selectedTab: Int = 0
var body: some View {
ZStack(alignment: .bottom) {
contentView
tabBar
}
}
var contentView: some View {
NavigationView {
ListView(gender: selectedTab == 0 ? .female : .male)
.onAppear {
withAnimation {
self.tabVisible = true
}
}
.onDisappear {
withAnimation {
self.tabVisible = false
}
}
}
}
var tabBar: some View {
TabView(selection: $selectedTab) {
Rectangle().fill(Color.clear).tag(0).tabItem {
TabItem(image: "person.crop.circle", label: Gender.female.rawValue)
}
Rectangle().fill(Color.clear).tag(1).tabItem {
TabItem(image: "person.crop.circle.fill", label: Gender.male.rawValue)
}
}
.frame(height: 50) // << !! might be platform dependent
.opacity(tabVisible ? 1.0 : 0.0)
}
}