Positionneurs et mises en page

Il existe plusieurs façons de positionner des éléments en QML.

En voici un bref aperçu. Pour plus de détails, voir Concepts importants sur Qt Quick - Positionnement.

Positionnement manuel

Les éléments peuvent être placés à des coordonnées x,y spécifiques sur l'écran en définissant leurs propriétés x,y. Cela permet de définir leur position par rapport au coin supérieur gauche de leur parent, conformément aux règles du système de coordonnées visuelles.

Grâce à l'utilisation de liaisons au lieu de valeurs constantes pour ces propriétés, le positionnement relatif est également facile à réaliser en définissant les coordonnées x et y avec les liaisons appropriées.

import QtQuick

Item {
    width: 100; height: 100

    Rectangle {
        // Manually positioned at 20,20
        x: 20
        y: 20
        width: 80
        height: 80
        color: "red"
    }
}

Ancres

Le type Item permet de s'ancrer à d'autres types Item. Il existe sept lignes d'ancrage pour chaque élément : gauche, droite, centre vertical, haut, bas, ligne de base et centre horizontal. Les trois lignes d'ancrage verticales peuvent être ancrées à n'importe laquelle des trois lignes d'ancrage verticales d'un autre élément, et les quatre lignes d'ancrage horizontales peuvent être ancrées aux lignes d'ancrage horizontales d'un autre élément.

Pour plus de détails, voir Positionnement avec les ancres et la documentation du site anchors property.

import QtQuick

Item {
    width: 200; height: 200

    Rectangle {
        // Anchored to 20px off the top right corner of the parent
        anchors.right: parent.right
        anchors.top: parent.top
        anchors.margins: 20 // Sets all margins at once

        width: 80
        height: 80
        color: "orange"
    }

    Rectangle {
        // Anchored to 20px off the top center corner of the parent.
        // Notice the different group property syntax for 'anchors' compared to
        // the previous Rectangle. Both are valid.
        anchors { horizontalCenter: parent.horizontalCenter; top: parent.top; topMargin: 20 }

        width: 80
        height: 80
        color: "green"
    }
}

Positionneurs

Pour le cas courant où l'on souhaite positionner un ensemble de types selon un schéma régulier, Qt Quick propose des types de positionneurs. Les éléments placés dans un positionneur sont automatiquement positionnés d'une certaine manière ; par exemple, un Row positionne les éléments de manière à ce qu'ils soient horizontalement adjacents (formant une rangée).

Pour plus de détails, voir Positionneurs d'éléments.

import QtQuick

Item {
    width: 300; height: 100

    Row { // The "Row" type lays out its child items in a horizontal line
        spacing: 20 // Places 20px of space between items

        Rectangle { width: 80; height: 80; color: "red" }
        Rectangle { width: 80; height: 80; color: "green" }
        Rectangle { width: 80; height: 80; color: "blue" }
    }
}

Types de présentation

Lestypes de présentation fonctionnent de la même manière que les positionneurs, mais permettent d'affiner ou de restreindre davantage la présentation. Plus précisément, les types de mise en page vous permettent de

• définir l'alignement du texte et d'autres éléments
• de redimensionner et de remplir automatiquement les zones d'application allouées
• définir des contraintes de taille telles que des dimensions minimales ou maximales
• définir l'espacement entre les éléments de la mise en page

GroupBox {
    id: gridBox
    title: "Grid layout"
    Layout.fillWidth: true

    GridLayout {
        id: gridLayout
        rows: 3
        flow: GridLayout.TopToBottom
        anchors.fill: parent
        Label { text: "Line 1" }
        Label { text: "Line 2" }
        Label { text: "Line 3" }

        TextField { }
        TextField { }
        TextField { }

        TextArea {
            text: "This widget spans over three rows in the GridLayout.\n"
                  + "All items in the GridLayout are implicitly positioned from top to bottom."
            Layout.rowSpan: 3
            Layout.fillHeight: true
            Layout.fillWidth: true
        }
    }
}

L'extrait ci-dessus est tiré de l'exemple des mises en page de base. Il illustre la simplicité de l'ajout de divers champs et éléments dans une mise en page. Le site GridLayout peut être redimensionné et son format est personnalisable grâce à diverses propriétés.

Pour plus d'informations sur les types de modèles, consultez la page suivante :

• Qt Quick Vue d'ensemble des modèles
• Exemple demise en page de base