Positionneurs d'éléments

Les éléments positionneurs sont des éléments conteneurs qui gèrent la position des éléments dans une interface utilisateur déclarative. Les positionneurs se comportent de la même manière que les gestionnaires de disposition utilisés avec les widgets Qt Widgets standard, sauf qu'ils sont également des conteneurs à part entière.

Les positionneurs facilitent le travail avec de nombreux éléments lorsqu'ils doivent être disposés dans une mise en page régulière.

Qt Quick Les dispositions peuvent également être utilisées pour organiser les éléments Qt Quick dans une interface utilisateur. Ils gèrent à la fois la position et la taille des éléments d'une interface utilisateur déclarative et sont bien adaptés aux interfaces utilisateur redimensionnables.

Positionneurs

Un ensemble de positionneurs standard est fourni dans l'ensemble de base des types graphiques Qt Quick:

Éléments de colonne

Column sont utilisés pour disposer les éléments verticalement. L'exemple suivant utilise un élément Colonne pour disposer trois éléments Rectangle dans une zone définie par un élément extérieur Item. La propriété spacing est définie de manière à inclure un petit espace 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 ajoutée à un Rectangle parent, si vous le souhaitez.

Éléments de rangée

Row Les éléments Row sont utilisés pour organiser horizontalement les éléments. L'exemple suivant utilise un élément Rangée pour disposer trois éléments arrondis Rectangle dans une zone définie par un rectangle extérieur coloré. La propriété spacing est définie de manière à inclure un petit espace entre les rectangles.

Nous veillons à ce que le rectangle parent soit suffisamment grand pour qu'il reste de l'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 de la grille

Grid Les éléments Grille sont utilisés pour placer des éléments dans une grille ou un tableau. L'exemple suivant utilise un élément Grille pour placer quatre éléments Rectangle dans une grille 2 par 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, de sorte que tout espace supplémentaire doit être ajouté à l'intérieur des éléments eux-mêmes.

Toutes les cellules vides de la grille doivent être créées en définissant des éléments de remplacement aux endroits appropriés de la définition de la grille.

Éléments de flux

Flow Les éléments de flux sont utilisés pour placer des éléments comme des mots sur une page, avec des lignes ou des colonnes d'éléments qui ne se chevauchent pas.

Les éléments de flux organisent les éléments de la même manière que les éléments Grid, avec des éléments disposés en lignes le long d'un axe (l'axe mineur) et des lignes d'éléments placées les unes à côté des autres le long d'un autre axe (l'axe majeur). Le sens 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 un certain nombre d'éléments enfants Text. Ces éléments sont disposés de la même manière que dans le cas d'un flux de données. Ceux-ci sont disposés de la même manière que 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 de grille et de flux sont que les éléments à l'intérieur d'un flux s'enroulent lorsqu'ils manquent d'espace sur l'axe mineur et que les éléments d'une ligne peuvent ne pas être alignés avec les éléments d'une autre ligne si ces derniers n'ont pas des tailles uniformes. Comme pour les éléments de la grille, il n'y a 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 qui consiste à spécifier directement leurs coordonnées, ils peuvent être positionnés par rapport à d'autres éléments à l'aide d'ancres, ou utilisés avec des modèles de données QML tels que le modèle d'objet.