Conceptos - Visual Parent en Qt Quick

Padre visual

Al crear escenas visuales con Qt Quick, es importante entender el concepto de padre visual.

El concepto de padre visual en Qt Quick es distinto, pero está relacionado, con el concepto de padre objeto dentro de la jerarquía de padres de QObject. Todos los objetos QML tienen un objeto padre, que viene determinado por la jerarquía de objetos en la que se declara el objeto. Cuando se trabaja con el módulo QtQuick, el tipo Item es el tipo base para todos los elementos visuales proporcionados por este módulo, y proporciona el concepto de un padre visual adicional, definido por la propiedad parent de un elemento. Cada ítem tiene un padre visual; si el valor de la propiedad parent de un ítem es null, el ítem no será renderizado en la escena.

Cualquier objeto asignado a la propiedad data de un ítem se convierte en hijo del ítem dentro de su jerarquía QObject, a efectos de gestión de memoria. Además, si un objeto añadido a la propiedad de datos es del tipo Item, también se asigna a la propiedad Item::children y se convierte en hijo del elemento dentro de la jerarquía de la escena visual. (La mayoría de los algoritmos de rastreo de jerarquías de Qt Quick, especialmente los algoritmos de renderizado, sólo tienen en cuenta la jerarquía visual padre).

Por conveniencia, la propiedad Item data es su propiedad por defecto. Esto significa que cualquier elemento hijo declarado dentro de un objeto Item sin ser asignado a una propiedad específica se asigna automáticamente a la propiedad data y se convierte en hijo del elemento como se ha descrito anteriormente. Por lo tanto, los dos bloques de código siguientes producen el mismo resultado, y casi siempre verá la forma mostrada abajo a la izquierda, en lugar de la asignación explícita data mostrada abajo a la derecha:

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" }
    ]
}

El padre visual de un elemento puede cambiarse en cualquier momento estableciendo su propiedad parent. Por lo tanto, el padre visual de un elemento puede no ser necesariamente el mismo que su objeto padre.

Cuando un elemento se convierte en hijo de otro:

• El parent del elemento hijo se refiere a su elemento padre.
• Las propiedades children y childrenRect del padre tienen en cuenta al hijo.

Declarar un elemento como hijo de otro no significa automáticamente que el elemento hijo vaya a tener la posición o el tamaño adecuados para encajar dentro de su padre. Algunos tipos QML pueden tener comportamientos incorporados que afectan a la posición de los elementos hijos (por ejemplo, un objeto Row recoloca automáticamente a sus hijos en una formación horizontal), pero se trata de comportamientos aplicados por las propias implementaciones específicas de los tipos. Además, un elemento padre no recortará automáticamente a sus hijos para contenerlos visualmente dentro de los límites visuales del padre, a menos que su propiedad clip esté establecida a true.

El padre visual de un elemento puede ser considerado en circunstancias particulares, como se describe en las secciones siguientes.

Coordenadas del elemento

Como las coordenadas de un elemento son relativas a su padre visual, pueden verse afectadas por cambios en la jerarquía visual. Consulte la página del concepto Coordenadas visuales para obtener más información.

Orden de apilamiento

Qt Quick Los elementos utilizan un algoritmo de dibujo recursivo para determinar qué elementos se dibujan encima en caso de colisión. En general, los elementos se dibujan encima de sus elementos padre, en el orden en que fueron creados (o especificado en el archivo QML). Así, en el siguiente ejemplo, el rectángulo azul se dibujará encima del rectángulo verde:

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"
    }
}

Como el algoritmo recorre la jerarquía de elementos visuales, cualquier hijo del rectángulo verde se dibujará también debajo del rectángulo azul y debajo de cualquiera de los hijos del rectángulo azul.

Se puede influir en el orden de apilamiento con la propiedad Item::z. Los valores Z por debajo de 0 se apilarán por debajo del padre, y si se asignan valores z entonces los hermanos se apilarán en orden z (con el orden de creación utilizado para romper los empates). Los valores Z sólo afectan al apilamiento en comparación con los hermanos y el elemento padre. Si tienes un elemento que está oculto por un subárbol enraizado por encima de su elemento padre, ningún valor z en ese elemento aumentará su orden de apilamiento para apilarse por encima de ese subárbol. Para apilar ese elemento por encima del otro subárbol tendrás que alterar los valores z más arriba en la jerarquía, o reordenar la jerarquía visual de elementos.

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"
    }
}

En el ejemplo anterior, el rectángulo rojo tiene un valor z alto, pero sigue apilado debajo del rectángulo azul. Esto se debe a que es hijo del rectángulo verde, y el rectángulo verde es hermano del rectángulo azul. El valor z del rectángulo verde es menor que el del rectángulo azul, por lo que el rectángulo verde y todos sus hijos se apilarán debajo del rectángulo azul.

Propiedad del lienzo

La definición de lo que se renderiza en una escena Qt Quick es el árbol visual de ítems enraizado en QQuickWindow::contentItem. Por lo tanto, para añadir un elemento a una escena específica de Qt Quick para su renderización, debe convertirse en un elemento visual hijo de un elemento que ya se encuentre en la jerarquía de elementos visuales, como QQuickWindow::contentItem.