TabBar QML Type

Permet à l'utilisateur de passer d'une vue à l'autre ou d'une sous-tâche à l'autre. Plus d'informations...

• Liste de tous les membres, y compris les membres hérités

Propriétés

• contentHeight : real (since QtQuick.Controls 2.2 (Qt 5.9))
• contentWidth : real (since QtQuick.Controls 2.2 (Qt 5.9))
• position : enumeration

Propriétés rattachées

• index : int (since QtQuick.Controls 2.3 (Qt 5.10))
• position : enumeration (since QtQuick.Controls 2.3 (Qt 5.10))
• tabBar : TabBar (since QtQuick.Controls 2.3 (Qt 5.10))

Description détaillée

TabBar fournit un modèle de navigation basé sur les onglets.

TabBar est rempli de contrôles TabButton et peut être utilisé avec n'importe quel contrôle de présentation ou de conteneur qui fournit la propriété currentIndex, comme StackLayout ou SwipeView

TabBar {
    id: bar
    width: parent.width
    TabButton {
        text: qsTr("Home")
    }
    TabButton {
        text: qsTr("Discover")
    }
    TabButton {
        text: qsTr("Activity")
    }
}

StackLayout {
    width: parent.width
    currentIndex: bar.currentIndex
    Item {
        id: homeTab
    }
    Item {
        id: discoverTab
    }
    Item {
        id: activityTab
    }
}

Comme indiqué ci-dessus, la barre d'onglets est généralement remplie d'un ensemble statique de boutons d'onglets définis en ligne en tant qu'enfants de la barre d'onglets. Il est également possible d'ajouter des éléments add, insert, move et remove de manière dynamique au moment de l'exécution. On peut accéder à ces éléments en utilisant itemAt() ou contentChildren.

Lorsque TabBar est associé à un autre conteneur tel que SwipeView, il est nécessaire d'établir une liaison bidirectionnelle entre la propriété currentIndex de chaque contrôle. Pour y parvenir sans rompre les liaisons, évitez de définir directement currentIndex et utilisez plutôt setCurrentIndex(), par exemple. Voir Managing the Current Index pour plus d'informations.

Pour effectuer une action lorsque currentIndex change, utilisez le gestionnaire de signal de changement de propriété onCurrentIndexChanged:

onCurrentIndexChanged: {
    print("currentIndex changed to", currentIndex)
    // ...
}

Redimensionnement des onglets

Par défaut, TabBar redimensionne ses boutons pour les adapter à la largeur du contrôle. L'espace disponible est réparti de manière égale entre les boutons. Il est possible de modifier le comportement de redimensionnement par défaut en définissant une largeur explicite pour les boutons.

L'exemple suivant illustre comment conserver la taille implicite de chaque bouton de tabulation au lieu de la redimensionner pour l'adapter à la barre d'onglets :

TabBar {
    width: parent.width
    TabButton {
        text: "First"
        width: implicitWidth
    }
    TabButton {
        text: "Second"
        width: implicitWidth
    }
    TabButton {
        text: "Third"
        width: implicitWidth
    }
}

Onglets cliquables

Si la largeur totale des boutons dépasse la largeur disponible de la barre d'onglets, celle-ci devient automatiquement cliquable.

TabBar {
    id: bar
    width: parent.width

    Repeater {
        model: ["First", "Second", "Third", "Fourth", "Fifth"]

        TabButton {
            text: modelData
            width: Math.max(100, bar.width / 5)
        }
    }
}

Voir également TabButton, Personnaliser la barre d'onglets, les contrôles de navigation, les contrôles de conteneurs et la gestion du focus dans les contrôles Qt Quick .

Property Documentation

contentHeight : real [since QtQuick.Controls 2.2 (Qt 5.9)]

Cette propriété contient la hauteur du contenu. Elle est utilisée pour calculer la hauteur totale implicite de la barre d'onglets.

Cette propriété a été introduite dans QtQuick.Controls 2.2 (Qt 5.9).

Voir aussi Container::contentHeight.

contentWidth : real [since QtQuick.Controls 2.2 (Qt 5.9)]

Cette propriété contient la largeur du contenu. Elle est utilisée pour calculer la largeur totale implicite de la barre d'onglets.

Cette propriété a été introduite dans QtQuick.Controls 2.2 (Qt 5.9).

Voir aussi Container::contentWidth.

position : enumeration

Cette propriété définit la position de la barre d'onglets.

Valeurs possibles :

La valeur par défaut est spécifique au style.

Voir également ApplicationWindow::header, ApplicationWindow::footer, Page::header, et Page::footer.

Documentation sur les propriétés attachées

TabBar.index : int [read-only, since QtQuick.Controls 2.3 (Qt 5.10)]

Cette propriété jointe contient l'index de chaque bouton d'onglet dans le site TabBar.

Elle est attachée à chaque bouton d'onglet de la page TabBar.

Cette propriété a été introduite dans QtQuick.Controls 2.3 (Qt 5.10).

TabBar.position : enumeration [read-only, since QtQuick.Controls 2.3 (Qt 5.10)]

Cette propriété jointe indique la position de la barre d'onglets.

Elle est attachée à chaque bouton d'onglet du site TabBar.

Valeurs possibles :

Cette propriété a été introduite dans QtQuick.Controls 2.3 (Qt 5.10).

TabBar.tabBar : TabBar [read-only, since QtQuick.Controls 2.3 (Qt 5.10)]

Cette propriété jointe contient la barre d'onglets qui gère ce bouton d'onglet.

Elle est attachée à chaque bouton d'onglet du site TabBar.

Cette propriété a été introduite dans QtQuick.Controls 2.3 (Qt 5.10).