Présentation des mises en page avec Qt Quick

Cet article est une adaptation en langue française de Introducing Qt Quick Layouts, de Jan Arve Sæther.

Jusqu'à Qt 5.1, les positions codées en dur et les ancres étaient les seuls outils fournis par Qt Quick pour positionner les composants de l'interface utilisateur.

Les positions codées en dur sont pratiques pour ajouter plusieurs composants, mais le comportement de l'interface est catastrophique lors des redimensionnements. Comme leur nom l'indique, les positions codées en dur permettent de positionner de manière absolue les composants mais ne gèrent ni la hauteur, ni la largeur de ces composants.

Les ancres apportent un soupçon de flexibilité au prix d'une plus grande verbosité. Avec ces dernières il est possible de rendre un composant redimensionnable en reliant le bord du composant au bord correspondant de la fenêtre et de faire de même pour le côté opposé. Il est cependant impossible de réarranger de manière uniforme les composants lors d'un redimensionnement de fenêtre.

La dernière option est de gérer l'arrangement des composants entièrement à la main. Cela offre une grande flexibilité mais peut devenir assez verbeux et encombrant tout en étant fort propice aux erreurs. Lors du développement des contrôles Qt Quick, une des priorités était d'améliorer la situation et de fournir une manière vraiment plus pratique d'arranger les composants.

Avec QtQuick 1.0, différents composants étaient disponibles à savoir le RowLayout, le ColumnLayout et enfin le GridLayout. Ces mises en page ont un comportement similaire à leurs cousins du module QtWidgets, respectivement QHBoxLayout, QVBoxLayout et QGridLaout. Nous essayons de rendre l'API de ces composants semblable à l'API des éléments QML Row, Grid et Column. Ainsi, si vous êtes déjà familiers avec n'importe laquelle de ces API, ces nouvelles mises en page avec Qt Quick auront l'air familières.

L'alignement des items à l'intérieur d'une cellule peut être spécifié à l'aide de la propriété Layout.alignment.

L'espace entre les lignes ou colonnes peut être spécifié grâce aux propriétés Layout.rowSpan et Layout.columnSpan.

Les coordonnées de grilles peuvent être mentionnées avec les propriétés Layout.row et Layout.column.

Les composants redimensionnables peuvent être spécifiés comme tels grâce aux propriétés Layout.fillWidth et Layout.fillHeight. C'était un de objectifs premiers des mises en page avec Qt Quick.

La taille minimale, préférée et maximale peuvent être spécifiées grâce aux propriétés Layout.minimumWidth, Layout.preferredWidth et Layout.maximumWidth respectivement. On peut remplacer « Width » par « Height » dans chacune des propriétés pour spécifier les contraintes en hauteur.

Ces nouvelles fonctionnalités peuvent vous paraître anodines alors qu'elle sont vraiment démentes. Vous pouvez maintenant avoir des composants redimensionnables et non redimensionnables dans la même mise en page ce qui rend les choses vraiment plus faciles et intuitives dans beaucoup de situations.

Imaginons que l'on veuille créer une barre d'outils avec deux boutons et un curseur qui occuperait le reste de l'espace disponible. Lors du redimensionnement, l'espace libre supplémentaire serait occupé par le curseur. Sans les nouvelles mises en page de Qt Quick, la solution la moins verbeuse aurait probablement consisté en un mélange de colonnes et d'ancres :

ToolBar {
    Row {
        id: row
        spacing: 2
        anchors.verticalCenter: parent.verticalCenter
        ToolButton { iconSource: "images/go-previous.png" }
        ToolButton { iconSource: "images/go-next.png" }
    }
    Slider {
        anchors.left: row.right
        anchors.leftMargin: 2
        anchors.verticalCenter: parent.verticalCenter
        anchors.right: parent.right
    }
}

Avec Qt Quick Layouts, tous les items peuvent être ajoutés à la même disposition :

ToolBar {
    RowLayout {
        anchors.fill: parent
        spacing: 2
        ToolButton { iconSource: "images/go-previous.png" }
        ToolButton { iconSource: "images/go-next.png" }
        Slider { Layout.fillWidth: true }
    }
}

Remarquez à quel point la dernière déclaration pour le curseur est courte. Lors de l'utilisation des mises en page avec Qt Quick, l'espacement ne doit être défini qu'une seule fois. Le code est nettement raccourci, on passe ainsi de 288 à 172 caractères (espaces exclus), ce qui représente une diminution de 40 %.

Les mises en page de Qt Quick permettent de réduire la longueur du code de près de 40 % et d'améliorer sa lisibilité (non seulement du fait de la concision, mais aussi parce qu'il devient plus proche de la structure de l'interface graphique). Si vous souhaitez développer une interface graphique redimensionnable, vous trouverez probablement que les mises en page avec Qt Quick sont bien plus pratiques et commodes que le positionnement totalement à la main ou avec les ancres.

Un tout grand merci à Thibaut Cuvelier et à Fabien pour leur relecture attentive.