Konzepte – Visuelles übergeordnetes Element in Qt Quick

„Visual Parent“

Beim Erstellen visueller Szenen mit „ Qt Quick “ ist es wichtig, das Konzept des visuellen übergeordneten Elements zu verstehen.

Das Konzept des visuellen übergeordneten Elements in „ Qt Quick “ unterscheidet sich vom Konzept des objektbezogenen übergeordneten Elements innerhalb der „ QObject “-Hierarchie, steht jedoch damit in Zusammenhang. Alle QML-Objekte haben ein objektbezogenes übergeordnetes Element, das durch die Objekthierarchie bestimmt wird, in der das Objekt deklariert ist. Bei der Arbeit mit dem Modul „ QtQuick “ ist der Typ „ Item “ der Basistyp für alle von diesem Modul bereitgestellten visuellen Elemente und bietet das Konzept eines zusätzlichen visuellen Elternelements, das durch die Eigenschaft „ parent “ eines Elements definiert wird. Jedes Element hat ein visuelles Elternelement; wenn der Wert der Eigenschaft „ parent “ eines Elements „ null “ lautet, wird das Element in der Szene nicht gerendert.

Jedes Objekt, das der Eigenschaft „ data “ eines Elements zugewiesen wird, wird aus Gründen der Speicherverwaltung zu einem untergeordneten Element des Elements innerhalb seiner „ QObject “-Hierarchie. Wenn ein der Eigenschaft „data“ hinzugefügtes Objekt vom Typ „ Item “ ist, wird es zudem der Eigenschaft „ Item::children “ zugewiesen und wird zu einem untergeordneten Element des Objekts innerhalb der visuellen Szenenhierarchie. (Die meisten Algorithmen zum Durchsuchen der „ Qt Quick “-Hierarchie, insbesondere die Rendering-Algorithmen, berücksichtigen nur die visuelle übergeordnete Hierarchie.)

Der Einfachheit halber ist die Eigenschaft „Item data “ die Standardeigenschaft. Das bedeutet, dass jedes untergeordnete Element, das innerhalb eines „ Item “-Objekts deklariert wird, ohne einer bestimmten Eigenschaft zugewiesen zu sein, automatisch der Eigenschaft „ data “ zugewiesen wird und wie oben beschrieben zu einem untergeordneten Element des Elements wird. Die beiden folgenden Codeblöcke liefern also das gleiche Ergebnis, und Sie werden fast immer die unten links gezeigte Darstellung sehen, anstatt der expliziten Zuweisung „ data “, die unten rechts gezeigt wird:

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

Das visuelle übergeordnete Element eines Elements kann jederzeit durch Setzen seiner Eigenschaft „ parent “ geändert werden. Daher muss das visuelle übergeordnete Element eines Elements nicht unbedingt mit seinem objektbezogenen übergeordneten Element übereinstimmen.

Wenn ein Element zum untergeordneten Element eines anderen Elements wird:

• bezieht sich die Eigenschaft „ parent “ des untergeordneten Elements auf sein übergeordnetes Element
• Die Eigenschaften „ children “ und „ childrenRect “ des übergeordneten Elements berücksichtigen dieses untergeordnete Element

Die Deklaration eines Elements als Kind eines anderen bedeutet nicht automatisch, dass das untergeordnete Element so positioniert oder in seiner Größe angepasst wird, dass es in das übergeordnete Element passt. Einige QML-Typen verfügen möglicherweise über integrierte Verhaltensweisen, die die Positionierung von untergeordneten Elementen beeinflussen – beispielsweise positioniert ein „ Row “-Objekt seine untergeordneten Elemente automatisch in einer horizontalen Anordnung –, doch handelt es sich hierbei um Verhaltensweisen, die durch die spezifischen Implementierungen der jeweiligen Typen erzwungen werden. Zudem schneidet ein übergeordnetes Element seine untergeordneten Elemente nicht automatisch so zu, dass sie visuell innerhalb der visuellen Grenzen des übergeordneten Elements liegen, es sei denn, seine Eigenschaft „ clip “ ist auf „true“ gesetzt.

Das visuelle übergeordnete Element eines Elements kann unter bestimmten Umständen eine Rolle spielen, wie in den folgenden Abschnitten beschrieben.

Elementkoordinaten

Da Elementkoordinaten relativ zum visuellen übergeordneten Element sind, können sie durch Änderungen an der visuellen Hierarchie beeinflusst werden. Weitere Details finden Sie auf der Konzeptseite „Visuelle Koordinaten “.

Stapelreihenfolge

Qt Quick Elemente verwenden einen rekursiven Zeichenalgorithmus, um im Falle von Kollisionen zu bestimmen, welche Elemente oberste Priorität beim Zeichnen haben. Im Allgemeinen werden Elemente über ihren übergeordneten Elementen in der Reihenfolge gezeichnet, in der sie erstellt (oder in der QML-Datei angegeben) wurden. Im folgenden Beispiel wird das blaue Rechteck also über dem grünen Rechteck gezeichnet:

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

Da der Algorithmus die visuelle Elementhierarchie rekursiv durchläuft, werden alle untergeordneten Elemente des grünen Rechtecks ebenfalls unterhalb des blauen Rechtecks und unterhalb aller untergeordneten Elemente des blauen Rechtecks gezeichnet.

Die Stapelreihenfolge lässt sich mit der Eigenschaft „ Item::z “ beeinflussen. Z-Werte unter 0 werden unterhalb des übergeordneten Elements gestapelt, und wenn Z-Werte zugewiesen sind, werden gleichrangige Elemente in Z-Reihenfolge gestapelt (wobei bei Gleichstand die Erstellungsreihenfolge entscheidet). Z-Werte beeinflussen die Stapelreihenfolge nur im Vergleich zu gleichrangigen Elementen und dem übergeordneten Element. Wenn Sie ein Element haben, das von einem Teilbaum verdeckt wird, dessen Wurzel über dem übergeordneten Element liegt, kann kein Z-Wert dieses Elements seine Stapelreihenfolge so erhöhen, dass es über diesem Teilbaum liegt. Um dieses Element über dem anderen Teilbaum anzuordnen, müssen Sie die Z-Werte weiter oben in der Hierarchie ändern oder die visuelle Elementhierarchie neu anordnen.

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

Im obigen Beispiel hat das rote Rechteck einen hohen Z-Wert, wird aber dennoch unterhalb des blauen Rechtecks angeordnet. Das liegt daran, dass es ein Kind des grünen Rechtecks ist und das grüne Rechteck ein Geschwisterelement des blauen Rechtecks ist. Der z-Wert des grünen Rechtecks ist niedriger als der des blauen Rechtecks, daher werden das grüne Rechteck und alle seine Kinder unterhalb des blauen Rechtecks angeordnet.

Canvas-Zugehörigkeit

Was in einer „ Qt Quick “-Szene gerendert wird, wird durch den visuellen Elementbaum definiert, dessen Wurzel bei „ QQuickWindow::contentItem “ liegt. Um ein Element zur Darstellung in eine bestimmte „ Qt Quick “-Szene einzufügen, muss es daher ein untergeordnetes Element eines bereits in der visuellen Elementhierarchie vorhandenen Elements werden, wie beispielsweise „ QQuickWindow::contentItem “.