Qt Quick Mises en page adaptatives

Les mises en page constituent une bonne technique pour créer des interfaces utilisateur redimensionnables. Cependant, cette approche présente certaines limites, car il n’est pas possible de réduire ou d’agrandir les éléments à l’infini sans nuire à l’ergonomie et à l’esthétique. À un certain stade, il est plus judicieux de réorganiser, de supprimer ou d’ajouter certains éléments. L’adaptation à différents appareils (par exemple, les téléphones et les tablettes) et aux orientations d’écran (paysage ou portrait) peut être mise en œuvre de manière similaire. C’est ce que l’on entend généralement par « mises en page adaptatives » et Qt Quick Layouts fournit diverses API pour les mettre en œuvre.

Hiérarchie statique, mise en page adaptative

Les mises en page possèdent une hiérarchie, généralement définie par le code QML déclaratif. Pour certaines mises en page réactives simples, il suffit de conserver la hiérarchie inchangée et de se contenter d’ajuster certaines propriétés qui influencent 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 mise en page et à « Layout r » les propriétés associées à l’aide de petites expressions. Vous pouvez par exemple utiliser des opérateurs ternaires afin de modifier la mise en page en fonction de sa largeur. Les propriétés de « Item », telles que « Item.visible », qui masquent ou affichent différentes parties de l’interface, peuvent être modifiées de la même manière.

Dans l'extrait de code suivant, ce concept est utilisé pour transformer une mise en page à deux colonnes en une mise en page à 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 obtenues se présentent ainsi, en fonction de la largeur de la fenêtre.

Différents niveaux de mises en page et d’éléments peuvent être imbriqués, mais les « Items » ne peuvent être déplacés qu’au sein de leur « Item.parent ».

États

Le même résultat peut être obtenu à l’aide des états d’Qt Quick . L’avantage des états réside dans le fait que les propriétés d’ Layout d’une mise en page spécifique sont regroupées en un seul endroit dans le fichier QML (du moins celles qui changent). L’exemple présenté précédemment peut être implémenté comme suit, et le résultat est identique tant au niveau de l’apparence que du comportement.

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 à utiliser l’interface LayoutItemProxy. L’implémentation de l’exemple minimaliste présenté précédemment est disponible dans la documentation relative à ce type. Contrairement aux solutions présentées précédemment, l’interface LayoutItemProxy permet de déclarer des mises en page totalement distinctes pour différents formats d’affichage. Cela peut s’avérer particulièrement utile pour les mises en page plus complexes, afin d’améliorer et de maintenir une structure de code source raisonnable.

Notez que l’API « LayoutItemProxy » est en phase de prévisualisation technologique et qu’elle est susceptible d’être modifiée ou supprimée dans les futures versions de Qt.

Hiérarchie adaptative, mise en page adaptative

Les restructurations plus complexes de la mise en page peuvent nécessiter des modifications de la hiérarchie. Un petit bouton isolé dans une mise en page de petite taille peut être combiné à d’autres boutons et placé dans une boîte au sein d’une mise en page plus grande. Un élément entièrement visible dans une mise en page peut nécessiter une « Flickable » dans une autre mise en page plus petite. Dans ce scénario, il est préférable de s’appuyer sur l’ LayoutItemProxy. L’ LayoutItemProxy permet de déplacer des éléments « Items » entre différents niveaux hiérarchiques et entre différentes « Item.parent ».

L’exemple de mise en page responsive «Qt Quick Layouts » illustre un cas où un élément est déplacé entre différents niveaux hiérarchiques : il est placé dans un « Flickable » dans une mise en page et au niveau supérieur dans une autre. Les deux mises en page obtenues se présentent comme suit.

Liens utiles : consultez vos directives de conception

De nombreuses directives de conception proposent de l’aide et des conseils pour créer des mises en page adaptatives. La mise en œuvre des techniques correspondantes est possible grâce aux API mentionnées ci-dessus. Pour plus d’informations, nous vous recommandons les liens suivants :

• Directives d’interface utilisateur d’Apple
• Mises en page Material3
• Techniques de conception responsive Microsoft Fluent