Concepts - Parent visuel dans Qt Quick

Parent visuel

Lors de la création de scènes visuelles avec Qt Quick, il est important de comprendre le concept de parent visuel.

Le concept de parent visuel dans Qt Quick est distinct du concept de parent d’objet au sein de la hiérarchie des parents d’ QObject, mais il y est lié. Tous les objets QML possèdent un parent d’objet, qui est déterminé par la hiérarchie d’objets dans laquelle l’objet est déclaré. Lorsque l’on utilise le module QtQuick, le type Item est le type de base de tous les éléments visuels fournis par ce module ; il introduit le concept d’un parent visuel supplémentaire, défini par la propriété parent d’un élément. Chaque élément possède un parent visuel ; si la valeur de la propriété parent d’un élément est null, celui-ci ne sera pas affiché dans la scène.

Tout objet attribué à la propriété ` data ` d’un élément devient un enfant de cet élément au sein de sa hiérarchie ` QObject `, à des fins de gestion de la mémoire. De plus, si un objet ajouté à la propriété « data » est de type « Item », il est également attribué à la propriété « Item::children » et devient un enfant de l’élément au sein de la hiérarchie visuelle de la scène. (La plupart des algorithmes de parcours de la hiérarchie Qt Quick, en particulier les algorithmes de rendu, ne prennent en compte que la hiérarchie parentale visuelle.)

Pour plus de commodité, la propriété « Item » data est sa propriété par défaut. Cela signifie que tout élément enfant déclaré au sein d’un objet Item sans être affecté à une propriété spécifique est automatiquement affecté à la propriété data et devient un enfant de l’élément, comme décrit ci-dessus. Ainsi, les deux blocs de code ci-dessous produisent le même résultat, et vous verrez presque toujours la forme illustrée ci-dessous à gauche, plutôt que l’affectation explicite ` data ` illustrée ci-dessous à droite :

import QtQuick 2.0

Item {
    width: 100; height: 100

    Rectangle { width: 50;
                height: 50;
                color: "red" }
}

import QtQuick 2.0

Item {
    width: 100; height: 100

    data: [
        Rectangle { width: 50;
                    height: 50;
                    color: "red" }
    ]
}

Le parent visuel d’un élément peut être modifié à tout moment en définissant sa propriété parent. Ainsi, le parent visuel d’un élément n’est pas nécessairement le même que son parent objet.

Lorsqu’un élément devient le fils d’un autre élément :

• La propriété ` parent ` de l’enfant fait référence à son élément parent
• Les propriétés ` children ` et ` childrenRect ` du parent prennent cet enfant en compte

Le fait de déclarer un élément comme enfant d’un autre ne signifie pas automatiquement que l’élément enfant sera correctement positionné ou redimensionné pour s’adapter à son parent. Certains types QML peuvent présenter des comportements intégrés qui affectent le positionnement des éléments enfants — par exemple, un objet ` Row ` repositionne automatiquement ses enfants en formation horizontale — mais ces comportements sont imposés par les implémentations spécifiques propres à ces types. De plus, un élément parent ne recadrera pas automatiquement ses enfants pour les contenir visuellement dans ses limites visuelles, à moins que sa propriété ` clip ` ne soit définie sur `true`.

Le parent visuel d’un élément peut entrer en ligne de compte dans certaines circonstances particulières, comme décrit dans les sections ci-dessous.

Coordonnées des éléments

Les coordonnées d’un élément étant relatives au parent visuel, elles peuvent être affectées par des modifications de la hiérarchie visuelle. Consultez la page conceptuelle « Coordonnées visuelles » pour plus de détails.

Ordre de superposition

Qt Quick Les éléments utilisent un algorithme de dessin récursif pour déterminer quels éléments sont dessinés par-dessus en cas de collision. En général, les éléments sont dessinés par-dessus leurs éléments parents, dans l’ordre où ils ont été créés (ou spécifiés dans le fichier QML). Ainsi, dans l’exemple suivant, le rectangle bleu sera dessiné par-dessus le rectangle vert :

Rectangle {
    color: "#272822"
    width: 320
    height: 480

    Rectangle {
        y: 64
        width: 256
        height: 256
        color: "green"
    }

    Rectangle {
        x: 64
        y: 172
        width: 256
        height: 256
        color: "blue"
    }
}

Comme l’algorithme parcourt de manière récursive la hiérarchie visuelle des éléments, tous les enfants du rectangle vert seront également dessinés sous le rectangle bleu et sous chacun des enfants du rectangle bleu.

L’ordre d’empilement peut être modifié à l’aide de la propriété ` Item::z `. Les valeurs z inférieures à 0 s’empileront sous l’élément parent, et si des valeurs z sont attribuées, les éléments frères s’empileront selon l’ordre z (l’ordre de création servant à départager en cas d’égalité). Les valeurs z n’affectent l’empilement que par rapport aux éléments frères et à l’élément parent. Si un élément est masqué par une sous-arborescence dont la racine se trouve au-dessus de son élément parent, aucune valeur z attribuée à cet élément ne permettra d’augmenter son ordre de superposition pour qu’il s’affiche au-dessus de cette sous-arborescence. Pour faire apparaître cet élément au-dessus de l’autre sous-arborescence, vous devrez modifier les valeurs z situées plus haut dans la hiérarchie ou réorganiser la hiérarchie visuelle des éléments.

Rectangle {
    color: "#272822"
    width: 320
    height: 480

    Rectangle {
        y: 64
        z: 1
        width: 256
        height: 256
        color: "green"

        Rectangle {
            x: 192
            y: 64
            z: 2000
            width: 128
            height: 128
            color: "red"
        }
    }

    Rectangle {
        x: 64
        y: 192
        z: 2
        width: 256
        height: 256
        color: "blue"
    }
}

Dans l’exemple ci-dessus, le rectangle rouge possède une valeur z élevée, mais reste néanmoins superposé sous le rectangle bleu. Cela s’explique par le fait qu’il est un enfant du rectangle vert, et que le rectangle vert est un élément de même niveau que le rectangle bleu. La valeur z du rectangle vert est inférieure à celle du rectangle bleu ; par conséquent, le rectangle vert et tous ses enfants seront superposés sous le rectangle bleu.

Propriété du canevas

La définition de ce qui est affiché dans une scène « Qt Quick » est l’arborescence des éléments visuels dont la racine est QQuickWindow::contentItem. Par conséquent, pour ajouter un élément à une scène spécifique « Qt Quick » en vue de son affichage, celui-ci doit devenir un enfant, au sein de la hiérarchie visuelle, d’un élément déjà présent dans cette hiérarchie, tel que QQuickWindow::contentItem.