Qt Quick Mises en page réactives

Les mises en page sont une bonne technique pour créer des interfaces utilisateur redimensionnables. Toutefois, cette approche a ses limites, car il n'est pas possible de rétrécir et d'agrandir des éléments sans limite sans sacrifier la convivialité et l'esthétique. À un moment donné, il est plus judicieux de réorganiser, de supprimer ou d'ajouter certains éléments. L'adaptation à différents appareils (téléphones et tables, par exemple) et à différentes orientations d'écran (paysage ou portrait) peut être mise en œuvre de la même manière. C'est ce que nous appelons généralement des mises en page réactives et Qt Quick Layouts fournit diverses API pour les mettre en œuvre.

Hiérarchie statique, mise en page adaptative

Les mises en page ont une hiérarchie, qui est généralement définie par le code QML déclaratif. Pour certaines mises en page réactives simples, il suffit de ne pas modifier la hiérarchie et de se contenter d'ajuster certaines des propriétés qui affectent la mise en page.

Description déclarative

L'approche la plus simple pour modifier la mise en page consiste à modifier les propriétés de la mise en page et Layout les propriétés attachées à l'aide de petites expressions. Vous pouvez par exemple utiliser des opérateurs ternaires pour modifier la mise en page en fonction de sa largeur. Item propriétés, telles que Item.visible, cacher ou afficher diverses parties de l'interface, peuvent être modifiées de la même manière.

Dans l'extrait suivant, ce concept est utilisé pour transformer une présentation en deux colonnes en une seule colonne si la largeur de la fenêtre est inférieure à une certaine valeur.

GridLayout {
    columns: width < 300 ? 1 : 2
    anchors.fill: parent

    Rectangle {
        id: rectangle1
        color: "tomato"
        Layout.fillHeight: true
        Layout.fillWidth: true
    }

    Rectangle {
        id: rectangle2
        color: "lightskyblue"
        Layout.fillHeight: true
        Layout.fillWidth: true
    }
}

Les mises en page résultantes ressemblent à ceci, en fonction de la largeur de la fenêtre.

Il est possible d'imbriquer différents niveaux de présentation et d'éléments, mais Items ne peut être déplacé qu'à l'intérieur de son Item.parent.

États

Le même résultat peut être obtenu avec Qt Quick States. L'avantage de l'utilisation d'états est que les propriétés Layout pour une présentation spécifique sont rassemblées en un seul point du fichier QML (du moins celles qui changent). L'exemple précédent peut être mis en œuvre de la manière suivante et le résultat est exactement le même.

GridLayout {
    anchors.fill: parent

    Rectangle {
        id: rectangle1
        color: "tomato"
        Layout.fillHeight: true
        Layout.fillWidth: true
    }

    Rectangle {
        id: rectangle2
        color: "lightskyblue"
        Layout.fillHeight: true
        Layout.fillWidth: true
    }

    states: [
        State {
            when: width < 300
            PropertyChanges { target: rectangle2; Layout.row: 1 }
            PropertyChanges { target: rectangle2; Layout.column: 0 }
        },
        State {
            when: width >= 300
            PropertyChanges { target: rectangle2; Layout.row: 0 }
            PropertyChanges { target: rectangle2; Layout.column: 1 }
        }
    ]
}

LayoutItemProxy

Une troisième approche consiste à appliquer le type LayoutItemProxy. La mise en œuvre de l'exemple minimaliste présenté précédemment peut être consultée dans la documentation du type. Contrairement aux solutions présentées précédemment, le site LayoutItemProxy permet de déclarer des mises en page totalement distinctes pour différents facteurs de forme. Cette possibilité peut s'avérer utile pour améliorer et maintenir une structure de code source raisonnable, en particulier dans le cas de présentations plus complexes.

Notez que l'API LayoutItemProxy est dans un état de prévisualisation technologique et peut être sujet à des changements ou à des suppressions dans les futures versions de Qt.

Hiérarchie adaptative, disposition adaptative

Des reconstructions plus complexes de la disposition peuvent nécessiter des modifications de la hiérarchie. Un petit bouton autonome dans une petite présentation peut être combiné avec d'autres boutons et placé dans une boîte d'une présentation plus grande. Un élément entièrement visible dans une mise en page peut nécessiter une adresse Flickable dans une autre mise en page plus petite. Dans ce cas, il est préférable d'utiliser LayoutItemProxy. LayoutItemProxy permet de déplacer Items entre différents niveaux hiérarchiques et entre différents Item.parent.

Le site Qt Quick Layouts - Responsive Layout Example montre un cas où un élément est déplacé entre différents niveaux hiérarchiques, placé dans un Flickable dans un cas et au niveau supérieur dans un autre. Les deux mises en page résultantes se présentent comme suit.

Liens utiles : Consultez vos lignes directrices en matière de conception

De nombreuses directives de conception proposent des aides et des conseils pour créer des mises en page réactives. Les API mentionnées ci-dessus permettent de mettre en œuvre les techniques correspondantes. Pour plus d'informations, nous vous recommandons les liens suivants :

• Lignes directrices d'Apple en matière d'interface humaine
• Mises en page Material3
• Techniques de conception réactive Microsoft Fluent