FlexboxLayout QML Type

Das FlexboxLayout QML-Konstrukt bietet ein Flex-Layout für die Quick Items. Mehr...

Dieser Typ befindet sich in der Entwicklung und kann sich noch ändern.

• Liste aller Mitglieder, einschließlich geerbter Mitglieder

Eigenschaften

• alignContent : enumeration
• alignItems : enumeration
• columnGap : real
• direction : enumeration
• gap : real
• justifyContent : enumeration
• rowGap : real
• wrap : enumeration

Beigefügte Eigenschaften

• alignSelf : enumeration

Detaillierte Beschreibung

Das FlexboxLayout ermöglicht ein flexibles Layout der Quick Items, ähnlich dem CSS Flexible Box Layout. Intern verwendet Qt FlexboxLayout die Yoga-Engine, um die Geometrie der Flex-Elemente abzuleiten. Die Yoga-Bibliothek ist eine Untermenge des CSS Flexible Box Layout. Daher kann FlexboxLayout auf die von der Yogabibliothek unterstützten Funktionen beschränkt werden.

Die Elemente innerhalb des FlexboxLayouts können mit bevorzugten, minimalen und maximalen Größen über die vorhandenen Layout-Eigenschaften konfiguriert werden. Wenn die Elemente innerhalb des FlexboxLayouts beispielsweise gestreckt werden müssen, kann die dem Layout zugeordnete Eigenschaft Layout.fillWidth oder Layout.fillHeight festgelegt werden.

Elemente in einem FlexboxLayout unterstützen diese angehängten Eigenschaften:

• FlexboxLayout.alignSelf
• Layout.minimumWidth
• Layout.minimumHeight
• Layout.preferredWidth
• Layout.preferredHeight
• Layout.maximumWidth
• Layout.maximumHeight
• Layout.fillWidth
• Layout.fillHeight
• Layout.margins
• Layout.leftMargin
• Layout.rightMargin
• Layout.topMargin
• Layout.bottomMargin

Lesen Sie hier mehr über angehängte Eigenschaften.

Um diesen Typ effizienter nutzen zu können, empfiehlt es sich, den allgemeinen Mechanismus des Moduls Qt Quick Layouts zu verstehen. Weitere Informationen finden Sie unter Qt Quick Layouts Overview.

Beispielverwendung

Der folgende Ausschnitt zeigt ein minimalistisches Beispiel für die Verwendung von QML FlexboxLayout zur flexibleren Anordnung der Rechteckelemente

FlexboxLayout {
    id: flexLayout
    anchors.fill: parent
    wrap: FlexboxLayout.Wrap
    direction: FlexboxLayout.Row
    justifyContent: FlexboxLayout.JustifySpaceAround
    Rectangle {
        color: 'teal'
        implicitWidth: 200
        implicitHeight: 200
    }
    Rectangle {
        color: 'plum'
        implicitWidth: 200
        implicitHeight: 200
    }
    Rectangle {
        color: 'olive'
        implicitWidth: 200
        implicitHeight: 200
    }
    Rectangle {
        color: 'beige'
        implicitWidth: 200
        implicitHeight: 200
    }
    Rectangle {
        color: 'darkseagreen'
        implicitWidth: 200
        implicitHeight: 200
    }
}

Siehe auch ColumnLayout, GridLayout, RowLayout, StackView, und Qt Quick Layouts Übersicht.

Dokumentation der Eigenschaften

alignContent : enumeration

Diese Eigenschaft gibt die Verteilung der Flexlinien entlang der Querachse des Flexbox-Layouts an.

Mögliche Werte:

Der Standardwert ist FlexboxLayout.AlignStart.

alignItems : enumeration

Diese Eigenschaft legt die Ausrichtung der Elemente innerhalb der Flexbox-Linien des Flexbox-Layouts fest und ist entlang der Querachse ausgerichtet (die orthogonal zur Hauptachse verläuft, wie durch die Eigenschaft direction definiert). Diese Eigenschaft kann von den Elementen innerhalb des Flexbox-Layouts durch die angehängte Eigenschaft FlexboxLayout.alignSelf außer Kraft gesetzt werden.

Mögliche Werte:

Der Standardwert ist FlexboxLayout.AlignStart.

columnGap : real

Diese Eigenschaft gibt den Abstand an, der auf die FlexboxLayout entlang der Inline-Achse angewendet werden muss. Durch die Einstellung dieser Eigenschaft wird der Wert gap für die Inline-Achse außer Kraft gesetzt.

Der Standardwert ist 0.

direction : enumeration

Diese Eigenschaft gibt die Richtung des Element-Layouts innerhalb des Flexbox-Layouts an und definiert die Haupt-Achse.

Mögliche Werte:

Der Standardwert ist FlexboxLayout.Row.

gap : real

Diese Eigenschaft gibt den Abstand an, der auf die FlexboxLayout sowohl entlang der Inline-Achse als auch der Blockachse angewendet werden muss.

Der Standardwert ist 0.

justifyContent : enumeration

Diese Eigenschaft gibt die Verteilung der Elemente entlang der Hauptachse des Flexbox-Layouts an.

Mögliche Werte:

Der Standardwert ist FlexboxLayout.JustifyStart.

rowGap : real

Diese Eigenschaft gibt den Abstand an, der auf die FlexboxLayout entlang der Blockachse angewendet werden muss. Die Einstellung dieser Eigenschaft setzt den Wert gap für die Blockachse außer Kraft.

Der Standardwert ist 0.

wrap : enumeration

Diese Eigenschaft gibt an, dass die Elemente innerhalb des Flexbox-Layouts umbrochen werden können oder nicht. Dies geschieht, wenn die Kinder die Größe des Flexbox-Layouts überschreiten. Wenn die Elemente umbrochen werden, werden sie in mehreren Zeilen platziert, je nach Überlaufbedingung wie angegeben. Jede Zeile nimmt die maximale Größe des Elements entlang der Querachse ein.

Mögliche Werte:

Der Standardwert ist FlexboxLayout.NoWrap.

Dokumentation der angehängten Eigenschaft

FlexboxLayout.alignSelf : enumeration

Diese angehängte Eigenschaft ermöglicht es, dieses Element im Flexbox-Layout entlang der Querachse auszurichten und überschreibt die übergeordnete Flexbox-Layout-Eigenschaft alignItems.

Standardmäßig erbt das untergeordnete Element die Ausrichtung vom übergeordneten Element und kann die übergeordnete Eigenschaft für das Flexbox-Layout alignItems mit den Werten FlexboxLayout.AlignStart, FlexboxLayout.AlignCenter und FlexboxLayout.AlignEnd außer Kraft setzen.

Der Standardwert ist FlexboxLayout.AlignAuto.