Concepts importants dans l'Qt Quick - Positionnement

Les éléments visuels en QML peuvent être positionnés de différentes manières. Le concept le plus important en matière de positionnement est celui de l’ancrage, une forme de positionnement relatif où les éléments peuvent être ancrés (ou fixés) les uns aux autres à certaines limites. Parmi les autres concepts de positionnement, on trouve le positionnement absolu, le positionnement à l’aide de liaisons de coordonnées, les positionneurs et les mises en page.

Positionnement manuel

Les éléments peuvent être positionnés manuellement. Si l’interface utilisateur est destinée à être statique, le positionnement manuel constitue la méthode la plus efficace.

Dans toute interface utilisateur, les éléments visuels occupent à tout instant un emplacement précis dans le système de coordonnées de l’écran. Bien que les interfaces utilisateur dynamiques et animées de manière fluide constituent un axe majeur de Qt Quick, les interfaces utilisateur à positionnement statique restent une option viable. De plus, si la position de ces éléments ne change pas, il est souvent plus performant de spécifier la position manuellement que d’utiliser les méthodes de positionnement plus dynamiques décrites dans les sections suivantes.

Dans Qt Quick, chaque objet visuel est positionné au sein du système de coordonnées fourni par le canevas visuel Qt Quick. Comme décrit dans ce document, les coordonnées x et y d’un objet visuel sont relatives à celles de son parent visuel, le coin supérieur gauche ayant pour coordonnées (0, 0).

Ainsi, l’exemple suivant affichera deux rectangles positionnés manuellement :

import QtQuick 2.0

Item {
    width: 200
    height: 200

    Rectangle {
        x: 50
        y: 50
        width: 100
        height: 100
        color: "green"
     }

     Rectangle {
        x: 100
        y: 100
        width: 50
        height: 50
        color: "yellow"
     }
}

Positionnement à l’aide de liaisons

Les éléments peuvent également être positionnés en attribuant des expressions de liaison aux propriétés associées à leur emplacement sur le canevas visuel. Ce type de positionnement est le plus dynamique, mais il entraîne un certain coût en termes de performances.

La position et les dimensions d’un objet visuel peuvent également être définies via des liaisons de propriétés. Cela présente l’avantage que les valeurs seront automatiquement mises à jour à mesure que les dépendances des liaisons changent. Par exemple, la largeur d’un rectangle peut dépendre de la largeur du rectangle adjacent.

Bien que les liaisons offrent un moyen très flexible et intuitif de créer des mises en page dynamiques, il convient de noter qu’elles entraînent un certain coût en termes de performances ; dans la mesure du possible, il est donc préférable de privilégier les mises en page Anchor « pures ».

Ancrages

Les ancrages permettent de placer un élément soit à côté, soit à l’intérieur d’un autre, en rattachant un ou plusieurs de ses points d’ancrage (limites) à un point d’ancrage de l’autre. Ces ancrages persistent même si les dimensions ou l’emplacement de l’un des éléments changent, ce qui permet de créer des interfaces utilisateur hautement dynamiques.

On peut considérer qu’un objet visuel possède divers points d’ancrage (ou, plus exactement, des lignes d’ancrage). D’autres éléments peuvent être ancrés à ces points, ce qui signifie que lorsqu’un objet change, les autres objets qui y sont ancrés s’ajustent automatiquement pour maintenir l’ancrage.

Qt Quick fournit les ancrages en tant que concept de premier niveau. Consultez la documentation relative au positionnement à l’aide d’ancrages pour obtenir des informations détaillées sur le sujet.

Il est important de noter que les mises en page basées sur des ancrages sont généralement bien plus performantes que celles basées sur des liaisons, à condition qu’elles soient « pures ». Une mise en page par ancrage « pure » est une mise en page qui utilise uniquement des ancrages (avec imbrication d’objets) pour déterminer le positionnement, tandis qu’une mise en page par ancrage « mixte » est une mise en page qui utilise à la fois des ancrages et des liaisons (soit sur des propriétés [x, y] liées à la position, soit sur des propriétés [width,height] liées aux dimensions) pour déterminer la position.

Les positionneurs

Qt Quick fournit également des éléments de positionnement intégrés. Dans de nombreux cas d’utilisation, le meilleur positionneur à utiliser est une simple grille, une ligne ou une colonne, et Qt Quick fournit des éléments qui positionneront les enfants selon ces structures de la manière la plus efficace possible. Consultez la documentation sur les types de positionneurs d’éléments pour plus d’informations sur l’utilisation des positionneurs prédéfinis.

Mises en page

À partir de Qt 5.1, le module Qt Quick Layouts peut également être utilisé pour agencer les éléments d’ Qt Quick dans une interface utilisateur. Contrairement aux positionneurs, les types de la section « Qt Quick Layouts » gèrent à la fois les positions et les tailles des éléments dans une interface déclarative. Ils sont particulièrement adaptés aux interfaces utilisateur redimensionnables.

Prise en charge de l’écriture de droite à gauche

La direction d’écriture d’une langue a souvent un impact considérable sur la manière dont les types visuels d’une interface utilisateur doivent être positionnés. Qt Quick prend en charge le positionnement de droite à gauche des types grâce aux mises en page prédéfinies, ainsi que les mises en page de texte de droite à gauche.

Veuillez consulter la documentation relative à la prise en charge de l’écriture de droite à gauche dans Qt Quick pour obtenir des informations détaillées sur le sujet.