TabView

TabView

La TabView est un composant simple qui permet à l’utilisateur de naviguer facilement entre différentes sections de ton application. Elle sert souvent de menu principal, en offrant un accès direct aux différentes vues, qui peuvent elles-mêmes contenir une NavigationStack si nécessaire.

Dans la majorité des cas, la TabView sera la vue d’atterrissage de ton application, puisqu’elle permet d’accéder à l’ensemble de celle-ci.

Créer une TabView

struct LandingScreenView: View {
    var body: some View {
        TabView {
            Tab("Train", systemImage: "tram") {
                TrainView()
            }
            Tab("Vos reservations", systemImage: "calendar.badge.clock") {
                TravelView()
            }
            Tab("Bagages", systemImage: "suitcase") {
                Text("ere")
            }
        }
    }
}

Notification depuis la TabView

Les onglets sont un excellent moyen d’alerter l’utilisateur sur une notification ou une action à effectuer dans une section spécifique de l’application. Pour signaler ça visuellement, SwiftUI propose le modificateur badge, qui peut être appliqué directement à un onglet.

struct LandingScreenView: View {
    var body: some View {
        TabView {
            Tab("Train", systemImage: "tram") {
                TrainView()
            }
            Tab("Vos reservations", systemImage: "calendar.badge.clock") {
                TravelView()
            }
            .badge(3)
            Tab("Bagages", systemImage: "suitcase") {
                LuggageOptionsView()
            }
        }
    }
}

Importer tes images

Tu peux remplacer les SF Symbols par les images de ton choix. (Je n’ai pas pris le temps de le faire, mais idéalement, il faudrait conditionner les images inactives pour qu’elles ne soient pas colorées.)

struct LandingScreenView: View {
    var body: some View {
        TabView {
            Tab("Train", image: "train") {
                TrainView()
            }
            Tab("Vos reservations", image: "time") {
                TravelView()
            }
            .badge(3)
            Tab("Bagages", image: "bag") {
                LuggageOptionsView()
            }
        }
    }
}