swift - Nested TabView - 移除内部标签栏 iOS 13、Swift UI

标签 swift swiftui swiftui-tabview

我正在使用 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。
Left: iOS 13, Right: 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/

相关文章:

ios - 录音时裁剪音频文件的方法?

ios - 使用{…in}的Swift闭包语法

swiftui - iOS 15 中的导航 + Tabview + Sheet 损坏

ios - 带有 PageTabViewStyle() 的 TabView 不使用 ScrollView 中的可用高度

swift 3 : Share Button of Facebook SDK is Disabled

ios - Swift 3 - 同时运行两个函数

ios - Swift 在只有括号的行上崩溃

swift - 如何使用 SwiftUI 显示 UIImage?

ios - SwiftUI:如何调整大小以适应 Button 以扩展以填充 VStack 或 HStack 父 View ?