web-dev-qa-db-fra.com

Comment utiliser TabbedView dans SwiftUI?

struct ContentView : View {
    var body: some View {
        NavigationView {
            TabbedView {
                PasswordGenerator()
                    .tabItemLabel {
                        Image("KeyGlyph")
                        Text("Generator")
                }

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

Cela ne se compilera pas, mais il a été utilisé dans la vidéo Swift Essentials à la WWDC (voir minute 54:30)) et j'ai vu des solutions de contournement comme la solution de contournement VStack (mais même cela a de nombreux défauts , l'onglet gauche est trop loin vers la gauche et l'onglet droit est trop loin vers la droite et lorsque vous changez d'onglet, seul le premier qui a initialement chargé les charges et l'autre onglet reste vide et l'utilisation de balises n'aide pas). J'ai deux onglets qui chargent les vues et ont une image et du texte?

iosswiftswiftuiswift5ios13
6
SmushyTaco

TabbedView() est obsolète, utilisez TabView() à la place.

Utiliser des nombres entiers pour sélectionner des vues me sent mauvais, depuis mes jours de travail avec tag() de UIButton et UIView, il est préférable d'énumérer ce que vous faites plutôt que d'attribuer des valeurs codées en dur qui ont une très large plage. c'est-à-dire Int.min() à Int.max(). Cela facilite également la lecture et la maintenance du code à l'avenir.

TabView(selection: ) peut être utilisé pour sélectionner l'index, et est déclaré comme:

public struct TabView<SelectionValue, Content> : View where SelectionValue : Hashable, Content : View {
    public init(selection: Binding<SelectionValue>?, @ViewBuilder content: () -> Content)
…

Cela signifie que vous pouvez sélectionner l'index avec n'importe quel contenu lavable.

Nous pouvons utiliser un enum conforme à Hashable pour contenir une liste d'onglets. De cette façon, nous pouvons utiliser un observable plus tard pour aider à contrôler et à charger l'état de la vue. Ou ayez l'énumération dans le cadre de l'état de votre application. Je suis sûr qu'il existe de nombreuses ressources que vous pouvez utiliser pour trouver une solution appropriée qui répond à vos besoins.

 struct MainTabView: View {

 @State private var selection: Tabs = .profile

 private enum Tabs: Hashable {
     case content
     case profile
 }

 var body: some View {

    TabView(selection: $selection) {

        // Learn Content
        Text("The First Tab")
            .tabItem {
                Image(systemName: "book")
                Text("Learn")
        }.tag(Tabs.content)


        // The Users Profile View.
        ProfileView()
            .tabItem {
                Image(systemName: "person.circle")
                Text("Profile")
        }.tag(Tabs.profile)
    }

  }
}
2
RLoniello

TabbedView est obsolète.

Vous pouvez utiliser TabView à la place maintenant

struct AppTabbedView: View {
    @State private var selection = 3

    var body: some View {
        TabView (selection:$selection){
            Text("The First Tab")
                .tabItem {
                    Image(systemName: "1.square.fill")
                    Text("First")

            }
            .tag(1)
            Text("Another Tab")
                .tabItem {
                    Image(systemName: "2.square.fill")
                    Text("Second")
            }.tag(2)
            Text("The Last Tab")
                .tabItem {
                    Image(systemName: "3.square.fill")
                    Text("Third")
            }.tag(3)
        }
        .font(.headline)
    }
}
1
Amir.n3t

depuis Xcode 11 GM, ce code fonctionne: (from https://developer.Apple.com/documentation/swiftui/tabview )

TabView {
    Text("The First Tab")
        .tabItem {
            Image(systemName: "1.square.fill")
            Text("First")
        }
    Text("Another Tab")
        .tabItem {
            Image(systemName: "2.square.fill")
            Text("Second")
        }
    Text("The Last Tab")
        .tabItem {
            Image(systemName: "3.square.fill")
            Text("Third")
        }
}
.font(.headline)
1
Antoine Weber

TabbedView est obsolète et a été renommé TabView Vous pouvez utiliser TabView comme ceci

TabView {
    (Text("Tab 1!").tabItem {
         Text("First")
    })
    (Text("Tab 2!").tabItem {
         Text("Second")
    })
}
1
Awesome.Apple

Le 'TabbedView' peut être utilisé d'une manière similaire à ce qui suit:

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

Je ne sais pas pourquoi votre exemple ne compile pas, mais vous manquez à la fois le paramètre selection et le .tag propriété sur chaque "onglet".

Btw dans la version actuelle de XCode (beta 2), vous ne pouvez pas afficher à la fois un texte et une image comme étiquette.

0
Bogdan Farca