Qt Quick Layouts Übersicht

Verwenden Sie „ Qt Quick Layouts “, um Elemente in einer Benutzeroberfläche anzuordnen. „ Qt Quick Layouts “ passen die Größe ihrer Elemente an, wodurch sie sich gut für anpassbare Benutzeroberflächen eignen.

Wichtigste Funktionen

Zu den wichtigsten Funktionen von „ Qt Quick Layouts “ gehören:

• Align Elemente mit der Eigenschaft „ Layout.alignment “.
• Legen Sie „ resizable items “ mit den Eigenschaften „ Layout.fillWidth “ und „ Layout.fillHeight “ fest.
• Legen Sie Größenbeschränkungen mit den Eigenschaften „ Layout.minimumWidth “, „ Layout.preferredWidth “ und „ Layout.maximumWidth “ fest – „Width“ kann durch „Height“ ersetzt werden, um ähnliche Beschränkungen für die Höhe festzulegen.
• Sie können „ spacing “ mit „ spacing “, „ rowSpacing “ oder „ columnSpacing “ festlegen.
• Mit „ stretch factors “ werden Elemente sowohl horizontal als auch vertikal gestreckt.

Darüber hinaus bietet „ GridLayout “ folgende Funktionen:

• Grid coordinates, gesteuert durch die Eigenschaften „ Layout.row “ und „ Layout.column “.
• Automatic grid coordinates in Verbindung mit den Eigenschaften „ flow “, „ rows “ und „ columns “ verwendet.
• Spans über Zeilen oder Spalten hinweg, die Sie mit den Eigenschaften ` Layout.rowSpan ` und ` Layout.columnSpan ` festlegen können.

Erste Schritte

Um mit der Verwendung von „ Qt Quick Layouts “ zu beginnen, importieren Sie die QML-Typen mit der folgenden Importanweisung in Ihre „ .qml “-Datei:

import QtQuick.Layouts

Der nächste Schritt besteht darin, ein einfaches Layout zu erstellen. Sie können sich auch das Beispiel „Qt Quick Layouts – Basic Example“ ansehen.

Ein einfaches Layout

Der Zweck eines Layouts besteht darin, seine untergeordneten Elemente neu anzuordnen, sobald sich die Größe des Layouts ändert. Das bedeutet, dass die Anwendung sicherstellen muss, dass die Größe des Layouts angepasst wird. Im folgenden Codeausschnitt wird dies durch die Verwendung von ` anchors.fill: parent` im `RowLayout` gewährleistet. Sie können dies jedoch auch auf andere Weise erreichen, beispielsweise durch die Festlegung der Eigenschaften ` width ` und ` height `. Im selben Codeausschnitt hat das orangefarbene Rechteck eine feste Größe von 100 × 150 Pixel, während sich das pflaumenfarbene Rechteck so weit ausdehnt, dass es den gesamten ihm zugewiesenen Platz einnimmt.

Window {
    RowLayout {
        anchors.fill: parent
        spacing: 6
        Rectangle {
            color: 'azure'
            Layout.preferredWidth: 100
            Layout.preferredHeight: 150
        }
        Rectangle {
            color: "plum"
            Layout.fillWidth: true
            Layout.fillHeight: true
        }
    }
}

Layouts sind für die Geometrie ihrer untergeordneten Elemente verantwortlich. Dazu gehören Eigenschaften wie „ width “, „ height “, „ x “, „ y “, „ anchors “ usw.

Abstand

Wie im vorherigen Codeausschnitt zu sehen ist, ist der Abstand für das `RowLayout` auf 6 festgelegt. Dadurch wird sichergestellt, dass alle Elemente im Layout einen Abstand von 6 Pixeln zueinander haben:

spacing: 6

Wenn Sie keinen Abstand angeben, verwendet das Layout standardmäßig einen Wert von 5 Pixeln. Der Abstand sowie die „implicitWidth“ aller untergeordneten Elemente tragen zur „implicitWidth“ des Layouts bei. Dies sollten Sie unbedingt beachten, wenn Sie sich auf das Standardverhalten verlassen, da es sich auf Ihr Layoutdesign auswirken kann. Beispielsweise haben die beiden ColumnLayouts setzen im folgenden Codeausschnitt beide `Layout.fillWidth: true `. Man könnte vermuten, dass sie beide die gleiche Breite erhalten. Aufgrund des standardmäßigen Abstands von 5 Pixeln zwischen den Elementen im inneren `RowLayout` wird die `implicitWidth` des ersten `ColumnLayout` jedoch größer, wodurch weniger Platz für das zweite bleibt. Beispiel:

ApplicationWindow {
    id: root
    width: 300
    height: 300
    visible: true

    RowLayout {
        anchors.fill: parent
        ColumnLayout {
            Rectangle {
                color: "tomato";
                Layout.fillWidth: true
                Layout.fillHeight: true
            }
            RowLayout {
                Rectangle {
                    color: "navajowhite"
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                }
                Rectangle {
                    color: "darkseagreen"
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                }
            }
        }
        ColumnLayout {
            Rectangle {
                color: "lightpink"
                Layout.fillWidth: true
                Layout.fillHeight: true
            }
            Rectangle {
                color: "slategray"
                Layout.fillWidth: true
                Layout.fillHeight: true
            }
            Rectangle {
                color: "lightskyblue"
                Layout.fillWidth: true
                Layout.fillHeight: true
            }
        }
    }
}

Dieser Codeausschnitt erzeugt ein Layout, das wie folgt aussieht:

Um sicherzustellen, dass diese beiden Spalten gleich groß sind, können Sie entweder

1. den Abstand des RowLayout auf „ 0 “ festlegen oder
2. „preferredWidth “ für beide ColumnLayout.

Festlegen der bevorzugten Größe

Für jedes Element kann die effektive bevorzugte Größe aus einer von mehreren in Frage kommenden Eigenschaften stammen. Zur Ermittlung der effektiven bevorzugten Größe fragt ein Element diese in Frage kommenden Eigenschaften in der folgenden Reihenfolge ab und verwendet die erste Eigenschaft mit einer gültigen Breite oder Höhe.

Ein Element kann „ Layout.preferredWidth “ angeben, ohne „ Layout.preferredHeight “ angeben zu müssen. In solchen Fällen wird die effektive bevorzugte Höhe anhand von „ implicitHeight “ bestimmt.

Größenbeschränkungen

Da die Größe eines Elements durch sein Layout angepasst werden kann, muss das Layout die Größen „ minimum “, „ preferred “ und „ maximum “ aller Elemente kennen, bei denen „ Layout.fillWidth “ oder „ Layout.fillHeight “ auf „true“ gesetzt ist.

Die Breite und Höhe von „ preferred “ entsprechen der tatsächlichen Breite und Höhe eines Elements, sofern das Layout selbst nicht an eine bestimmte Größe gebunden ist. Ist das Layout auf eine bestimmte Größe festgelegt, verteilt es den zusätzlichen Platz auf der Grundlage des Verhältnisses der bevorzugten Größen seiner Elemente unter Berücksichtigung der Mindest- und Höchstgrößen. Die bevorzugten und impliziten Größen dienen als Verhältnisse und Gewichte, wenn für alle Elemente „fillWidth“ und „fillHeight“ festgelegt sind.

Beispielsweise erzeugt der folgende Code ein Layout mit zwei nebeneinander liegenden Rechtecken, das sich horizontal erstreckt. Das orangefarbene Rechteck kann von 50 × 150 auf 300 × 150 vergrößert werden, und das pflaumenfarbene Rechteck kann von 100 × 100 auf ∞ × 100 vergrößert werden. Solange die minimale und maximale Breite der einzelnen Elemente nicht überschritten wird, ist das pflaumenfarbene Rechteck doppelt so breit wie das orangefarbene.

RowLayout {
    id: layout
    anchors.fill: parent
    spacing: 6
    Rectangle {
        color: 'orange'
        Layout.fillWidth: true
        Layout.minimumWidth: 50
        Layout.preferredWidth: 100
        Layout.maximumWidth: 300
        Layout.minimumHeight: 150
        Text {
            anchors.centerIn: parent
            text: parent.width + 'x' + parent.height
        }
    }
    Rectangle {
        color: 'plum'
        Layout.fillWidth: true
        Layout.minimumWidth: 100
        Layout.preferredWidth: 200
        Layout.preferredHeight: 100
        Text {
            anchors.centerIn: parent
            text: parent.width + 'x' + parent.height
        }
    }
}

Die Kombination der Einschränkungen der einzelnen Elemente ergibt folgende implizite Einschränkungen für das Layout-Element:

Daher darf das Layout weder schmaler als 156 noch höher oder niedriger als 150 sein, ohne dass dabei eine der Einschränkungen der untergeordneten Elemente verletzt wird.

Fenster und Layouts verbinden

Sie können die üblichen Verankerungskonzepte verwenden, um sicherzustellen, dass sich Ihr Layout an die Größenänderung des Fensters anpasst.

RowLayout {
    id: layout
    anchors.fill: parent

Sie können sich auf die Größenbeschränkungen von Layouts verlassen, um sicherzustellen, dass das Fenster nicht über die Layout-Grenzen hinaus vergrößert oder verkleinert werden kann. Sie können die Größenbeschränkungen aus dem Layout übernehmen und diese Beschränkungen für die Eigenschaften `minimumWidth`, `minimumHeight`, `maximumWidth` und `maximumHeight` des Elements ` Window ` festlegen. Der folgende Code stellt sicher, dass die Fenstergröße nicht über die Beschränkungen des Layouts hinaus verändert werden kann:

minimumWidth: layout.Layout.minimumWidth
minimumHeight: layout.Layout.minimumHeight
maximumWidth: 1000
maximumHeight: layout.Layout.maximumHeight

Legen Sie schließlich die Anfangsgröße des Fensters auf die implizite Größe des Layouts fest:

width: layout.implicitWidth
height: layout.implicitHeight

Elemente über die gesamte Breite anordnen und strecken

Verwenden Sie „ spans “ in einem „ GridLayout “, damit untergeordnete Elemente mehr als eine Zelle einnehmen. Beispielsweise könnten Sie ein „ GridLayout “ mit sechs Zellen in zwei Zeilen haben. Die obere Zeile enthält die Elemente„item1“, „item2“ und „item3“. Die untere Zeile enthält das Element „item4“, für das „columnSpan: 3“ und „alignment: Qt.AlignHCenter“ festgelegt sind. Dadurch wird „item4“ in der Mitte der drei Zellen platziert, aus denen die untere Zeile besteht. Der folgende Codeausschnitt dient als Beispiel:

ApplicationWindow {
    id: root
    width: 300
    height: 300
    visible: true

    GridLayout {
       rows: 2
       columns: 3
       Rectangle {
           color: 'cyan'
           implicitWidth: 50
           implicitHeight: 50
       }
       Rectangle {
           color: 'magenta'
           implicitWidth: 50
           implicitHeight: 50
       }
       Rectangle {
           color: 'yellow'
           implicitWidth: 50
           implicitHeight: 50
       }
       Rectangle {
           color: 'black'
           implicitWidth: 50
           implicitHeight: 50
           Layout.columnSpan: 3
           Layout.alignment: Qt.AlignHCenter
       }
    }
}

Die Größe von Zeilen und Spalten ergibt sich implizit aus ihrem Inhalt. Beispielsweise kann ein „Button“ die Breite der Spalte, in der er sich befindet, oder die Höhe der Zeile, in der er sich befindet, beeinflussen. Das bedeutet, dass „ GridLayout “ keine gleichmäßige Verteilung aufweist. Aus diesem Grund können Sie kein „span“ verwenden, um ein Layout zu strecken. Um die Streckung eines Elements oder Layouts zu manipulieren, verwenden Sie stattdessen „ stretchFactors“ und/oder Größenhinweise.