Qt Quick Vue d'ensemble des modèles

Utilisez les modèles Qt Quick pour organiser les éléments d'une interface utilisateur. Qt Quick Les modèles redimensionnent leurs éléments, ce qui les rend bien adaptés aux interfaces utilisateur redimensionnables.

Caractéristiques principales

Voici quelques-unes des principales caractéristiques de Qt Quick Layouts :

• Align les éléments du site avec la propriété Layout.alignment.
• Spécifier resizable items avec les propriétés Layout.fillWidth et Layout.fillHeight.
• Définir des contraintes de taille avec les propriétés Layout.minimumWidth, Layout.preferredWidth, et Layout.maximumWidth - "Width" peut être remplacé par "Height" pour spécifier des contraintes similaires à la hauteur.
• Vous pouvez spécifier spacing avec spacing, rowSpacing, ou columnSpacing.
• Etirez les éléments horizontalement et verticalement avec stretch factors.

En outre, GridLayout ajoute les fonctionnalités suivantes :

• Grid coordinatesLa taille des éléments, contrôlée par les propriétés Layout.row et Layout.column.
• Automatic grid coordinates utilisé avec les propriétés flow, rows, et columns.
• Spans les lignes et les colonnes, que vous pouvez spécifier à l'aide des propriétés Layout.rowSpan et Layout.columnSpan.

Pour commencer

Pour commencer à utiliser les présentations Qt Quick, importez les types QML dans votre application à l'aide de l'instruction d'importation suivante dans votre fichier .qml:

import QtQuick.Layouts

L'étape suivante consiste à créer une présentation simple. Vous pouvez également étudier le site Qt Quick Layouts - Basic Example.

Une mise en page simple

L'objectif de l'utilisation d'une mise en page est de réorganiser ses enfants chaque fois que la mise en page change de taille. Cela signifie que l'application doit s'assurer que la disposition est redimensionnée. Dans l'extrait suivant, la disposition RowLayout s'en assure en spécifiant anchors.fill: parent. Toutefois, vous pouvez également y parvenir par d'autres moyens, notamment en spécifiant les propriétés width et height. Dans le même extrait, le rectangle orange a une taille fixe de 100 x 150 pixels, et 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 modèles sont responsables de la géométrie de leurs enfants. Cela inclut des propriétés telles que width, height, x, y, anchors), etc.

Espacement

Comme nous l'avons vu dans l'extrait précédent, l'espacement pour le RowLayout est fixé à 6. Cela garantit que tous les éléments de la mise en page sont espacés de 6 pixels :

spacing: 6

Si vous ne spécifiez pas de valeur d'espacement, la disposition utilisera une valeur par défaut de 5 pixels. L'espacement, ainsi que la largeur implicite des enfants, 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 ColumnLayoutdéfinissent toutes deux Layout.fillWidth : true dans l'extrait suivant. Il est naturel de penser qu'ils obtiendront tous deux la même largeur. Cependant, en raison de l'espacement par défaut de 5 pixels entre les éléments du RowLayout intérieur, la largeur implicite du premier ColumnLayout devient plus importante, ce qui laisse moins de place pour le second. En voici un 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 produira une mise en page qui ressemblera à ceci :

Pour garantir la taille égale de ces deux colonnes, vous pouvez soit

1. définir l'espacement de la structure RowLayout à 0, ou
2. définir preferredWidth à des valeurs égales sur les deux ColumnLayouts.

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

Pour chaque élément, la taille préférée effective peut provenir d'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 dont la largeur ou la hauteur est valide.

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

Contraintes de taille

Étant donné qu'un élément peut être redimensionné par sa mise en page, la mise en page doit connaître les tailles minimum, preferred, et maximum de tous les éléments pour lesquels la propriété Layout.fillWidth ou Layout.fillHeight est définie sur true.

La largeur et la hauteur de 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 liée à une taille spécifique, elle distribue de l'espace supplémentaire sur la base du rapport entre les tailles préférées de ses éléments, tout en tenant compte des tailles minimales et maximales. Les tailles préférées et implicites agissent comme des ratios et des poids lorsque tous les éléments définissent fillWidth et fillHeight.

Par exemple, l'exemple suivant produit une mise en page avec deux rectangles côte à côte qui s'étire horizontalement. Le rectangle orange peut être redimensionné de 50x150 à 300x150, et le rectangle prune peut être redimensionné de 100x100 à ∞x100. Tant que les largeurs minimale et maximale de chaque élément ne sont pas dépassées, le rectangle prune aura deux fois la largeur 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 ces contraintes implicites à 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 les contraintes de ses éléments enfants.

Connexion des fenêtres et des schémas de configuration

Vous pouvez utiliser des concepts d'ancrage normaux pour vous assurer que votre mise en page suit le 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 vous assurer que la fenêtre ne peut pas être redimensionnée au-delà des contraintes de la mise en page. Vous pouvez prendre les contraintes de taille de la mise en page et les définir sur les valeurs 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, la taille initiale de la fenêtre doit correspondre à la taille implicite de la mise en page :

width: layout.implicitWidth
height: layout.implicitHeight

Échelonnement et étirement des éléments

Utilisez spans dans une page GridLayout pour que les éléments enfants occupent plus d'une cellule. Par exemple, vous pouvez avoir un site GridLayout avec six cellules sur deux lignes. La ligne supérieure contient les élémentsitem1, item2 et item3. La ligne inférieure contient l'élément item4, qui spécifie columnSpan : 3 et alignment : Qt.AlignHCenter. L'élément 4 est ainsi placé au milieu des trois cellules qui composent la rangée inférieure. L'extrait 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 donnée implicitement par leur contenu. Par exemple, un bouton peut avoir un impact sur la largeur de la colonne dans laquelle il se trouve ou sur la hauteur de la ligne dans laquelle il se trouve. Cela signifie que GridLayout n'a pas une distribution uniforme. Pour cette raison, vous ne pouvez pas utiliser une portée pour étirer une mise en page. Pour manipuler l'étirement d'un élément ou d'une présentation, utilisez plutôt stretchFactors et/ou les indications de taille.