Diseño de tus GUIs con Qt Designer

Cuando diseñas tus GUIs en Qt puede ser una tarea bastante complicada colocar cada widget en la posición correcta en tus formularios. Afortunadamente, Qt ofrece un conjunto de gestores de diseño que simplifican el proceso de posicionamiento de los widgets y le permitirán crear fácilmente cualquier tipo de diseño. Para colocar el widget en un formulario, puedes crear todo en código, o puedes crear tu diseño con Qt Designer. En este tutorial, aprenderás a usar los layouts de Qt con Qt Designer para construir GUIs complejas para tus aplicaciones.

Además, crearemos un ejemplo de diálogo usando varios widgets con un layout coherente para reforzar tus conocimientos y juntar todo en un diálogo completamente funcional tal como lo crearías en una aplicación del mundo real.

Usando diseños con Qt Designer

Qt Designer es la herramienta de Qt para diseñar y crear interfaces gráficas de usuario (GUI) para aplicaciones de escritorio. Con Qt Designer, puedes crear ventanas, diálogos y formularios. Le permite añadir diferentes tipos de widgets para crear sus GUIs utilizando formularios en pantalla y una interfaz basada en arrastrar y soltar.

La interfaz principal de Qt Designer tiene el siguiente aspecto –

Qt Designer – Interfaz principal

Qt Designer tiene una interfaz clara y fácil de usar que le permite crear cualquier tipo de GUI arrastrando el widget a un formulario vacío. Después de colocar todos los widgets en su formulario, debe colocarlos en un diseño coherente. Esto asegurará que todos tus widgets se muestren y cambien de tamaño correctamente cuando el formulario se previsualice o se utilice en una aplicación.

Los gestores de diseño de Qt son contenedores estructurados que organizan automáticamente los widgets hijos asegurando que hagan un buen uso del espacio disponible. La colocación de los widgets dentro de un gestor de diseño los dispone automáticamente de acuerdo con las reglas definidas. Una de las características más útiles de Qt Designer es la capacidad de arrastrar y soltar jerarquías de gestores de diseño para organizar los widgets en interfaces limpias y funcionales.

En Qt Designer, puedes crear objetos de diseño aplicando un diseño a un grupo de widgets existentes. Aunque es posible arrastrar los layouts a un formulario y luego arrastrar los widgets a los layouts, esto puede ser un poco complicado. La mejor práctica es arrastrar todos los widgets y espaciadores que necesites al formulario y luego seleccionar los widgets y espaciadores relacionados y aplicarles los diseños. Utilice los siguientes pasos –

1. Arrastre y suelte los widgets en el formulario tratando de colocarlos cerca de su posición deseada
2. Seleccione los widgets que deben ser manejados con un determinado diseño, manteniendo la tecla Ctrl y haciendo clic en ellos
3. Aplique el diseño apropiado (horizontal, vertical, cuadrícula o formulario) utilizando la barra de herramientas de Qt Designer, el menú principal, o el menú contextual del formulario

Antes de entrar en un ejemplo, eche un vistazo a las opciones relacionadas con el diseño que ofrece Qt Designer –

1. Utilizar las opciones de diseño en la barra de herramientas principal
2. Utilizar las opciones de diseño en el menú principal
3. Utilizar las opciones de diseño en el menú contextual del formulario

La forma más accesible de crear diseños es utilizando la sección de diseño de la barra de herramientas principal de Qt Designer. Esta sección tiene el siguiente aspecto –

Qt Designer – Barra de herramientas de diseño

De izquierda a derecha, encontrará los siguientes botones –

• Lay Out Horizontally organiza los widgets seleccionados en un diseño horizontal uno al lado del otro (combinación de teclas, Ctrl+1). Esta opción utiliza un objeto estándar QHBoxLayout
• Lay Out Vertically organiza los widgets seleccionados en una disposición vertical, uno debajo de otro (combinación de teclas, Ctrl+2). Esta opción utiliza un objeto QVBoxLayout estándar
• Lay Out Horizontalmente en Splitter organiza los widgets horizontalmente utilizando un splitter (combinación de teclas, Ctrl+3)
• Lay Out Verticalmente en Splitter organiza los widgets verticalmente utilizando un splitter (combinación de teclas, Ctrl+4)
• Lay Out en Cuadrícula organiza los widgets en una cuadrícula tipo tabla (filas y columnas). Por defecto, cada widget ocupa una celda de la cuadrícula, pero puede modificar este comportamiento y hacer que los widgets abarquen varias celdas (Combinación de teclas, Ctrl+5). Esta opción utiliza un objeto QGridLayout estándar
• Disposición en un diseño de formulario organiza los widgets seleccionados en un diseño de dos columnas. La columna de la izquierda suele ser para las etiquetas que piden alguna información y la columna de la derecha incluye los widgets para introducir, editar o mostrar esa información. (Combinación de teclas, Ctrl+6)
• Romper disposición esta tecla permite frenar una disposición existente. Una vez que los widgets están organizados en un diseño, no puede moverlos ni cambiar su tamaño individualmente, porque su geometría está controlada por el diseño. Para modificar widgets individuales, tendrá que romper el diseño y rehacerlo más tarde (Combinación de teclas Ctrl+0)
• Ajustar el tamaño ajusta el tamaño del diseño para acomodar los widgets contenidos y para asegurar que cada uno tenga suficiente espacio para ser visible (Combinación de teclas Ctrl+J)

Estas mismas opciones relacionadas con el diseño también están disponibles a través del menú principal de Qt Designer bajo el menú Form y a través del menú contextual del formulario, para que puedas elegir la que más te guste.

Ahora que tenemos la teoría fuera del camino, podemos poner estos diseños en la práctica. En las próximas secciones, utilizaremos el Diseñador de Qt para distribuir los widgets en nuestros formularios y construir bonitas y elegantes interfaces gráficas de usuario para tus aplicaciones de escritorio. Pero antes de empezar a experimentar con los diferentes gestores de diseño que ofrece Qt, primero vamos a crear un widget personalizado para visualizar los diseños a medida que avanzamos en este tutorial.

El archivo .ui completado puede descargarse a continuación si desea omitir este paso.

layout-labels.ui

Siga adelante y encienda su Qt Designer, luego ejecute los siguientes pasos –

1. Seleccione Widget en la pestaña templates/forms del diálogo New Form. Esto creará un nuevo formulario vacío para trabajar.
2. Guarde su formulario como layout-labels.ui.
3. Busque un widget de Etiqueta en el Widget Box y arrástrelo al formulario.
4. Vaya al Property Editor y establezca la propiedad text en 0.
5. Abra el diálogo Text Edit y establezca el color del texto en blanco. Ajuste el tamaño de la fuente a 20 puntos y justifique el texto. Pulse OK para aplicar los cambios.
6. Vaya al Property Editor y establezca la propiedad autoFillBackground en True seleccionando la casilla de verificación.
7. Busque la propiedad palette y abra el diálogo Edit Palette. Utilice la opción Quick para establecer el color a rojo.

Si se siente perdido, eche un vistazo al siguiente screencast para ver los pasos en acción –

En este ejemplo, se crea una nueva ventana basada en la plantilla Widget. A continuación, añades una etiqueta, estableces su propiedad text en 0 y estableces su color de fondo en rojo.

Para completar este ejemplo, repite todos los pasos para añadir tres etiquetas más con sus respectivos textos establecidos en 1, 2 y 3 y sus colores establecidos en verde, amarillo y azul. Terminarás con un formulario como este:

Qt Designer – Formulario con etiquetas de colores

La captura de pantalla anterior muestra el formulario inicial que usarás para las próximas secciones. Es un formulario limpio con cuatro objetos de etiqueta en él. Puedes establecer un color de fondo a cada etiqueta para poder verlas y diferenciarlas más fácilmente en las siguientes secciones.

Disposiciones horizontales, QHBoxLayout

Puedes utilizar un gestor de disposición horizontal (QHBoxLayout) para organizar los widgets en una fila. Para crear este tipo de layout en código, necesitas instanciar la clase QHBoxLayout y luego añadir tus widgets al objeto layout. En Qt Designer es más fácil trabajar al revés.

Con tu archivo layout-labels.ui abierto, primero selecciona todas tus etiquetas. Para ello, puedes hacer clic en cada widget por turnos mientras mantienes pulsada la tecla Ctrl o también puedes hacer clic y arrastrar con el puntero del ratón dentro del formulario para seleccionar los widgets.

Una vez que haya seleccionado los widgets, póngalos en disposición horizontal seleccionando el botón Lay Out Horizontally de la barra de herramientas principal del Diseñador de Qt. También puede utilizar la opción Lay out->Lay Out Horizontally del menú contextual que se muestra a continuación o puede pulsar Ctrl+1. El siguiente screencast le guiará a través de estos pasos –

Si el diseño es incorrecto, entonces usted puede fácilmente deshacer todo y volver a empezar a colocar las cosas de nuevo. Para deshacer las cosas, puede pulsar Ctrl+z o utilizar el menú Edit de la barra de menú principal de Qt Designer. Si eso no es posible o no funciona, entonces puedes romper el diseño usando el botón Break Layout de la barra de herramientas principal de Qt Designer. Otra forma de romper un diseño es pulsar Ctrl+0 o elegir Break Layout en el menú contextual del formulario.

Diseños verticales, QVBoxLayout

Puede utilizar un diseño vertical (QVBoxLayout) para organizar sus widgets en una columna uno encima de otro. Esto puede ser muy útil cuando estás creando grupos de widgets y necesitas asegurarte de que están alineados verticalmente.

Comenzando con tu archivo original layout-labels.ui, el primer paso será seleccionar los widgets que necesitas incluir en el layout vertical. Después, puede hacer clic en el botón Lay Out Vertically sobre la barra de herramientas principal, o puede utilizar el menú contextual, o también puede pulsar Ctrl+2. El siguiente screencast le guiará a través de estos pasos –

Si echa un vistazo más de cerca al screencast, podrá ver que el objeto de diseño está indicado por un fino marco rojo que rodea las etiquetas del formulario. Este marco rojo no es visible en la vista previa o en tiempo de ejecución es sólo una guía que puede utilizar cuando usted está diseñando el formulario. También observa que, el objeto layout aparece en el Inspector de Objetos y sus propiedades (márgenes y restricciones) se muestran en el Editor de Propiedades.

Grid Layouts, QGridLayout

A veces necesitas distribuir tus widgets tanto horizontal como verticalmente dentro del mismo layout. Para hacer esto, puedes usar un gestor de diseño de rejilla (QGridLayout). Los gestores de diseño de rejilla colocan tus widgets en una rejilla cuadrada o rectangular, con todos los widgets alineados vertical y horizontalmente con sus vecinos. Este tipo de disposición puede darte mucha más libertad para organizar tus widgets en un formulario, manteniendo cierto grado de estructura. Esta disposición puede ser más adecuada que la disposición anidada de diseños horizontales y verticales, particularmente cuando te preocupas por la alineación de las filas o columnas adyacentes.

Puedes construir un diseño de cuadrícula con Qt Designer de la misma manera que para otros diseños. El primer paso consiste en seleccionar el grupo de widgets que desea distribuir utilizando un gestor de distribución de cuadrícula. A continuación, puedes utilizar la barra de herramientas, el menú contextual o pulsar Ctrl+5 para configurar el diseño. Vea el siguiente screencast –

En este caso, utilizamos un diseño de cuadrícula de 2 x 2 para organizar las etiquetas en su formulario. Tenga en cuenta que, para utilizar este tipo de diseño, primero debe colocar sus widgets en filas y columnas en el formulario, como se muestra en el screencast anterior. Qt Designer es bastante inteligente y tratará de mantener su diseño lo más parecido posible a lo que usted creó inicialmente a mano. Incluso puede crear arreglos difíciles de varias columnas de forma automática o rellenar automáticamente las celdas vacías.

Diseños de formularios, QFormLayout

Mientras que un QGridLayout puede ser utilizado para diseñar formularios con entradas y etiquetas en dos columnas, Qt también proporciona un diseño diseñado específicamente para este propósito – (QFormLayout). Este tipo de diseño es ideal cuando se crea una aplicación de entrada de datos estructurada o de base de datos. La columna de la izquierda suele contener etiquetas que piden alguna información. La columna de la derecha contiene los widgets de entrada como ediciones de líneas (QLineEdit), cajas de giro (QSpinBox), ediciones de fechas (QDateEdit), cajas de combo (QComboBox), etc.

La ventaja de usar este layout sobre QGridLayout es que es más simple de trabajar cuando sólo necesitas dos columnas. El siguiente screencast lo muestra en acción –

En este ejemplo, primero añadimos cuatro nuevas etiquetas. Estas etiquetas contendrán información sobre los datos que necesitas que se introduzcan o editen en la segunda columna. En este caso, la segunda columna contiene sus etiquetas de color de las pruebas, pero por lo general esta columna se utilizará para colocar widget de entrada como ediciones de línea, cajas de giro, cuadros combinados, y así sucesivamente.

Disposiciones de Splitter

Los Splitters son objetos contenedores que organizan los widgets horizontal o verticalmente en dos paneles redimensionables. Con este tipo de disposición, puedes ajustar libremente la cantidad de espacio que ocupa cada panel en tu formulario, manteniendo constante el espacio total utilizado. En Qt los layouts splitter se gestionan mediante QSplitter.

Aunque los splitters son técnicamente un widget contenedor (no un layout), Qt Designer los trata como layouts que pueden ser aplicados a widgets existentes. Para colocar un grupo de widgets en un divisor, primero los seleccionas como normalmente y luego aplicas el divisor utilizando el botón apropiado de la barra de herramientas, el atajo de teclado o la opción del menú contextual en Qt Designer Echa un vistazo al siguiente screencast –

En este ejemplo, primero aplicamos un divisor horizontal a tus etiquetas. Observe que, tendrá que lanzar la vista previa del formulario si quiere ver el divisor en acción. Puede iniciar la vista previa del formulario pulsando Ctrl+R. Más adelante, aplicaremos un divisor vertical a las etiquetas. En cada caso, puede cambiar libremente el tamaño del widget utilizando el puntero del ratón.

Construir otros diseños con Qt Designer

Hay algunas cosas más que puede hacer con los diseños en Qt Designer. Por ejemplo, suponga que necesita añadir un nuevo widget a un diseño existente, o utilizar diseños anidados para organizar sus widgets en una GUI compleja. En las siguientes secciones, cubriremos cómo realizar algunas de estas tareas.

Inserción de Objetos en un Diseño Existente

Los objetos pueden ser insertados en un diseño existente arrastrándolos desde sus posiciones actuales y soltándolos en la posición requerida en el diseño. Se muestra un cursor azul en el diseño cuando se arrastra un objeto sobre él para indicar dónde se colocará el objeto.

Mira el siguiente screencast donde colocamos tres de nuestras etiquetas en un layout vertical y luego nos damos cuenta de que dejamos la etiqueta azul fuera del juego –

También es posible mover o cambiar la posición de un determinado widget en un layout. Para ello, basta con arrastrar y soltar el widget a su nueva posición en el diseño. Recuerda seguir la línea azul para hacerlo bien.

Anidar diseños para construir GUIs complejas

También puedes anidar gestores de diseño uno dentro de otro usando Qt Designer. El diseño interior se convierte entonces en un hijo del diseño adjunto. Haciendo esto puedes crear iterativamente interfaces de usuario muy complejas, pero bien estructuradas.

Los diseños pueden ser anidados tan profundamente como necesites. Por ejemplo, para crear un diálogo con una fila horizontal de botones en la parte inferior y un montón de otros widgets alineados verticalmente en el formulario, puede utilizar un diseño horizontal para los botones y un diseño vertical para el resto de los widgets, y luego envolver estos diseños en un diseño vertical.

Volviendo a nuestro ejemplo de las etiquetas de colores, el siguiente screencast muestra el proceso de organización de un diseño anidado en Qt Designer –

En este ejemplo, primero organizamos los widgets en par utilizando un diseño horizontal. Luego anidamos ambos layouts en un tercer layout, pero esta vez vertical. Los diseños se pueden anidar tan profundamente como sea necesario.

Cuando se selecciona un diseño hijo, su diseño padre se puede seleccionar pulsando la tecla Shift mientras se hace clic en él. Esto le permite seleccionar rápidamente un diseño específico en una jerarquía, lo que de otro modo sería difícil de hacer debido al pequeño marco que delimita cada gestor de diseño.

Configuración de un diseño de nivel superior o principal

El último paso que debe realizar al construir un formulario es combinar todos los diseños y el widget en un diseño principal o de nivel superior. Este diseño está en la cima de la jerarquía de todos los demás diseños y widgets. Es vital que tengas un diseño porque si no los widgets de tu formulario no cambiarán de tamaño cuando cambies el tamaño de la ventana.

Para establecer el diseño principal sólo tienes que hacer clic con el botón derecho del ratón en cualquier lugar de tu formulario que no contenga un widget o un diseño. A continuación, puede seleccionar Lay Out Horizontally, o Lay Out Horizontally, o también puede seleccionar Lay Out in a Grid como en el siguiente screencast –

En este ejemplo, utilizamos cada uno de los tres diseños diferentes como nuestro diseño de nivel superior a su vez. Primero utilizamos un diseño horizontal, luego rompemos el diseño y utilizamos un diseño vertical. Por último, establecemos un diseño de cuadrícula. El diseño de nivel superior que elijas para tu diseño de nivel superior dependerá de los requisitos específicos de tu aplicación.

Es importante que tengas en cuenta que los diseños de nivel superior no son visibles como un objeto separado en el Inspector de objetos. Sus propiedades aparecen debajo de las propiedades del widget del formulario principal. Además, ten en cuenta que si tu formulario no tiene un diseño, su icono aparece con un círculo rojo en el Inspector de Objetos. Otra forma de comprobar si has establecido correctamente un layout principal es intentar redimensionar el formulario, si un layout principal está en su lugar, entonces tus widgets deberían redimensionarse en consecuencia.

Cuando empieces a construir aplicaciones más complejas, descubrirás que otros widgets contenedores también requieren que establezcas un layout de nivel superior, por ejemplo QGroupBox, QTabWidget, QToolBox, y así sucesivamente. Para ello, puedes ejecutar los mismos pasos que has visto aquí, pero esta vez tienes que hacer clic con el botón derecho del ratón en el widget contenedor.

Diseño de un diálogo con Qt Designer

Para un último y más completo ejemplo de cómo utilizar los layouts con Qt Designer, vamos a crear ahora un diálogo para introducir cierta información en una aplicación de base de datos. Supongamos que estamos construyendo un software de gestión de recursos humanos para nuestra empresa Poyqote Inc. Ahora estamos trabajando en un formulario para introducir algunos datos sobre nuestros empleados. El diálogo debe presentar a los usuarios una interfaz gráfica de usuario amigable para introducir los siguientes datos:

• Nombre del empleado
• Fecha de contratación
• Departamento
• Posición
• Salario anual
• Descripción del puesto de trabajo

¿Cuál es la mejor manera de maquetar este formulario? Hay muchas opciones, y es en gran medida una cuestión de gusto y práctica. Pero aquí estamos usando un QFormLayout para organizar los campos de entrada en dos columnas con etiquetas a la izquierda y cajas de entrada a la derecha. El proceso de creación del diseño se muestra en el siguiente screencast –

El diálogo base se crea utilizando la plantilla Dialog with Buttons Bottom de Qt Designer. A continuación, añadimos algunas etiquetas y algún widget de entrada, incluyendo ediciones de línea, ediciones de fecha, ediciones de texto y cuadros combinados. A continuación, ponemos todos esos widgets en un diseño de formulario y, finalmente, definimos un nivel superior o diseño principal para el formulario.

El archivo .ui de diálogo terminado puede descargarse aquí.

Conclusión

Qt Designer es una potente herramienta a la hora de crear interfaces gráficas de usuario utilizando Qt. Una de sus características más sencillas y útiles es la capacidad de organizar sus widgets en diferentes tipos de diseños. Aprender a crear eficazmente diseños con Qt Designer puede disparar su productividad, especialmente cuando se crean GUIs complejas.

Este tutorial le ha guiado a través del proceso de creación de diseños personalizados con Qt Designer. Ahora ya sabe cómo sacar el máximo provecho de Qt Designer a la hora de diseñar sus GUIs.