Nested TabView - 移除内部标签栏 iOS 13、Swift UI [英] Nested TabView - Remove inner tab bar iOS 13, Swift UI

问题描述

我使用 TabView 来表示三个选项卡.在 iOS 14 中，这处理得很好，但 iOS 13 导致底部栏是灰色的，这是用于导航的选项卡栏.如何删除此栏?

I am using a TabView to represent three tabs. In iOS 14, this is handled nicely, but iOS 13 results in a gray bottom bar which is the tab bar for navigation. How can I remove this bar?

请记住，这是 TabView 中的一个 TabView.外部 TabView 的栏显示在底部，有五个选项卡；我根本不想显示的内部 TabView 栏.

Please bear in mind that this is a TabView within a TabView. The outer TabView's bar is shown at the bottom with five tabs; the inner TabView bar I do not want shown at all.

下面的代码代表内部的TabView.

The code below represents the inner 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.

The image below shows iOS 13 on the left and iOS 14 on the right.

最小、完整且可验证的示例

如果下面的代码是在 iOS 13 上启动的，你会注意到底部有一个标签栏，顶部有一个空的标签栏.

If the code below is launched on iOS 13, you will note a tab bar on the bottom and an empty tab bar on top of it.

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()
    }
}

推荐答案

显式隐藏它...因为它是为了向后兼容它是安全的，因为行为是已知的并且不会改变.

Hide it explicitly... as it is for backward compatibility it is safe, because behavior is already known and won't change.

所以这是一个解决方案

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

这篇关于Nested TabView - 移除内部标签栏 iOS 13、Swift UI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！