Concepts importants sur Qt Quick - Positionnement

Les éléments visuels en QML peuvent être positionnés de différentes manières. Le concept de positionnement le plus important est celui de l'ancrage, une forme de positionnement relatif où les éléments peuvent être ancrés (ou attachés) les uns aux autres à certaines limites. Les autres concepts de positionnement comprennent le positionnement absolu, le positionnement avec des 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 doit être statique, le positionnement manuel est la forme de positionnement la plus efficace.

Dans toute interface utilisateur, les types visuels existent à un emplacement particulier dans les coordonnées de l'écran à tout moment. Bien que les interfaces utilisateur animées de manière fluide et dynamique soient l'une des priorités du site Qt Quick, les interfaces utilisateur à positionnement statique restent une option viable. De plus, si la position de ces types d'interfaces ne change pas, il est souvent plus efficace 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é dans le 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 la coordonnée (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 dans le canevas visuel. Ce type de positionnement est le plus dynamique, mais un certain coût de performance est associé au positionnement des éléments de cette manière.

La position et les dimensions d'un objet visuel peuvent également être définies par le biais de liaisons de propriétés. L'avantage de cette méthode est que les valeurs sont automatiquement mises à jour au fur et à mesure que les dépendances des liaisons changent. Par exemple, la largeur d'un rectangle peut dépendre de la largeur du rectangle voisin.

Si les liaisons constituent un moyen très souple et intuitif de créer des mises en page dynamiques, il convient de noter qu'elles ont un coût en termes de performances et que, dans la mesure du possible, il est préférable d'opter pour des mises en page à base d'ancres vierges.

Ancres

Les ancres permettent de placer un élément à côté ou à l'intérieur d'un autre, en attachant un ou plusieurs points d'ancrage (limites) de l'élément à un point d'ancrage de l'autre élément. Ces ancres resteront en place même si les dimensions ou l'emplacement de l'un des éléments changent, ce qui permet de créer des interfaces utilisateur très dynamiques.

Un objet visuel peut être considéré comme ayant plusieurs points d'ancrage (ou plus correctement, 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 des ancres en tant que concept de premier niveau. Voir la documentation sur le positionnement à l'aide d'ancres pour des informations plus détaillées sur le sujet.

Il est important de noter que les dispositions basées sur les ancres sont généralement beaucoup plus performantes que les dispositions basées sur les liens, si elles sont parfaites. Une disposition à base d'ancres "vierge" est une disposition qui n'utilise que des ancres (avec imbrication d'objets) pour déterminer le positionnement, tandis qu'une disposition à base d'ancres "contaminée" est une disposition qui utilise à la fois des ancres 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.

Positionneurs

Qt Quick fournit également des éléments de positionnement intégrés. Pour 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 dans ces formations de la manière la plus efficace possible. Voir la documentation sur les types de positionneurs d'éléments pour plus d'informations sur l'utilisation des positionneurs prédéfinis.

Dispositions

Depuis Qt 5.1, le module Qt Quick Layouts peut également être utilisé pour organiser les éléments Qt Quick dans une interface utilisateur. Contrairement aux positionneurs, les types de Qt Quick Layouts gèrent à la fois la position et la taille des éléments dans une interface déclarative. Ils conviennent parfaitement aux interfaces utilisateur redimensionnables.

Prise en charge de la droite vers la gauche

La directionnalité de la forme écrite d'une langue a souvent un impact important 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 qu'aux mises en page de texte de droite à gauche.

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