Concepts - Parent visuel en 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 dans la hiérarchie des parents de QObject, mais il y est lié. Tous les objets QML ont un parent d'objet, qui est déterminé par la hiérarchie d'objets dans laquelle l'objet est déclaré. Lorsque vous travaillez avec le module QtQuick, le type Item est le type de base pour tous les éléments visuels fournis par ce module, et il fournit le concept d'un parent visuel supplémentaire, tel que défini par la propriété parent d'un élément. Chaque élément a un parent visuel ; si la valeur de la propriété parent d'un élément est null, l'élément ne sera pas rendu dans la scène.

Tout objet affecté à la propriété data d'un élément devient un enfant de l'élément dans sa hiérarchie QObject, à des fins de gestion de la mémoire. En outre, si un objet ajouté à la propriété de données est du type Item, il est également affecté à la propriété Item::children et devient un enfant de l'élément dans la hiérarchie de la scène visuelle. (La plupart des algorithmes d'exploration de la hiérarchie Qt Quick, en particulier les algorithmes de rendu, ne prennent en compte que la hiérarchie parentale visuelle).

Par commodité, la propriété Item data est sa propriété par défaut. Cela signifie que tout élément enfant déclaré dans 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 de 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 l'enfant d'un autre élément :

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

Déclarer qu'un élément est l'enfant d'un autre ne signifie pas automatiquement que l'élément enfant sera positionné ou dimensionné de manière appropriée pour s'adapter à son parent. Certains types QML peuvent avoir des comportements intégrés qui affectent le positionnement des éléments enfants - par exemple, un objet Row repositionne automatiquement ses enfants dans une formation horizontale - mais il s'agit de comportements appliqués par les implémentations spécifiques des types. En outre, un élément parent ne coupe pas automatiquement ses enfants pour les contenir visuellement à l'intérieur des limites visuelles du parent, à moins que sa propriété clip ne soit définie sur true.

Le parent visuel d'un élément peut être pris en considération dans des circonstances particulières, comme décrit dans les sections ci-dessous.

Coordonnées de l'élément

Les coordonnées de l'élément étant relatives au parent visuel, elles peuvent être affectées par des modifications de la hiérarchie visuelle. Pour plus de détails, voir la page sur le concept de coordonnées visuelles.

Ordre d'empilement

Qt Quick Les éléments utilisent un algorithme de dessin récursif pour déterminer quels éléments sont dessinés au-dessus en cas de collision. En général, les éléments sont dessinés au-dessus de leurs éléments parents, dans l'ordre dans lequel ils ont été créés (ou spécifiés dans le fichier QML). Ainsi, dans l'exemple suivant, le rectangle bleu sera dessiné au-dessus du 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 la hiérarchie des éléments visuels, tous les enfants du rectangle vert seront également dessinés sous le rectangle bleu et sous tous les enfants du rectangle bleu.

L'ordre d'empilement peut être influencé par la propriété Item::z. Les valeurs Z inférieures à 0 s'empileront sous le parent, et si des valeurs z sont attribuées, les frères et sœurs s'empileront dans l'ordre z (l'ordre de création étant utilisé pour départager les ex æquo). Les valeurs Z n'affectent que l'empilement par rapport aux frères et sœurs et à l'élément parent. Si un élément est masqué par un sous-arbre enraciné au-dessus de son élément parent, aucune valeur z sur cet élément n'augmentera son ordre d'empilement pour qu'il s'empile au-dessus de ce sous-arbre. Pour empiler cet élément au-dessus de l'autre sous-arbre, vous devrez modifier les valeurs z plus haut dans la hiérarchie ou réorganiser la hiérarchie des éléments visuels.

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 a une valeur z élevée, mais il est toujours empilé 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 frère du rectangle bleu. La valeur z du rectangle vert étant inférieure à celle du rectangle bleu, le rectangle vert et tous ses enfants seront empilés sous le rectangle bleu.

Propriété du canevas

La définition de ce qui est rendu dans une scène Qt Quick est l'arbre des éléments visuels dont la racine se trouve à QQuickWindow::contentItem. Par conséquent, pour ajouter un élément à une scène Qt Quick spécifique en vue d'un rendu, il doit devenir un enfant de la hiérarchie visuelle d'un élément déjà présent dans la hiérarchie des éléments visuels, comme QQuickWindow::contentItem.