Introducción a Qt Quick Layouts.

Si usted quiere crear una aplicación QML donde la UI (interfaz de usuario) responda bien cuando se redimensiona la ventana, las herramientas que ofrece Qt Quick son algo limitadas. Con la llegada de Qt 5.1 los programadores contaran con una nueva versión de Qt Quick que ofrece novedosas herramientas como RowLayout, ColumnLayout y GridLayout que serán muy útiles para alcanzar este propósito [1].

Introducción

Antes de la llegada de Qt 5.1, Positioners y Anchors eran las únicas herramientas disponibles en Qt Quick para ordenar elementos en las UI.

Positioners eran adecuados para adicionar muchos elementos, pero no siempre eran útiles para crear una UI que fuera posible redimensionarla, pues ellos solo posicionan los elementos (el ancho y el largo se mantenían iguales).

Anchors permitían un poco más de flexibilidad, a costo de la claridad del código. Con anchors usted puede hacer que un elemento se estreche vinculando uno de sus bordes con el correspondiente borde del padre, y estableciendo un vínculo similar con los elementos en el borde opuesto. Sin embargo, usted no puede hacer que muchos elementos se distribuyan ellos mismos si la ventana se redimensiona.

La última opción es que usted mismo haga un posicionamiento en capas manual. Esto ofrece gran flexibilidad, pero se necesita mucho código, es difícil y propenso a errores. Durante el desarrollo de Qt Quick Controls, para la nueva versión de Qt 5.1 se tuvieron en cuenta estos elementos y se decidió proveer a los desarrolladores un sistema de capas (layout system) más eficiente.

import QtQuick.Layouts 1.0

Incluyendo el import de arriba usted tendrá disponibles en sus herramientas a los componentes RowLayout, ColumnLayout y GridLayout. Estos componentes de tipo layouts, funcionan de forma similar a sus homólogos que encontramos en el módulo QtWidgets: QHBoxLayout, QVBoxLayout y QGridLayout. Ellos además tratan de combinar con el API de otros elementos QML como: Row, Grid and Column. De esta forma si usted está familiarizado con alguna de estas APIs, usted encontrara a Qt Quick Layouts fácil de usar.

La alineación (Alignment) de los elementos dentro de una celda puede ser especificada con la propiedad Layout.alignment.

El espaciado (Spans) dentro de las filas y las columnas puede ser especificado con las propiedades the Layout.rowSpan y Layout.columnSpan.

Las coordenadas de la cuadricula (Grid coordinates) pueden ser especificadas con las propiedades Layout.row y Layout.column.

Los elementos que pueden ser redimensionados (Resizable items) se pueden especificar con las propiedades Layout.fillWidth y Layout.fillHeight. Esta fue la meta principal de Qt Quick Layouts.

Los tamaños mínimos, preferidos y máximos (Minimum, Preferred and Maximum) pueden ser especificados con las propiedades Layout.minimumWidth, Layout.preferredWidth y Layout.maximumWidth (“Width” puede ser reemplazado con “Height” para especificar restricciones similares en el alto)

Este conjunto de características sumadas parecería no ser de gran impacto, pero el hecho de que usted pueda tener en un mismo layout elementos que se estiran y otros que no se estiran, puede facilitar muchos las cosas y permite trabajar de forma intuitiva con los componentes.

Ejemplo

Suponga que usted necesita crear una barra de herramientas (ToolBar) con dos botones (buttons) y un deslizante (slider) que ocupe el espacio restante. Cuando cambie la dimensión, el espacio extra será ocupado por el deslizante (slider).

Sin usar Qt Quick Layouts, la solución con menos código seria usar una mezcla entre una fila (Row) y el uso de anchors:

ToolBar {

Row {

id: row

        spacing: 2

        anchors.verticalCenter: parent.verticalCenter

        ToolButton { iconSource: "images/go-previous.png" }

        ToolButton { iconSource: "images/go-next.png" }

    }

    Slider {

        anchors.left: row.right

        anchors.leftMargin: 2

        anchors.verticalCenter: parent.verticalCenter

        anchors.right: parent.right

    }

}

Con Qt Quick Layouts, todos los elementos pueden ser adicionados en un mismo layout:

ToolBar {

    RowLayout {

        anchors.fill: parent

        spacing: 2

        ToolButton { iconSource: "images/go-previous.png" }

        ToolButton { iconSource: "images/go-next.png" }

        Slider { Layout.fillWidth: true }

    }

}

Note que la declaración es mucho más corta para el elemento Slider. También note que cuando usa Qt Quick Layouts, el espaciamiento solo necesita ser especificado una vez. El código se reduce de 288 a 172 caracteres (excluyendo los espacios en blanco), lo que representa un 40% de reducción.

Resumen

En este ejemplo, haciendo uso de Qt Quick Layouts, hemos obtenido un 40% menos de código, mejorando la legibilidad (no solo porque el código sea más corto sino también porque la estructura del código se parece más a la estructura de la UI).

Si usted quiere redimensionar la UI, usted probablemente encontrara que Qt Quick Layouts es mucho más fácil de usar que anchors, posicioner y posicionamiento manual.

Quedamos en espera de sus comentarios.