Nested TabView - 删除内部标签栏 iOS 13，Swift UI答案

【问题标题】：Nested TabView - Remove inner tab bar iOS 13, Swift UINested TabView - 删除内部标签栏 iOS 13，Swift UI
【发布时间】：2021-01-08 10:16:10
【问题描述】：

我使用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()
    }
}

【问题讨论】：

.indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .no))
@Dc7 不幸的是，.indexViewStyle 和 PageIndexViewStyle 仅在 iOS 14 中可用。我正在寻找专门用于 iOS 13 的。
我想，你必须用 UIViewRepresentable 创建它！！！
这是否回答了您的问题stackoverflow.com/a/62305094/12299030？
@Asperi 没有，抱歉。我尝试了 true 和 false 的半透明度值，但条形仍然存在。其他选项卡包含列表视图，并且栏与项目重叠。

标签： swift swiftui swiftui-tabview

【解决方案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)
                             .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

【讨论】：

太棒了！当然，对于那些想知道的人，.background 修饰符需要应用于所有希望隐藏标签栏的标签。谢谢。