FlexboxLayout QML Type

El constructor FlexboxLayout QML proporciona un diseño flexible para los elementos rápidos. Más...

Este tipo está en desarrollo y está sujeto a cambios.

• Lista de todos los miembros, incluidos los heredados

Propiedades

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

Propiedades anexas

• alignSelf : enumeration

Descripción detallada

El FlexboxLayout permite diseñar los elementos rápidos de una manera flexible similar al CSS Flexible Box Layout. Internamente Qt FlexboxLayout utiliza el motor de yoga para derivar la geometría de los elementos flexibles. La librería yoga es un subconjunto del CSS Flexible Box Layout. Por lo tanto FlexboxLayout puede limitarse a las características soportadas por la librería yoga.

Los elementos dentro del FlexboxLayout pueden ser configurados con tamaños preferidos, mínimos y máximos a través de las propiedades adjuntas al layout existente. Por ejemplo, si el elemento dentro del FlexboxLayout necesita ser estirado, se puede establecer la propiedad layout attached Layout.fillWidth o Layout.fillHeight.

Los elementos en un FlexboxLayout soportan estas propiedades adjuntas:

• 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

Lea más sobre las propiedades adjuntas aquí.

Para poder utilizar este tipo de forma más eficiente, se recomienda entender el mecanismo general del módulo Qt Quick Layouts. Consulte Qt Quick Layouts Overview para obtener más información.

Ejemplo de uso

El siguiente fragmento muestra un ejemplo minimalista del uso de QML FlexboxLayout para organizar los elementos rectangulares de forma más flexible

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

Ver también ColumnLayout, GridLayout, RowLayout, StackView, y Qt Quick Descripción de Layouts.

Documentación de Propiedades

alignContent : enumeration

Esta propiedad especifica la distribución de las líneas flexibles a lo largo del eje transversal del diseño de la caja flexible.

Valores posibles:

El valor por defecto es FlexboxLayout.AlignStart.

alignItems : enumeration

Esta propiedad especifica la alineación de los elementos dentro de las líneas flexibles del layout de caja flexible y su alineación a lo largo del eje transversal (que es ortogonal al eje principal, como se define en la propiedad direction). Esta propiedad puede ser anulada por los elementos dentro del diseño de la caja flexible a través de la propiedad adjunta FlexboxLayout.alignSelf.

Valores posibles:

El valor por defecto es FlexboxLayout.AlignStart.

columnGap : real

Esta propiedad contiene la cantidad de espacio que debe aplicarse a FlexboxLayout a lo largo del eje en línea. Al establecer esta propiedad se anula el valor de gap que afecta al eje en línea.

El valor por defecto es 0.

direction : enumeration

Esta propiedad contiene la dirección del diseño del elemento dentro del diseño de la caja flexible y define el eje principal.

Valores posibles:

El valor por defecto es FlexboxLayout.Row.

gap : real

Esta propiedad contiene la cantidad de espacio que debe aplicarse a FlexboxLayout tanto a lo largo del eje en línea como del eje de bloque.

El valor por defecto es 0.

justifyContent : enumeration

Esta propiedad especifica la distribución de los elementos a lo largo del eje principal del diseño de la caja flexible.

Valores posibles:

El valor por defecto es FlexboxLayout.JustifyStart.

rowGap : real

Esta propiedad contiene la cantidad de espacio que debe aplicarse a FlexboxLayout a lo largo del eje del bloque. Al establecer esta propiedad se anula el valor de gap que afecta al eje del bloque.

El valor por defecto es 0.

wrap : enumeration

Esta propiedad especifica que los ítems dentro del layout de caja flexible pueden envolverse o no y sucede cuando los children desbordan el tamaño del layout de caja flexible. Si los elementos se envuelven, se colocarán en múltiples líneas dependiendo de la condición de desbordamiento. Cada línea ocupa el tamaño máximo del elemento a lo largo del eje transversal.

Valores posibles:

El valor por defecto es FlexboxLayout.NoWrap.

Documentación de propiedades adjuntas

FlexboxLayout.alignSelf : enumeration

Esta propiedad adjunta permite alinear este elemento en el diseño de la caja flexible a lo largo del eje transversal y anula la propiedad del diseño de la caja flexible padre alignItems.

Por defecto, el elemento hijo hereda la alineación del padre y puede anular la propiedad padre flex box layout alignItems con los valores FlexboxLayout.AlignStart, FlexboxLayout.AlignCenter y FlexboxLayout.AlignEnd.

El valor por defecto es FlexboxLayout.AlignAuto.