Qt Quick Presentación general

Utilice Qt Quick Layouts para organizar los elementos de una interfaz de usuario. Qt Quick Los diseños cambian el tamaño de sus elementos, lo que los hace muy adecuados para interfaces de usuario redimensionables.

Características principales

Algunas de las principales características de Qt Quick Layouts son:

• Align elementos con la propiedad Layout.alignment.
• Especifique resizable items con las propiedades Layout.fillWidth y Layout.fillHeight.
• Establezca restricciones de tamaño con las propiedades Layout.minimumWidth, Layout.preferredWidth, y Layout.maximumWidth - "Anchura" puede sustituirse por "Altura" para especificar restricciones similares a la altura.
• Puede especificar spacing con spacing, rowSpacing, o columnSpacing.
• Estire los elementos horizontal y verticalmente con stretch factors.

Además, GridLayout añade estas características:

• Grid coordinatesEl tamaño de los elementos se controla con las propiedades Layout.row y Layout.column.
• Automatic grid coordinates utilizado junto con las propiedades flow, rows, y columns.
• Spans a través de filas o columnas, que puede especificar con las propiedades Layout.rowSpan y Layout.columnSpan.

Para empezar

Para empezar a utilizar Qt Quick Layouts, importe los tipos QML a su aplicación con la siguiente sentencia import en su archivo .qml:

import QtQuick.Layouts

El siguiente paso es crear un diseño sencillo. También puede estudiar Qt Quick Layouts - Basic Example.

Un diseño sencillo

La intención de utilizar un layout es reorganizar sus hijos cada vez que el layout cambia de tamaño. Esto significa que la aplicación debe asegurarse de que el layout cambia de tamaño. En el siguiente fragmento, el RowLayout se asegura de ello especificando anchors.fill: parent. Sin embargo, también puede conseguirlo por otros medios, como especificando las propiedades width y height. En el mismo fragmento, el Rectángulo naranja tiene un tamaño fijo de 100 por 150 píxeles, y el Rectángulo ciruela se expandirá para ocupar todo el espacio que se le asigne.

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

Los diseños son responsables de la geometría de sus hijos. Esto incluye propiedades como width, height, x, y, anchors), etc.

Espaciado

Como se ha visto en el fragmento anterior, el espaciado para el RowLayout se establece en 6. Esto asegura que todos los elementos del diseño tengan 6 píxeles de espacio entre ellos:

spacing: 6

Si omite especificar un valor de espaciado, el diseño utilizará un valor predeterminado de 5 píxeles. El espaciado, así como el ancho implícito de cualquier elemento hijo, contribuye al ancho implícito del diseño. Es importante tener esto en cuenta si confías en el comportamiento por defecto, ya que puede afectar al diseño de tu maqueta. Por ejemplo, los dos ColumnLayoutestablecen Layout.fillWidth: true en el siguiente fragmento. Es natural pensar que ambos tendrán el mismo ancho. Sin embargo, debido al espaciado predeterminado de 5 píxeles entre los elementos del RowLayout interior, el implicitWidth del primer ColumnLayout se hace mayor, dejando menos espacio para el segundo. Por ejemplo:

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

Este snippet producirá un layout con este aspecto:

Para garantizar la igualdad de tamaño de estas dos columnas, puede

1. establecer el espaciado del RowLayout en 0, o bien
2. establecer preferredWidth a valores iguales en ambas ColumnLayouts.

Especificación del tamaño preferido

Para cada elemento, el tamaño preferido efectivo puede proceder de una de varias propiedades candidatas. Para determinar el tamaño preferido efectivo, un elemento consulta estas propiedades candidatas en el siguiente orden, y utilizará la primera candidata con una anchura o altura válidas.

Un elemento puede especificar Layout.preferredWidth sin tener que especificar Layout.preferredHeight. En tales casos, la altura efectiva preferida se determina a partir de implicitHeight.

Restricciones de tamaño

Dado que un elemento puede ser redimensionado por su diseño, el diseño necesita conocer los tamaños minimum, preferred, y maximum de todos los elementos en los que Layout.fillWidth o Layout.fillHeight estén definidos como true.

La anchura y la altura de preferred es la anchura y la altura reales de un elemento, si la presentación no está vinculada a un tamaño específico. Si la maquetación está fijada a un tamaño específico, distribuye espacio adicional basándose en la relación de tamaños preferidos de sus elementos, teniendo en cuenta los tamaños mínimo y máximo. Los tamaños preferidos e implícitos actúan como proporciones y pesos cuando todos los elementos establecen fillWidth y fillHeight.

Por ejemplo, lo siguiente produce un diseño con dos rectángulos uno al lado del otro que se estira horizontalmente. El rectángulo naranja se puede redimensionar de 50x150 a 300x150, y el rectángulo ciruela se puede redimensionar de 100x100 a ∞x100. Siempre que no se supere la anchura mínima y máxima de cada elemento, el rectángulo ciruela tendrá el doble de anchura que el naranja.

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

Combinando las restricciones de cada elemento se obtienen estas restricciones implícitas para el elemento de diseño:

Así, la maqueta no puede ser más estrecha que 156, ni más alta o más baja que 150, sin romper ninguna de las restricciones de sus elementos hijos.

Conexión de ventanas y maquetas

Puede utilizar los conceptos normales de anclaje para asegurarse de que su maqueta sigue el cambio de tamaño de la ventana.

RowLayout {
    id: layout
    anchors.fill: parent

Puede confiar en las restricciones de tamaño de los diseños para asegurarse de que la ventana no puede cambiar de tamaño más allá de las restricciones del diseño. Puede tomar las restricciones de tamaño del diseño y establecerlas en los valores minimumWidth, minimumHeight, maximumWidth y maximumHeight del elemento Window. El siguiente código asegura que la ventana no puede ser redimensionada más allá de las restricciones del diseño:

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

Por último, establezca el tamaño inicial de la ventana para que sea el tamaño implícito del diseño:

width: layout.implicitWidth
height: layout.implicitHeight

Abarcar y estirar elementos

Utilice spans en GridLayout para que los elementos secundarios ocupen más de una celda. Por ejemplo, puede tener un GridLayout con seis celdas en dos filas. La fila superior contiene los elementositem1, item2 e item3. La fila inferior contiene el Item item4, que especifica columnSpan: 3 y alignment: Qt.AlignHCenter. Esto coloca item4 en el medio de las tres celdas que componen la fila inferior. El siguiente fragmento sirve de ejemplo:

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

El tamaño de las filas y columnas viene dado implícitamente por su contenido. Por ejemplo, un Botón puede afectar a la anchura de la columna en la que se encuentra, o a la altura de la fila en la que se encuentra. Esto significa que GridLayout no tiene una distribución uniforme. Debido a esto, no puedes usar un span para estirar un layout. Para manipular el estiramiento de un elemento o diseño, utilice stretchFactors y / o sugerencias de tamaño en su lugar.