Anwendungsfall - Positionierer und Layouts in QML

Es gibt mehrere Möglichkeiten, Elemente in QML zu positionieren.

Im Folgenden finden Sie einen kurzen Überblick. Weitere Details finden Sie unter Wichtige Konzepte in Qt Quick - Positionierung.

Manuelle Positionierung

Elemente können an bestimmten x,y-Koordinaten auf dem Bildschirm platziert werden, indem ihre x,y-Eigenschaften festgelegt werden. Dadurch wird ihre Position relativ zur linken oberen Ecke des übergeordneten Elements gemäß den Regeln des visuellen Koordinatensystems festgelegt.

In Verbindung mit der Verwendung von Bindungen anstelle von konstanten Werten für diese Eigenschaften ist eine relative Positionierung auch leicht möglich, indem die x- und y-Koordinaten auf die entsprechenden Bindungen gesetzt werden.

import QtQuick

Item {
    width: 100; height: 100

    Rectangle {
        // Manually positioned at 20,20
        x: 20
        y: 20
        width: 80
        height: 80
        color: "red"
    }
}

Verankerungen

Der Typ Item bietet die Möglichkeit, an anderen Item Typen zu verankern. Für jedes Element gibt es sieben Ankerlinien: links, rechts, vertikale Mitte, oben, unten, Grundlinie und horizontale Mitte. Die drei vertikalen Ankerlinien können an jeder der drei vertikalen Ankerlinien eines anderen Elements verankert werden, und die vier horizontalen Ankerlinien können an den horizontalen Ankerlinien eines anderen Elements verankert werden.

Ausführliche Informationen finden Sie unter Positionierung mit Verankerungen und in der Dokumentation von anchors property.

import QtQuick

Item {
    width: 200; height: 200

    Rectangle {
        // Anchored to 20px off the top right corner of the parent
        anchors.right: parent.right
        anchors.top: parent.top
        anchors.margins: 20 // Sets all margins at once

        width: 80
        height: 80
        color: "orange"
    }

    Rectangle {
        // Anchored to 20px off the top center corner of the parent.
        // Notice the different group property syntax for 'anchors' compared to
        // the previous Rectangle. Both are valid.
        anchors { horizontalCenter: parent.horizontalCenter; top: parent.top; topMargin: 20 }

        width: 80
        height: 80
        color: "green"
    }
}

Positionierer

Für den häufigen Fall, dass eine Reihe von Typen in einem regelmäßigen Muster positioniert werden soll, bietet Qt Quick einige Positionierer-Typen. Elemente, die in einem Positionierer platziert werden, werden automatisch auf eine bestimmte Art und Weise positioniert; zum Beispiel positioniert ein Row Elemente so, dass sie horizontal nebeneinander liegen (und eine Reihe bilden).

Weitere Einzelheiten finden Sie unter Element-Positionierer.

import QtQuick

Item {
    width: 300; height: 100

    Row { // The "Row" type lays out its child items in a horizontal line
        spacing: 20 // Places 20px of space between items

        Rectangle { width: 80; height: 80; color: "red" }
        Rectangle { width: 80; height: 80; color: "green" }
        Rectangle { width: 80; height: 80; color: "blue" }
    }
}

Layout-Typen

Layouttypen funktionieren ähnlich wie Positionierer, ermöglichen aber weitere Verfeinerungen oder Einschränkungen des Layouts. Mit den Layout-Typen können Sie insbesondere:

• die Ausrichtung von Text und anderen Elementen festlegen
• die Größe zu ändern und die zugewiesenen Anwendungsbereiche automatisch zu füllen
• Größenbeschränkungen wie Mindest- oder Höchstmaße festzulegen
• den Abstand zwischen den Elementen innerhalb des Layouts festzulegen

GroupBox {
    id: gridBox
    title: "Grid layout"
    Layout.fillWidth: true

    GridLayout {
        id: gridLayout
        rows: 3
        flow: GridLayout.TopToBottom
        anchors.fill: parent
        Label { text: "Line 1" }
        Label { text: "Line 2" }
        Label { text: "Line 3" }

        TextField { }
        TextField { }
        TextField { }

        TextArea {
            text: "This widget spans over three rows in the GridLayout.\n"
                  + "All items in the GridLayout are implicitly positioned from top to bottom."
            Layout.rowSpan: 3
            Layout.fillHeight: true
            Layout.fillWidth: true
        }
    }
}

Das obige Snippet stammt aus dem Beispiel für Basislayouts. Das Snippet zeigt, wie einfach es ist, verschiedene Felder und Elemente in ein Layout einzufügen. Die Größe von GridLayout kann geändert werden, und das Format ist über verschiedene Eigenschaften anpassbar.

Weitere Informationen zu den Layouttypen finden Sie unter:

• Qt Quick Übersicht Layouts
• Beispiel fürgrundlegende Layouts