SwiftUI: Могу ли я добавить больше представлений в TabView, а затем элементов вкладок?

Я рассматриваю, есть ли возможность добавить больше представлений в TabView в SwiftUI, тогда есть место для TabItems.

Я сделал что-то вроде этого:

 TabView(selection: $selectedTab) {
            Text("Hello World 1")
                .tabItem {
                    Image(systemName: "1.circle")
                    Text("Item 1")
                }.tag(0)

            Text("Hello World 2")
                .tabItem {
                    Image(systemName: "2.circle")
                    Text("Item 2")
                }.tag(1)

            Text("Hello World 3")
                .tabItem {
                    Image(systemName: "3.circle")
                    Text("Item 3")
                }.tag(2)

            Text("Hello World 4")
                .tabItem {
                    Image(systemName: "4.circle")
                    Text("Item 4")
                }.tag(3)

            Text("Hello World 5")
                .tabItem {
                    Image(systemName: "5.circle")
                    Text("")
                }.tag(4)

            Text("Hello World 5")
                .tabItem {
                    Image(systemName: "6.circle")
                    Text("")
                }.tag(5)
        }

Также автоматически отображается кнопка «Больше трех точек». Но я бы не хотел, чтобы эти дополнительные элементы вкладок отображались на панели вкладок, только первые 4 или 5 элементов, а другие элементы будут перемещаться только программно. Я хотел бы сделать это таким образом, чтобы добавить затем меню гамбургера с кнопками, которые будут переключать эти другие представления.

Я знаю, что гамбургер / навигационный ящик / боковое меню - это не то, что рекомендует Apple, но такой дизайн отлично подойдет для требований моего приложения. :)


person Michał Ziobro    schedule 21.11.2019    source источник


Ответы (1)


Надеюсь, следующий подход будет вам полезен. Идея состоит в том, чтобы иметь динамический диапазон, который показывает элементы вкладок в зависимости от выбранного в данный момент.

Для этой демонстрации выбор, включая видимые вкладки, изменяется в зависимости от кнопки предварительного просмотра / следующего, но это не важно - выбор может быть другим, просто нужно обновить диапазон видимых вкладок в зависимости от выбранной вкладки. Вот и все.

Вот как ведет себя демонстрация:

динамические вкладки

import SwiftUI

struct TestTabMultiViews: View {
    static let maxTabs = 8

    @State var selectedTab = 2
    @State var visibleTabs = [0, 1, 2, 3]
    var body: some View {
        VStack {
            self.selectorView
            Divider()
            TabView(selection: $selectedTab) {
                ForEach(visibleTabs, id: \.self) { i in
                    self.viewForTab(i)
                        .tabItem {
                            Image(systemName: "\(i).circle")
                            Text("Item \(i)")
                        }.tag(i)
                }
            }
        }
    }

    var selectorView: some View {
        HStack {
            Button(action: {
                let prev = self.selectedTab - 1
                if prev >= 0 {
                    if prev < self.visibleTabs.min()! {
                        self.visibleTabs = self.visibleTabs.map { $0 - 1 }
                    }
                    self.selectedTab = prev
                }
            }) {
                Text("< Prev").padding([.top, .horizontal])
            }.disabled(self.selectedTab == 0)
            Button(action: {
                let next = self.selectedTab + 1
                if next < Self.maxTabs {
                    if next > self.visibleTabs.max()! {
                        self.visibleTabs = self.visibleTabs.map { $0 + 1 }
                    }
                    self.selectedTab = next
                }
            }) {
                Text("Next >").padding([.top, .horizontal])
            }.disabled(self.selectedTab == Self.maxTabs - 1)
        }
    }

    private func viewForTab(_ tag: Int) -> some View {
        // Provide your view for requested tab tag
        Text("Hello World \(tag)")
    }
}

struct TestTabMultiViews_Previews: PreviewProvider {
    static var previews: some View {
        TestTabMultiViews()
    }
}
person Asperi    schedule 23.11.2019