我正在使用 TabView
来表示三个选项卡。在 iOS 14 中,这处理得很好,但 iOS 13 导致底部栏是灰色的,这是导航的标签栏。我怎样才能删除这个酒吧?
请记住,这是 TabView
中的 TabView
。外部 TabView
的栏显示在底部,带有五个选项卡;我根本不想显示的内部 TabView
栏。
下面的代码表示内部 TabView
。
import SwiftUI
struct DashboardView: View {
@State private var pageIndex = 1
var body: some View {
VStack {
DashboardTopBar(index: $pageIndex) // A custom selected tab indicator
if #available(iOS 14.0, *) {
TabView(selection: $pageIndex) {
RehabView().tag(0)
PerformanceView().tag(1)
RecoveryView().tag(2)
}
.tabViewStyle(PageTabViewStyle())
.indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))
} else {
TabView(selection: $pageIndex) {
RehabView().tag(0)
PerformanceView().tag(1)
RecoveryView().tag(2)
}
}
}
}
}
下图左侧为 iOS 13,右侧为 iOS 14。最小、完整且可验证的示例
如果下面的代码是在 iOS 13 上启动的,您会注意到底部有一个标签栏,顶部有一个空的标签栏。
import SwiftUI
struct ContentView: View {
@State private var outerTabViewSelectedTab = 0
@State private var innerTabViewSelectedTab = 1
var body: some View {
TabView(selection: $outerTabViewSelectedTab,
content: {
Text("Outer 1").tabItem { Text("Outer 1") }.tag(1)
TabView(selection: $innerTabViewSelectedTab,
content: {
Text("Inner 1").tag(1)
Text("Inner 2").tag(2)
}).tabItem { Text("Outer 2") }.tag(2)
})
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
最佳答案
显式隐藏它......因为它是为了向后兼容,它是安全的,因为行为是已知的并且不会改变。
所以这是一个解决方案
var body: some View {
TabView(selection: $outerTabViewSelectedTab,
content: {
Text("Outer 1").tabItem { Text("Outer 1") }.tag(1)
TabView(selection: $innerTabViewSelectedTab,
content: {
Text("Inner 1").tag(1)
.background(TabBarAccessor { tabBar in
tabBar.isHidden = true
})
Text("Inner 2").tag(2)
}).tabItem { Text("Outer 2") }.tag(2)
})
}
在 https://stackoverflow.com/a/59972635/12299030 中使用了我的其他解决方案中的 TabBarAccessor
关于swift - Nested TabView - 移除内部标签栏 iOS 13、Swift UI,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/64007169/