Qt Quick Mises en page - Exemple de mise en page réactive

Démontre comment utiliser LayoutItemProxy pour créer une interface utilisateur réactive.

Cet exemple montre comment utiliser les LayoutProxyItems en combinaison avec les layouts pour créer des layouts réactifs.

Exécution de l'exemple

Pour exécuter l'exemple à partir de Qt Creatorouvrez le mode Welcome et sélectionnez l'exemple à partir de Examples. Pour plus d'informations, voir Qt Creator: Tutoriel : Construire et exécuter.

Création d'éléments

Le type LayoutItemProxy permet d'utiliser le même élément dans différentes mises en page, bien qu'une seule mise en page puisse être visible en même temps. Cela peut être utilisé pour créer des mises en page réactives qui s'adaptent à la taille de la fenêtre ou de l'écran.

Nous devons d'abord définir tous les éléments qui doivent apparaître dans l'interface utilisateur à un moment ou à un autre. Nous utilisons un AnnotatedRect, qui est un simple rectangle auquel nous avons ajouté du texte.

Rectangle {
    id: contentItem
    Layout.fillWidth: true
    implicitHeight: grid.implicitHeight
    implicitWidth: grid.implicitWidth
    color: "#00414A"

    GridLayout {
        id: grid
        anchors {
            fill: parent
            margins: 8
        }
        columns: Math.max(1, Math.min(Math.round(width / 130), 6))
        Repeater {
            model: 60
            delegate: Rectangle {
                required property int index
                Layout.fillWidth: true
                Layout.margins: 8
                implicitWidth: 200
                implicitHeight: width
                radius: width / 10
                gradient: Gradient {
                    GradientStop { position: -0.2; color: "#2CDE85" }
                    GradientStop { position: 1.2; color: "#00414A" }
                }
                Text {
                    color: "#ffffff"
                    font.pointSize: 22
                    anchors.centerIn: parent
                    text: parent.index + 1
                }
            }
        }
    }
}

Button {
    id: a
    text: "Text"
    icon.source: "./icons/text.svg"
    Layout.fillWidth: true
    Layout.margins: 3
}

Button {
    id: b
    text: "Grid 1"
    icon.source: "./icons/grid.svg"
    Layout.fillWidth: true
    Layout.margins: 3
}

Button {
    id: c
    text: "Grid 2"
    icon.source: "./icons/grid.svg"
    Layout.fillWidth: true
    Layout.margins: 3
}

Button {
    id: d
    text: "Settings"
    icon.source: "./icons/settings.svg"
    Layout.fillWidth: true
    Layout.margins: 3
}

Création de mises en page

Nous pouvons maintenant déclarer différentes mises en page à l'aide de LayoutItemProxies, en ciblant les éléments déclarés précédemment. Une seule mise en page peut être définie comme suit.

ColumnLayout {
    id: smallLayout
    anchors.fill: parent

    Flickable {
        Layout.fillHeight: true
        Layout.fillWidth: true
        contentWidth: width
        contentHeight: gl.implicitHeight
        clip: true
        ScrollIndicator.vertical: ScrollIndicator { }
        LayoutItemProxy {
            id: gl
            width: parent.width
            height: implicitHeight
            target: contentItem
        }
    }

    RowLayout {
        Layout.fillHeight: false
        Layout.fillWidth: true
        Layout.margins: 5
        LayoutItemProxy{ target: a; }
        LayoutItemProxy{ target: b; }
        LayoutItemProxy{ target: c; }
    }
}

Cet extrait montre plusieurs façons d'utiliser LayoutItemProxy. La méthode la plus simple consiste à ajouter LayoutItemProxies à une présentation comme RowLayout ici. En outre, nous définissons une propriété supplémentaire Layout attachée à l'élément LayoutProxyItem qui affectera l'élément cible uniquement dans cette disposition particulière. Par ailleurs, nous constatons que l'élément d n'est pas utilisé dans la première présentation. Il est alors automatiquement masqué par LayoutItemProxy dans la deuxième présentation. Une autre façon de l'utiliser est de définir un LayoutItemProxy comme contenu d'un Flickable.

Une autre mise en page est déclarée comme suit.

RowLayout {
    id: largeLayout
    anchors.fill: parent
    ColumnLayout {
        Layout.minimumWidth: 100
        Layout.fillWidth: true
        Layout.margins: 2
        LayoutItemProxy{ target: a }
        LayoutItemProxy{ target: b }
        LayoutItemProxy{ target: c }
        Item { Layout.fillHeight: true }
        LayoutItemProxy{ target: d }
    }

    LayoutItemProxy {
        Layout.fillHeight: true
        Layout.fillWidth: true
        target: contentItem
    }
}

Nous montrons ici que LayoutItemProxies peut être utilisé avec un vrai Items au même niveau hiérarchique. D'une manière générale, le site LayoutItemProxy est flexible et permet des structures imbriquées d'éléments et de présentations.

Définition de la mise en page

Après avoir défini deux présentations, smallLayout et largeLayout, nous pouvons continuer à définir la présentation qui correspond à la taille actuelle de l'application. Nous définissons une nouvelle fonction pour ce code que nous appelons lors de l'initialisation de la fenêtre et chaque fois que la largeur change :

function setFittingLayout() {
    if (width < 450) {
        smallLayout.visible = true
        largeLayout.visible = false
    } else {
        smallLayout.visible = false
        largeLayout.visible = true
    }
}
onWidthChanged: setFittingLayout()
Component.onCompleted: setFittingLayout()

Au lieu d'appeler cette fonction après l'initialisation, nous pouvons cacher dans le code déclaratif tout ce qui n'est pas la disposition correcte pour la taille initiale.

Exemple de projet @ code.qt.io

© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.