Positionierer und Layouts

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

Nachfolgend finden Sie einen kurzen Überblick. Weitere Informationen 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- und y-Eigenschaften festgelegt werden. Dadurch wird ihre Position relativ zur oberen linken Ecke ihres übergeordneten Elements gemäß den Regeln des visuellen Koordinatensystems festgelegt.

In Kombination mit der Verwendung von Bindungen anstelle von konstanten Werten für diese Eigenschaften lässt sich die relative Positionierung ebenfalls einfach erreichen, 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"
    }
}

Anker

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 einer 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 Ankerpunkten “ und in der Dokumentation zu „ 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 Elementen in einem regelmäßigen Muster positioniert werden soll, bietet „ Qt Quick “ einige Positionierungstypen an. Elemente, die in einen Positionierer platziert werden, werden automatisch auf bestimmte Weise positioniert; beispielsweise positioniert ein „ Row “ Elemente so, dass sie horizontal nebeneinander liegen (und eine Zeile bilden).

Ausführliche Informationen 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 jedoch eine weitere Verfeinerung oder Einschränkung des Layouts. Konkret ermöglichen Ihnen die Layouttypen Folgendes:

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

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

Der obige Codeausschnitt stammt aus dem Beispiel „Basic Layouts “. Der Ausschnitt veranschaulicht, wie einfach es ist, verschiedene Felder und Elemente in ein Layout einzufügen. Die Größe des „ GridLayout “ lässt sich anpassen, und sein Format kann über verschiedene Eigenschaften individuell gestaltet werden.

Weitere Informationen zu den Layouttypen finden Sie unter:

• Qt Quick Layouts Übersicht
• Beispiel„Basic Layouts“