Positionneurs et mises en page

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

Vous trouverez ci-dessous un bref aperçu. Pour plus de détails, consultez la section « Concepts importants » de la documentation « Qt Quick » - « Positionnement ».

Positionnement manuel

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

En combinant l’utilisation de liaisons (bindings) à la place de valeurs constantes pour ces propriétés, le positionnement relatif s’effectue également facilement en attribuant les coordonnées x et y aux 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"
    }
}

Ancrages

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, consultez la section « Positionnement à l’aide d’ancrages » ainsi que la documentation relative à l’ 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 d’éléments selon un schéma régulier, l’ Qt Quick fournit plusieurs types de positionneurs. Les éléments placés dans un positionneur sont automatiquement positionnés d’une certaine manière ; par exemple, un positionneur « Row » positionne les éléments de manière à ce qu’ils soient adjacents horizontalement (formant une ligne).

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 mise en page

Les types de mise en page fonctionnent de manière similaire aux positionneurs, mais permettent d'affiner ou de restreindre davantage la mise en page. Plus précisément, les types de mise en page vous permettent de :

• définir l’alignement du texte et des autres éléments
• redimensionner et remplir automatiquement les zones allouées à l’application
• définir des contraintes de taille, telles que des dimensions minimales ou maximales
• définir l'espacement entre les éléments au sein 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 de code ci-dessus est tiré de l'exemple « Basic Layouts ». Il illustre la simplicité avec laquelle il est possible d'ajouter divers champs et éléments dans une mise en page. L'GridLayout e peut être redimensionnée et son format est personnalisable grâce à diverses propriétés.

Pour plus d’informations sur les types de mise en page, rendez-vous sur :

• Qt Quick Layouts Présentation
• Exemple «Mises en page de base »