Вложенный TabView - удалить внутреннюю панель вкладок iOS 13, Swift UI

Я использую 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, Справа: 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()
    }
}

person McGuile    schedule 22.09.2020    source источник
comment
.indexViewStyle (PageIndexViewStyle (backgroundDisplayMode: .no))   -  person Dc7    schedule 22.09.2020
comment
@ Dc7 К сожалению, .indexViewStyle и PageIndexViewStyle доступны только в iOS 14. Я ищу специально для iOS 13.   -  person McGuile    schedule 22.09.2020
comment
Я думаю, вам нужно создать его с помощью UIViewRepresentable !!!   -  person Dc7    schedule 22.09.2020
comment
Отвечает ли это на ваш вопрос stackoverflow.com/a/62305094/12299030?   -  person Asperi    schedule 24.09.2020
comment
@ Аспери Это не так, извини. Я попробовал оба значения true и false для прозрачности, но полоса все еще остается. Другие вкладки содержат представления списков, и полоса перекрывает элементы.   -  person McGuile    schedule 25.09.2020
comment
Я не смог воспроизвести это, так что, вероятно, это что-то в ваших пользовательских подпредставлениях, либо в DashboardTopBar, либо во внутренних компонентах TabView.   -  person Asperi    schedule 25.09.2020
comment
@Asperi Я добавил пример кода MCV для воспроизведения, а также свое решение для взлома в качестве ответа. Если вы можете улучшить его, я приму ваш ответ.   -  person McGuile    schedule 26.09.2020
comment
Зачем вы добавляете TapView, если не хотите, чтобы он был виден?   -  person Mojtaba Hosseini    schedule 27.09.2020
comment
@MojtabaHosseini Чтобы в iOS 14 можно было использовать функцию пролистывания TabView.   -  person McGuile    schedule 28.09.2020
comment
Итак, если это только для iOS 14, почему бы вам не избавиться от него на iOS 13?   -  person Mojtaba Hosseini    schedule 28.09.2020
comment
Если решение простое с использованием TabView и единственного модификатора свойства, тогда мало пользы от создания большего объема работы, чем необходимо, путем разработки настраиваемого представления вкладок.   -  person McGuile    schedule 28.09.2020


Ответы (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)
            })
}

Используется TabBarAccessor из моего другого решения в https://stackoverflow.com/a/59972635/12299030

person Asperi    schedule 29.09.2020
comment
Большой! И, конечно же, для тех, кто задается вопросом, модификатор .background необходимо применить ко всем вкладкам, которые хотят скрыть панель вкладок. Спасибо. - person McGuile; 01.10.2020