Positionneurs d'éléments

Les éléments de positionnement sont des éléments conteneurs qui gèrent la position des éléments dans une interface utilisateur déclarative. Ils se comportent de manière similaire aux gestionnaires de mise en page utilisés avec les Qt Widgets standard, à la différence qu’ils sont également des conteneurs à part entière.

Les positionneurs facilitent la gestion d'un grand nombre d'éléments lorsqu'il est nécessaire de les agencer selon une disposition régulière.

Qt Quick Layouts Ils peuvent également être utilisés pour organiser des éléments d'Qt Quick s dans une interface utilisateur. Ils gèrent à la fois les positions et les tailles des éléments d'une interface utilisateur déclarative, et sont particulièrement adaptés aux interfaces utilisateur redimensionnables.

Positionneurs

Un ensemble de positionneurs standard est fourni dans le jeu de base des types graphiques d’ Qt Quick:

Éléments de colonne

Column sont utilisés pour organiser verticalement les éléments. L'exemple suivant utilise un élément « Column » pour organiser trois éléments « Rectangle » dans une zone définie par un « Item » externe. La propriété « spacing » est définie de manière à inclure un léger espacement entre les rectangles.

import QtQuick

Item {
    width: 310; height: 170

    Column {
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter

        spacing: 5

        Rectangle { color: "lightblue"; radius: 10.0
                    width: 300; height: 50
                    Text { anchors.centerIn: parent
                           font.pointSize: 24; text: "Books" } }
        Rectangle { color: "gold"; radius: 10.0
                    width: 300; height: 50
                    Text { anchors.centerIn: parent
                           font.pointSize: 24; text: "Music" } }
        Rectangle { color: "lightgreen"; radius: 10.0
                    width: 300; height: 50
                    Text { anchors.centerIn: parent
                           font.pointSize: 24; text: "Movies" } }
    }
}

Notez que, puisque « Column » hérite directement de « Item », toute couleur d’arrière-plan doit être appliquée au rectangle parent, si vous le souhaitez.

Éléments « Row »

Row sont utilisés pour disposer horizontalement des éléments. L'exemple suivant utilise un élément « Row » pour disposer trois éléments « Rectangle » arrondis dans une zone définie par un « Rectangle » coloré extérieur. La propriété « spacing » est définie de manière à inclure un léger espacement entre les rectangles.

Nous veillons à ce que le rectangle parent soit suffisamment grand pour qu’il reste un peu d’espace autour des bords de l’élément « Row » centré horizontalement.

import QtQuick

Rectangle {
    width: 320; height: 110
    color: "#c0c0c0"

    Row {
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter

        spacing: 5

        Rectangle { width: 100; height: 100; radius: 20.0
                    color: "#024c1c" }
        Rectangle { width: 100; height: 100; radius: 20.0
                    color: "#42a51c" }
        Rectangle { width: 100; height: 100; radius: 20.0
                    color: "white" }
    }
}

Éléments « Grid »

Grid sont utilisés pour disposer des éléments selon une grille ou un tableau. L’exemple suivant utilise un élément « Grid » pour placer quatre éléments « Rectangle » dans une grille 2 × 2. Comme pour les autres positionneurs, l’espacement entre les éléments peut être spécifié à l’aide de la propriété « spacing ».

import QtQuick

Rectangle {
    width: 112; height: 112
    color: "#303030"

    Grid {
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
        columns: 2
        spacing: 6

        Rectangle { color: "#aa6666"; width: 50; height: 50 }
        Rectangle { color: "#aaaa66"; width: 50; height: 50 }
        Rectangle { color: "#9999aa"; width: 50; height: 50 }
        Rectangle { color: "#6666aa"; width: 50; height: 50 }
    }
}

Il n’y a pas de différence entre l’espacement horizontal et vertical inséré entre les éléments ; tout espace supplémentaire doit donc être ajouté au sein même des éléments.

Toute cellule vide de la grille doit être créée en définissant des éléments de remplacement aux emplacements appropriés dans la définition de la grille.

Éléments de flux

Flow sont utilisés pour disposer des éléments, tels que des mots, sur une page, en lignes ou en colonnes sans chevauchement.

Les éléments « Flow » organisent les éléments de manière similaire aux éléments « Grid », ceux-ci étant disposés en lignes le long d’un axe (l’axe mineur), et les lignes d’éléments étant placées les unes à côté des autres le long d’un autre axe (l’axe majeur). La direction du flux, ainsi que l’espacement entre les éléments, sont contrôlés par les propriétés « flow » et « spacing ».

L’exemple suivant montre un élément « Flow » contenant plusieurs éléments enfants de type « Text ». Ceux-ci sont disposés de manière similaire à ceux illustrés dans les captures d’écran.

import QtQuick

Rectangle {
    color: "lightblue"
    width: 300; height: 200

    Flow {
        anchors.fill: parent
        anchors.margins: 4
        spacing: 10

        Text { text: "Text"; font.pixelSize: 40 }
        Text { text: "items"; font.pixelSize: 40 }
        Text { text: "flowing"; font.pixelSize: 40 }
        Text { text: "inside"; font.pixelSize: 40 }
        Text { text: "a"; font.pixelSize: 40 }
        Text { text: "Flow"; font.pixelSize: 40 }
        Text { text: "item"; font.pixelSize: 40 }
    }
}

Les principales différences entre les positionneurs « Grid » et « Flow » résident dans le fait que les éléments situés à l’intérieur d’un « Flow » s’enroulent lorsqu’ils manquent d’espace sur l’axe secondaire, et que les éléments d’une ligne peuvent ne pas être alignés avec ceux d’une autre ligne si leurs tailles ne sont pas uniformes. Comme pour les éléments « Grid », il n’existe pas de contrôle indépendant de l’espacement entre les éléments et entre les lignes d’éléments.

Autres méthodes de positionnement des éléments

Il existe plusieurs autres façons de positionner des éléments dans une interface utilisateur. Outre la technique de base consistant à spécifier directement leurs coordonnées, ils peuvent être positionnés par rapport à d’autres éléments à l’aide d’ancrages, ou utilisés avec des modèles de données QML tels que le modèle d’objet.