FlexboxLayout QML Type

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

Import Statement:	`import QtQuick.Layouts`
Since:	Qt 6.10
Inherits:	Item
Status:	Preliminary

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.

Hinweis: Das FlexboxLayout hält sich bei seinen Funktionen an die Yogabibliothek Version 2.0.

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:

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 Übersicht.

Beispielverwendung

Der folgende Ausschnitt zeigt ein minimalistisches Beispiel für die Verwendung von QML FlexboxLayout, um die Rechteckelemente flexibler anzuordnen

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

Hinweis: Diese API wird als technische Vorschau betrachtet und kann sich in zukünftigen Versionen von Qt ändern oder entfernt werden.

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

Eigenschaft Dokumentation

alignContent : enumeration

Diese Eigenschaft legt die Verteilung der Flexlinien entlang der Querachse des Flexbox-Layouts fest.

Mögliche Werte:

Konstant	Beschreibung
`FlexboxLayout.AlignStart`	(Standard) Flex-Linien werden am Anfang des Flexbox-Layouts ausgerichtet.
`FlexboxLayout.AlignCenter`	Flexlinien werden an der Mitte des Flexbox-Layouts ausgerichtet.
`FlexboxLayout.AlignEnd`	Flex-Linien werden am Ende des Flexbox-Layouts ausgerichtet.
`FlexboxLayout.AlignStretch`	Flexlinien werden entsprechend der Höhe des Flexbox-Layouts gestreckt.
`FlexboxLayout.AlignSpaceBetween`	Die Abstände sind gleichmäßig zwischen den Linien verteilt, und am Rand des Flexbox-Layouts ist kein Abstand vorhanden.
`FlexboxLayout.AlignSpaceAround`	Die Abstände sind gleichmäßig zwischen den Linien verteilt, und an den Rändern des Flexbox-Layouts ist ein halb so großer Abstand vorhanden.
`FlexboxLayout.AlignSpaceEvenly`	Die Abstände sind gleichmäßig zwischen den Linien und den Rändern des Flexbox-Layouts verteilt. Nicht unterstützt in Qt 6.10.

Der Standardwert ist FlexboxLayout.AlignStart.

alignItems : enumeration

Diese Eigenschaft legt die Ausrichtung der Elemente innerhalb der Flexbox-Linien des Flexbox-Layouts fest. Die Ausrichtung erfolgt entlang der Querachse (die orthogonal zur Hauptachse ist, 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:

Konstant	Beschreibung
`FlexboxLayout.AlignStart`	(Standard) Elemente werden am Anfang der Querachse des Flexbox-Layouts ausgerichtet.
`FlexboxLayout.AlignCenter`	Die Elemente werden an der Mitte der Querachse des Flexbox-Layouts ausgerichtet.
`FlexboxLayout.AlignEnd`	Elemente werden am Ende der Flexbox-Layout-Querachse ausgerichtet.

Hinweis: Die in den möglichen Werten genannten Ausrichtungen gelten nur für die Eigenschaft alignItems

Der Standardwert ist FlexboxLayout.AlignStart.

columnGap : real

Diese Eigenschaft gibt den Abstand an, der auf FlexboxLayout entlang der Inline-Achse angewendet werden soll. 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 bestimmt die Richtung des Elementlayouts innerhalb des Flexbox-Layouts und definiert die Hauptachse.

Mögliche Werte:

Konstant	Beschreibung
`FlexboxLayout.Row`	(Standard) Die Elemente werden von links nach rechts angeordnet.
`FlexboxLayout.RowReversed`	Die Elemente werden von rechts nach links angeordnet.
`FlexboxLayout.Column`	Artikel werden von oben nach unten angeordnet.
`FlexboxLayout.ColumnReversed`	Die Elemente werden von unten nach oben angeordnet.

Der Standardwert ist FlexboxLayout.Row.

gap : real

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

Der Standardwert ist 0.

justifyContent : enumeration

Diese Eigenschaft legt die Verteilung der Elemente entlang der Hauptachse des Flexbox-Layouts fest.

Mögliche Werte:

Konstant	Beschreibung
`FlexboxLayout.JustifyStart`	(Standard) Die Elemente werden am Anfang des Flexbox-Layouts ausgerichtet.
`FlexboxLayout.JustifyCenter`	Die Elemente werden entlang der Mitte des Flexbox-Layouts ausgerichtet.
`FlexboxLayout.JustifyEnd`	Die Elemente werden am Ende des Flexbox-Layouts ausgerichtet.
`FlexboxLayout.JustifySpaceBetween`	Die Abstände sind gleichmäßig zwischen den Elementen verteilt und es gibt keinen Abstand entlang der Ränder des Flexbox-Layouts.
`FlexboxLayout.JustifySpaceAround`	Die Abstände sind gleichmäßig zwischen den Objekten verteilt und an den Rändern des Flexbox-Layouts befindet sich ein halb so großer Abstand.
`FlexboxLayout.JustiftSpaceEvenly`	Die Abstände sind gleichmäßig zwischen den Einträgen und den Rändern des Flexbox-Layouts verteilt.

Der Standardwert ist FlexboxLayout.JustifyStart.

rowGap : real

Diese Eigenschaft gibt den Abstand an, der auf FlexboxLayout entlang der Blockachse angewendet werden muss. Die Einstellung dieser Eigenschaft überschreibt den Wert gap, der die Blockachse betrifft.

Der Standardwert ist 0.

wrap : enumeration

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

Mögliche Werte:

Konstant	Beschreibung
`FlexboxLayout.Wrap`	Artikel werden innerhalb des Flexbox-Layouts in mehrere Zeilen umbrochen.
`FlexboxLayout.NoWrap`	(Standard) Artikel werden nicht umbrochen und im Flexbox-Layout in einer einzigen Zeile angeordnet.
`FlexboxLayout.WrapReverse`	Elemente werden innerhalb des Flexbox-Layouts in umgekehrter Richtung in mehrere Zeilen umgebrochen.

Der Standardwert ist FlexboxLayout.NoWrap.

Angehängte Eigenschaft Dokumentation

FlexboxLayout.alignSelf : enumeration

Diese angehängte Eigenschaft ermöglicht es, dieses Element im Flexbox-Layout entlang der Querachse auszurichten und hat Vorrang vor der übergeordneten 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.

© 2025 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.