Question

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

Answer 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

嵌套的TabView-删除内部标签栏iOS 13，Swift UI

1 个答案: