FlexboxLayout QML Type

Das QML-Konstrukt „FlexboxLayout“ stellt ein Flex-Layout für die Schnellzugriffselemente bereit. Mehr...

Dieser Typ befindet sich in der Technologievorschau 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

Zugehörige Eigenschaften

• alignSelf : enumeration

Ausführliche Beschreibung

Das FlexboxLayout ermöglicht eine flexible Anordnung der Quick-Elemente, ähnlich wie beim CSS Flexible Box Layout. Intern nutzt Qt FlexboxLayout die Yoga-Engine, um die Geometrie der Flex-Elemente abzuleiten. Die Yoga-Bibliothek ist eine Teilmenge des CSS Flexible Box Layouts. Daher kann das FlexboxLayout auf die Funktionen beschränkt sein, die von der Yoga-Bibliothek unterstützt werden.

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

Elemente in einem „FlexboxLayout“ unterstützen folgende angehängte 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

Weitere Informationen zu den angehängten Eigenschaften finden Sie hier.

Um diesen Typ effizienter nutzen zu können, empfiehlt es sich, die allgemeinen Funktionsweisen des Moduls „ Qt Quick Layouts “ zu verstehen. Weitere Informationen finden Sie unter „Qt Quick Layouts -Übersicht “.

Anwendungsbeispiel

Der folgende Codeausschnitt zeigt ein minimalistisches Beispiel für die Verwendung von QML FlexboxLayout, um rechteckige Elemente 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
    }
}

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

Dokumentation zu den Eigenschaften

alignContent : enumeration

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

Mögliche Werte:

Der Standardwert ist „ FlexboxLayout.AlignStart “.

alignItems : enumeration

Diese Eigenschaft legt die Ausrichtung der Elemente innerhalb der Flex-Zeilen des Flexbox-Layouts fest und richtet diese entlang der Querachse aus (die orthogonal zur Hauptachse verläuft, wie durch die Eigenschaft „ direction “ definiert). Diese Eigenschaft kann durch die Elemente innerhalb des Flexbox-Layouts über die angehängte Eigenschaft „ FlexboxLayout.alignSelf “ überschrieben werden.

Mögliche Werte:

Der Standardwert lautet „ FlexboxLayout.AlignStart “.

columnGap : real

Diese Eigenschaft gibt den Platz an, der entlang der Inline-Achse auf den „ FlexboxLayout “ angewendet werden soll. Durch das Festlegen dieser Eigenschaft wird der Wert von „ gap “ für die Inline-Achse überschrieben.

Der Standardwert lautet „ 0 “.

direction : enumeration

Diese Eigenschaft legt die Ausrichtungsrichtung der Elemente innerhalb des Flexbox-Layouts fest und definiert die Hauptachse.

Mögliche Werte:

Der Standardwert lautet „ FlexboxLayout.Row “.

gap : real

Diese Eigenschaft gibt den Platz an, der sowohl entlang der Inline-Achse als auch entlang der Block-Achse auf das Element „ FlexboxLayout “ angewendet werden soll.

Der Standardwert ist „ 0 “.

justifyContent : enumeration

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

Mögliche Werte:

Der Standardwert ist „ FlexboxLayout.JustifyStart “.

rowGap : real

Diese Eigenschaft gibt den Abstand an, der entlang der Blockachse auf die „ FlexboxLayout “ angewendet werden soll. Durch das Festlegen dieser Eigenschaft wird der Wert von „ gap “ für die Blockachse überschrieben.

Der Standardwert ist „ 0 “.

wrap : enumeration

Diese Eigenschaft legt fest, ob die Elemente innerhalb des Flexbox-Layouts umgebrochen werden können oder nicht. Dies geschieht, wenn die untergeordneten Elemente die Größe des Flexbox-Layouts überschreiten. Werden die Elemente umgebrochen, werden sie je nach dem beschriebenen Überlaufzustand in mehrere Zeilen angeordnet. Jede Zeile nimmt die maximale Größe des Elements entlang der Querachse ein.

Mögliche Werte:

Der Standardwert ist „ FlexboxLayout.NoWrap “.

Dokumentation zur zugehörigen Eigenschaft

FlexboxLayout.alignSelf : enumeration [attached]

Diese zugewiesene Eigenschaft ermöglicht es, dieses Element im Flexbox-Layout entlang der Querachse auszurichten, und überschreibt die Flexbox-Layout-Eigenschaft „ alignItems “ des übergeordneten Elements.

Standardmäßig erbt das untergeordnete Element die Ausrichtung vom übergeordneten Element und kann die Flexbox-Layout-Eigenschaft „ alignItems “ des übergeordneten Elements mit den Werten „ FlexboxLayout.AlignStart “, „ FlexboxLayout.AlignCenter “ und „ FlexboxLayout.AlignEnd “ überschreiben.

Der Standardwert ist ` FlexboxLayout.AlignAuto`.