Wichtige Konzepte in Qt Quick - Positionierung

Visuelle Elemente in QML können auf verschiedene Weise positioniert werden. Das wichtigste Konzept im Zusammenhang mit der Positionierung ist das der Verankerung, eine Form der relativen Positionierung, bei der Elemente an bestimmten Grenzen miteinander verankert (oder verbunden) werden können. Weitere Positionierungskonzepte sind die absolute Positionierung, die Positionierung mit Koordinatenbindungen, Positionierer und Layouts.

Manuelle Positionierung

Elemente können manuell positioniert werden. Wenn die Benutzerschnittstelle statisch sein soll, ist die manuelle Positionierung die effizienteste Form der Positionierung.

In jeder Benutzeroberfläche befinden sich die visuellen Typen zu jedem Zeitpunkt an einer bestimmten Position in den Bildschirmkoordinaten. Während fließend animierte und dynamische Benutzeroberflächen ein Schwerpunkt von Qt Quick sind, sind statisch positionierte Benutzeroberflächen immer noch eine praktikable Option. Wenn sich die Position dieser Typen nicht ändert, kann es außerdem oft performanter sein, die Position manuell festzulegen, als die in den folgenden Abschnitten dokumentierten dynamischen Positionierungsmethoden zu verwenden.

In Qt Quick wird jedes visuelle Objekt innerhalb des Koordinatensystems positioniert, das vom Qt Quick visual canvas bereitgestellt wird. Wie in diesem Dokument beschrieben, sind die x- und y-Koordinaten eines visuellen Objekts relativ zu denen seines visuellen Elternteils, wobei die obere linke Ecke die Koordinate (0, 0) hat.

Im folgenden Beispiel werden also zwei manuell positionierte Rechtecke angezeigt:

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

Positionierung mit Bindungen

Elemente können auch positioniert werden, indem Bindungsausdrücke den Eigenschaften zugewiesen werden, die mit ihrer Position im visuellen Canvas verbunden sind. Diese Art der Positionierung ist die dynamischste, allerdings sind mit der Positionierung von Elementen auf diese Weise gewisse Leistungskosten verbunden.

Die Position und die Abmessungen eines visuellen Objekts können auch durch Eigenschaftsbindungen festgelegt werden. Dies hat den Vorteil, dass die Werte automatisch aktualisiert werden, wenn sich die Abhängigkeiten der Bindungen ändern. So kann beispielsweise die Breite eines Rechtecks von der Breite des Rechtecks neben ihm abhängen.

Bindungen bieten zwar eine sehr flexible und intuitive Möglichkeit, dynamische Layouts zu erstellen, doch ist zu beachten, dass sie mit gewissen Leistungseinbußen verbunden sind, und wenn möglich sollten reine Anker-Layouts bevorzugt werden.

Verankerungen

Anker ermöglichen es, ein Element entweder neben oder innerhalb eines anderen zu platzieren, indem ein oder mehrere Ankerpunkte (Begrenzungen) des Elements mit einem Ankerpunkt des anderen verbunden werden. Diese Verankerungen bleiben auch dann erhalten, wenn sich die Abmessungen oder die Position eines der Elemente ändert, was hochdynamische Benutzerschnittstellen ermöglicht.

Ein visuelles Objekt kann man sich als ein Objekt mit verschiedenen Ankerpunkten (oder besser gesagt Ankerlinien) vorstellen. Andere Objekte können an diesen Punkten verankert werden, was bedeutet, dass bei einer Änderung eines Objekts die anderen Objekte, die an ihm verankert sind, sich automatisch anpassen, um die Verankerung aufrechtzuerhalten.

Qt Quick bietet Anker als Top-Level-Konzept. Ausführliche Informationen zu diesem Thema finden Sie in der Dokumentation zur Positionierung mit Ankern.

Es ist wichtig zu beachten, dass auf Ankern basierende Layouts im Allgemeinen weitaus leistungsfähiger sind als auf Bindungen basierende Layouts, sofern sie makellos sind. Ein "unverfälschtes" Anker-Layout ist eines, das nur Anker (mit Objektverschachtelung) zur Bestimmung der Positionierung verwendet, während ein "verunreinigtes" Anker-Layout eines ist, das sowohl Verankerungen als auch Bindungen (entweder auf positionsbezogene [x,y]-Eigenschaften oder auf dimensionsbezogene [width,height]-Eigenschaften) zur Bestimmung der Position verwendet.

Positionierer

Qt Quick bietet auch einige eingebaute Positionierungselemente. Für viele Anwendungsfälle ist der beste Positionierer ein einfaches Raster, eine Zeile oder Spalte, und Qt Quick bietet Elemente, die Kinder in diesen Formationen auf die effizienteste Weise positionieren. Weitere Informationen über die Verwendung von vordefinierten Positionierern finden Sie in der Dokumentation zu den Positionierertypen.

Layouts

Ab Qt 5.1 kann das Modul Qt Quick Layouts auch verwendet werden, um Qt Quick Elemente in einer Benutzeroberfläche anzuordnen. Im Gegensatz zu Positionierern verwalten die Typen in Qt Quick Layouts sowohl die Positionen als auch die Größen von Elementen in einer deklarativen Oberfläche. Sie sind gut geeignet für größenveränderbare Benutzeroberflächen.

Rechts-nach-links-Unterstützung

Die Direktionalität der geschriebenen Form einer Sprache hat oft einen großen Einfluss darauf, wie die visuellen Typen einer Benutzeroberfläche positioniert werden sollten. Qt Quick unterstützt die Rechts-nach-Links-Positionierung von Typen durch die vordefinierten Layouts sowie die Rechts-nach-Links-Textlayouts.

Ausführliche Informationen zu diesem Thema finden Sie in der Dokumentation zur Rechts-nach-links-Unterstützung in Qt Quick.