Qt Quick Layouts Présentation

Utilisez les « Qt Quick Layouts » pour organiser les éléments dans une interface utilisateur. Les « Qt Quick Layouts » redimensionnent leurs éléments, ce qui les rend particulièrement adaptées aux interfaces utilisateur redimensionnables.

Principales fonctionnalités

Voici quelques-unes des principales fonctionnalités d’ Qt Quick Layouts:

• Align les éléments dotés de la propriété « Layout.alignment ».
• Spécifiez « resizable items » à l’aide des propriétés « Layout.fillWidth » et « Layout.fillHeight ».
• Définissez des contraintes de taille à l’aide des propriétés « Layout.minimumWidth », « Layout.preferredWidth » et « Layout.maximumWidth » – « Width » peut être remplacé par « Height » pour définir des contraintes similaires concernant la hauteur.
• Vous pouvez définir la propriété « spacing » à l’aide de « spacing », « rowSpacing » ou « columnSpacing ».
• Étirez les éléments à la fois horizontalement et verticalement avec stretch factors.

De plus, « GridLayout » ajoute les fonctionnalités suivantes :

• Grid coordinates, contrôlées par les propriétés Layout.row et Layout.column.
• Automatic grid coordinates utilisées conjointement avec les propriétés flow, rows et columns.
• Spans sur des lignes ou des colonnes, que vous pouvez spécifier à l’aide des propriétés Layout.rowSpan et Layout.columnSpan.

Pour commencer

Pour commencer à utiliser Qt Quick Layouts, importez les types QML dans votre application à l’aide de la directive d’importation suivante dans votre fichier .qml:

import QtQuick.Layouts

L'étape suivante consiste à créer une mise en page simple. Vous pouvez également consulter l'exemple de base «Qt Quick Layouts ».

Une mise en page simple

L'intérêt d'utiliser une mise en page est de réorganiser ses éléments enfants chaque fois que la mise en page change de taille. Cela signifie que l'application doit s'assurer que la mise en page est redimensionnée. Dans l'extrait de code suivant, la RowLayout garantit cela en spécifiant ` anchors.fill: parent`. Cependant, vous pouvez également y parvenir par d'autres moyens, par exemple en spécifiant les propriétés ` width ` et ` height `. Dans ce même extrait de code, le rectangle orange a une taille fixe de 100 × 150 pixels, tandis que le rectangle prune s’étendra pour occuper tout l’espace qui lui est alloué.

Window {
    RowLayout {
        anchors.fill: parent
        spacing: 6
        Rectangle {
            color: 'azure'
            Layout.preferredWidth: 100
            Layout.preferredHeight: 150
        }
        Rectangle {
            color: "plum"
            Layout.fillWidth: true
            Layout.fillHeight: true
        }
    }
}

Les mises en page (layouts) gèrent la géométrie de leurs éléments enfants. Cela inclut des propriétés telles que width, height, x, y, anchors), etc.

Espacement

Comme le montre l'extrait de code précédent, l'espacement de la `RowLayout` est défini sur 6. Cela garantit que tous les éléments de la mise en page sont espacés de 6 pixels les uns des autres :

spacing: 6

Si vous omettez de spécifier une valeur d’espacement, la mise en page utilisera la valeur par défaut de 5 pixels. L’espacement, ainsi que la largeur implicite (implicitWidth) de tout élément enfant, contribue à la largeur implicite de la mise en page. Il est important de garder cela à l’esprit si vous vous fiez au comportement par défaut, car cela peut avoir un impact sur la conception de votre mise en page. Par exemple, les deux ColumnLayoutont tous deux la propriété ` Layout.fillWidth: true` définie dans l’extrait de code suivant. On pourrait naturellement penser qu’ils auraient tous deux la même largeur. Cependant, en raison de l’espacement par défaut de 5 pixels entre les éléments du ` RowLayout` interne, la largeur implicite (`implicitWidth`) du premier `ColumnLayout` augmente, laissant moins de place au second. Par exemple :

ApplicationWindow {
    id: root
    width: 300
    height: 300
    visible: true

    RowLayout {
        anchors.fill: parent
        ColumnLayout {
            Rectangle {
                color: "tomato";
                Layout.fillWidth: true
                Layout.fillHeight: true
            }
            RowLayout {
                Rectangle {
                    color: "navajowhite"
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                }
                Rectangle {
                    color: "darkseagreen"
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                }
            }
        }
        ColumnLayout {
            Rectangle {
                color: "lightpink"
                Layout.fillWidth: true
                Layout.fillHeight: true
            }
            Rectangle {
                color: "slategray"
                Layout.fillWidth: true
                Layout.fillHeight: true
            }
            Rectangle {
                color: "lightskyblue"
                Layout.fillWidth: true
                Layout.fillHeight: true
            }
        }
    }
}

Cet extrait de code produira une mise en page qui ressemblera à ceci :

Pour vous assurer que ces deux colonnes ont la même taille, vous pouvez soit

1. définir l'espacement du RowLayout sur ` 0`, soit
2. définir la propriété preferredWidth sur des valeurs identiques pour les deux ColumnLayout.

Spécification de la taille préférée

Pour chaque élément, la taille préférée effective peut provenir de l'une des nombreuses propriétés candidates. Pour déterminer la taille préférée effective, un élément interroge ces propriétés candidates dans l'ordre suivant et utilise la première candidate présentant une largeur ou une hauteur valide.

Un élément peut spécifier « Layout.preferredWidth » sans avoir à spécifier « Layout.preferredHeight ». Dans ce cas, la hauteur préférée effective est déterminée à partir de « implicitHeight ».

Contraintes de taille

Étant donné qu’un élément peut être redimensionné par sa mise en page, celle-ci doit connaître les tailles « minimum », « preferred » et « maximum » de tous les éléments pour lesquels « Layout.fillWidth » ou « Layout.fillHeight » est défini sur « true ».

La largeur et la hauteur « preferred » correspondent à la largeur et à la hauteur réelles d’un élément, si la mise en page n’est pas elle-même liée à une taille spécifique. Si la mise en page est définie sur une taille spécifique, elle répartit l’espace supplémentaire en fonction du rapport entre les tailles « preferred » de ses éléments, tout en tenant compte des tailles minimales et maximales. Les tailles « preferred » et « implicit » agissent comme des rapports et des pondérations lorsque tous les éléments ont défini « fillWidth » et « fillHeight ».

Par exemple, le code suivant génère une mise en page comportant deux rectangles placés côte à côte qui s’étendent horizontalement. Le rectangle orange peut être redimensionné de 50x150 à 300x150, et le rectangle prune de 100x100 à ∞x100. Tant que les largeurs minimale et maximale de chaque élément ne sont pas dépassées, le rectangle prune aura une largeur deux fois supérieure à celle du rectangle orange.

RowLayout {
    id: layout
    anchors.fill: parent
    spacing: 6
    Rectangle {
        color: 'orange'
        Layout.fillWidth: true
        Layout.minimumWidth: 50
        Layout.preferredWidth: 100
        Layout.maximumWidth: 300
        Layout.minimumHeight: 150
        Text {
            anchors.centerIn: parent
            text: parent.width + 'x' + parent.height
        }
    }
    Rectangle {
        color: 'plum'
        Layout.fillWidth: true
        Layout.minimumWidth: 100
        Layout.preferredWidth: 200
        Layout.preferredHeight: 100
        Text {
            anchors.centerIn: parent
            text: parent.width + 'x' + parent.height
        }
    }
}

La combinaison des contraintes de chaque élément donne lieu aux contraintes implicites suivantes pour l’élément de mise en page :

Ainsi, la mise en page ne peut pas être plus étroite que 156, ni plus haute ou plus courte que 150, sans enfreindre l'une des contraintes de ses éléments enfants.

Lier des fenêtres et des mises en page

Vous pouvez utiliser les principes d'ancrage habituels pour vous assurer que votre mise en page s'adapte au redimensionnement de la fenêtre.

RowLayout {
    id: layout
    anchors.fill: parent

Vous pouvez vous appuyer sur les contraintes de taille des mises en page pour garantir que la fenêtre ne puisse pas être redimensionnée au-delà des limites de la mise en page. Vous pouvez récupérer les contraintes de taille de la mise en page et les définir sur les propriétés `minimumWidth`, `minimumHeight`, `maximumWidth` et `maximumHeight` de l'élément ` Window `. Le code suivant garantit que la fenêtre ne peut pas être redimensionnée au-delà des contraintes de la mise en page :

minimumWidth: layout.Layout.minimumWidth
minimumHeight: layout.Layout.minimumHeight
maximumWidth: 1000
maximumHeight: layout.Layout.maximumHeight

Enfin, définissez la taille initiale de la fenêtre sur la taille implicite de la mise en page :

width: layout.implicitWidth
height: layout.implicitHeight

Éléments s'étendant sur toute la largeur et s'étirant

Utilisez la propriété ` spans ` dans une ` GridLayout ` pour que les éléments enfants occupent plusieurs cellules. Par exemple, vous pouvez avoir une ` GridLayout ` comportant six cellules réparties sur deux lignes. La ligne du haut contient les élémentsitem1, item2 et item3. La ligne du bas contient l’élément item4, qui spécifie columnSpan: 3 et alignment: Qt.AlignHCenter. Cela place item4 au milieu des trois cellules qui composent la ligne du bas. L’extrait de code suivant sert d’exemple :

ApplicationWindow {
    id: root
    width: 300
    height: 300
    visible: true

    GridLayout {
       rows: 2
       columns: 3
       Rectangle {
           color: 'cyan'
           implicitWidth: 50
           implicitHeight: 50
       }
       Rectangle {
           color: 'magenta'
           implicitWidth: 50
           implicitHeight: 50
       }
       Rectangle {
           color: 'yellow'
           implicitWidth: 50
           implicitHeight: 50
       }
       Rectangle {
           color: 'black'
           implicitWidth: 50
           implicitHeight: 50
           Layout.columnSpan: 3
           Layout.alignment: Qt.AlignHCenter
       }
    }
}

La taille des lignes et des colonnes est déterminée implicitement par leur contenu. Par exemple, un « Button » peut influencer la largeur de la colonne dans laquelle il se trouve, ou la hauteur de la ligne dans laquelle il se trouve. Cela signifie que l’ GridLayout e ne présente pas une répartition uniforme. De ce fait, vous ne pouvez pas utiliser un « span » pour étirer une mise en page. Pour manipuler l’étirement d’un élément ou d’une mise en page, utilisez plutôt des « stretchFactors » et/ou des indications de taille.