Element-Positionierer

Positionierer-Elemente sind Container-Elemente, die die Positionen von Elementen in einer deklarativen Benutzeroberfläche verwalten. Positionierer verhalten sich ähnlich wie die Layout-Manager, die bei Standard-Qt-Widgets verwendet werden, mit dem Unterschied, dass sie gleichzeitig selbst Container sind.

Positionierer erleichtern die Arbeit mit vielen Elementen, wenn diese in einem regelmäßigen Layout angeordnet werden müssen.

Qt Quick Layouts können auch verwendet werden, um „ Qt Quick “-Elemente in einer Benutzeroberfläche anzuordnen. Sie verwalten sowohl die Positionen als auch die Größen von Elementen in einer deklarativen Benutzeroberfläche und eignen sich besonders gut für anpassbare Benutzeroberflächen.

Positionierer

Im Grundumfang der grafischen Typen von „ Qt Quick “ ist eine Reihe von Standard-Positionierern enthalten:

Spaltenelemente

Column Elemente werden verwendet, um Elemente vertikal anzuordnen. Das folgende Beispiel verwendet ein „Column“-Element, um drei „ Rectangle “-Elemente in einem Bereich anzuordnen, der durch ein äußeres „ Item “ definiert ist. Die Eigenschaft „ spacing “ ist so eingestellt, dass zwischen den Rechtecken ein kleiner Abstand besteht.

import QtQuick

Item {
    width: 310; height: 170

    Column {
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter

        spacing: 5

        Rectangle { color: "lightblue"; radius: 10.0
                    width: 300; height: 50
                    Text { anchors.centerIn: parent
                           font.pointSize: 24; text: "Books" } }
        Rectangle { color: "gold"; radius: 10.0
                    width: 300; height: 50
                    Text { anchors.centerIn: parent
                           font.pointSize: 24; text: "Music" } }
        Rectangle { color: "lightgreen"; radius: 10.0
                    width: 300; height: 50
                    Text { anchors.centerIn: parent
                           font.pointSize: 24; text: "Movies" } }
    }
}

Beachten Sie, dass „Column“ direkt von „Item“ erbt; daher muss eine eventuelle Hintergrundfarbe, falls gewünscht, dem übergeordneten „Rectangle“ zugewiesen werden.

„Row“-Elemente

Row Elemente dienen zur horizontalen Anordnung von Elementen. Im folgenden Beispiel wird ein „Row“-Element verwendet, um drei abgerundete „ Rectangle “-Elemente in einem Bereich anzuordnen, der durch ein äußeres, farbiges „Rectangle“ definiert ist. Die Eigenschaft „ spacing “ ist so eingestellt, dass zwischen den Rechtecken ein kleiner Abstand besteht.

Wir stellen sicher, dass das übergeordnete Rechteck groß genug ist, damit an den Rändern des horizontal zentrierten Zeilenelements etwas Platz verbleibt.

import QtQuick

Rectangle {
    width: 320; height: 110
    color: "#c0c0c0"

    Row {
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter

        spacing: 5

        Rectangle { width: 100; height: 100; radius: 20.0
                    color: "#024c1c" }
        Rectangle { width: 100; height: 100; radius: 20.0
                    color: "#42a51c" }
        Rectangle { width: 100; height: 100; radius: 20.0
                    color: "white" }
    }
}

„Grid“-Elemente

Grid Elemente werden verwendet, um Elemente in einer Raster- oder Tabellenanordnung zu platzieren. Im folgenden Beispiel wird ein „Grid“-Element verwendet, um vier „ Rectangle “-Elemente in einem 2×2-Raster anzuordnen. Wie bei den anderen Positionierelementen kann der Abstand zwischen den Elementen mithilfe der Eigenschaft „ spacing “ festgelegt werden.

import QtQuick

Rectangle {
    width: 112; height: 112
    color: "#303030"

    Grid {
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
        columns: 2
        spacing: 6

        Rectangle { color: "#aa6666"; width: 50; height: 50 }
        Rectangle { color: "#aaaa66"; width: 50; height: 50 }
        Rectangle { color: "#9999aa"; width: 50; height: 50 }
        Rectangle { color: "#6666aa"; width: 50; height: 50 }
    }
}

Es gibt keinen Unterschied zwischen dem horizontalen und dem vertikalen Abstand zwischen den Elementen, daher muss zusätzlicher Abstand innerhalb der Elemente selbst hinzugefügt werden.

Leere Zellen im Raster müssen durch die Definition von Platzhalterelementen an den entsprechenden Stellen in der Rasterdefinition erstellt werden.

Flusselemente

Flow Flow-Elemente werden verwendet, um Elemente wie Wörter auf einer Seite anzuordnen, wobei Zeilen oder Spalten aus nicht überlappenden Elementen gebildet werden.

Flusselemente ordnen Elemente ähnlich wie „ Grid “-Elemente an, wobei die Elemente in Zeilen entlang einer Achse (der Nebenachse) angeordnet sind und die Zeilen mit Elementen nebeneinander entlang einer anderen Achse (der Hauptachse) platziert werden. Die Flussrichtung sowie der Abstand zwischen den Elementen werden durch die Eigenschaften „ flow “ und „ spacing “ gesteuert.

Das folgende Beispiel zeigt ein „Flow“-Element, das eine Reihe von „ Text “-Unterelementen enthält. Diese sind ähnlich wie in den Screenshots dargestellt angeordnet.

import QtQuick

Rectangle {
    color: "lightblue"
    width: 300; height: 200

    Flow {
        anchors.fill: parent
        anchors.margins: 4
        spacing: 10

        Text { text: "Text"; font.pixelSize: 40 }
        Text { text: "items"; font.pixelSize: 40 }
        Text { text: "flowing"; font.pixelSize: 40 }
        Text { text: "inside"; font.pixelSize: 40 }
        Text { text: "a"; font.pixelSize: 40 }
        Text { text: "Flow"; font.pixelSize: 40 }
        Text { text: "item"; font.pixelSize: 40 }
    }
}

Die Hauptunterschiede zwischen den Positionierern „Grid“ und „Flow“ bestehen darin, dass Elemente innerhalb eines „Flow“-Elements umbrechen, wenn ihnen auf der Nebenachse der Platz ausgeht, und dass Elemente in einer Zeile möglicherweise nicht mit Elementen in einer anderen Zeile ausgerichtet sind, wenn die Elemente keine einheitlichen Größen haben. Wie bei „Grid“-Elementen gibt es keine unabhängige Steuerung des Abstands zwischen Elementen und zwischen Elementzeilen.

Andere Möglichkeiten zur Positionierung von Elementen

Es gibt mehrere andere Möglichkeiten, Elemente in einer Benutzeroberfläche zu positionieren. Zusätzlich zur grundlegenden Technik, ihre Koordinaten direkt anzugeben, können sie relativ zu anderen Elementen mithilfe von Ankern positioniert oder mit QML-Datenmodellen wie dem Objektmodell verwendet werden.