Как использовать TabbedView в SwiftUI? - PullRequest
Новая
       43

Как использовать TabbedView в SwiftUI?

4 голосов
/ 25 июня 2019 
struct ContentView : View {
    var body: some View {
        NavigationView {
            TabbedView {
                PasswordGenerator()
                    .tabItemLabel {
                        Image("KeyGlyph")
                        Text("Generator")
                }

                PasswordGeneratorSettings()
                    .tabItemLabel {
                            Image("SettingsGlyph")
                            Text("Settings")
                }
            }
        }
    }
}

Это не скомпилируется, но оно использовалось в видео Swift Essentials на WWDC (см. Минуту 54:30), и я видел некоторые обходные пути, такие как обход VStack (но даже у этого есть много недостатков, слевавкладка находится слишком далеко влево, а правая вкладка слишком далеко вправо, и при переключении вкладок загружается только первая, которая изначально загружена, а другая вкладка остается пустой и использование тегов не помогает).Итак, как у меня есть две вкладки, которые загружают представления и имеют изображение и текст?

Ответы [ 3 ]

2 голосов
/ 25 июня 2019

Ваш код должен работать, однако это известная проблема из Примечания к выпуску iOS & iPadOS 13 Beta 2 :

Модификатор tabItemLabel (_ :) не принимает закрытия @ViewBuilder.

Единственный обходной путь, пока это не исправлено, - это использовать VStack, как вы упомянули. 

MyView()
    .tabItemLabel(VStack {
        Image("resourceName")
        Text("Item")
    })

Обновление:

Эта проблема была исправлена ​​с помощью Xcode 11 beta 3 :

Модификатор tabItemLabel ( :) - теперь называется tabItem ( :) - теперь принимает @ ViewBuilder закрытия.

Пример: 

.tabItem {
    Image(systemName: "circle")
    Text("Tab1")
}
2 голосов
/ 09 июля 2019

С бета-версией XCode 3 должно работать следующее: 

import SwiftUI

struct Home : View {
    @State private var currentTab = 1

    var body: some View {
        TabbedView(selection: $currentTab) {
            FirstView()
                .tabItem {
                    VStack {
                        Image(systemName: "1.circle")
                        Text("First Tab")
                    }
                }.tag(1)
            SecondView()
                .tabItem {
                    VStack {
                        Image(systemName: "2.circle")
                        Text("Second Tab")
                    }
                }.tag(2)
        }
    }
}

Заключение метки вкладки в VStack представляется необязательным.Итак, вы можете отказаться от этого, например: 

import SwiftUI

struct Home : View {
    @State private var currentTab = 1

    var body: some View {
        TabbedView(selection: $currentTab) {
            FirstView()
                .tabItem {
                    Image(systemName: "1.circle")
                    Text("First Tab")
                }.tag(1)
            SecondView()
                .tabItem {
                    Image(systemName: "2.circle")
                    Text("Second Tab")
                }.tag(2)
        }
    }
}
0 голосов
/ 25 июня 2019

«TabbedView» можно использовать следующим образом: 

    struct TabView : View {

        @State private var selection = 1

        var body: some View {
            TabbedView (selection: $selection) {
                InboxList()
                    .tabItemLabel(selection == 1 ? Image("second") : Image("first"))
                    .tag(1)

                PostsList()
                    .tabItemLabel(Image("first"))
                    .tag(2)

                Something()
                    .tabItemLabel(Image("first"))
                    .tag(3)
            }
        }
    }

Я не уверен, почему ваш пример не компилируется, но вы пропускаете и параметр selection, и свойство .tag на каждой "вкладке".

Кстати, в текущей версии XCode (бета-версия 2) нельзя отображать текст и изображение в качестве метки.

...