Conozca Qt Widgets Designer

Iniciar Designer

Una vez que hayas instalado Qt, puedes iniciar Qt Widgets Designer del mismo modo que cualquier otra aplicación en el host de desarrollo. También puede iniciar Qt Widgets Designer directamente desde Qt Creator. Qt Creator abre automáticamente todos los archivos .ui en el Qt Widgets Designer integrado, en modo Diseño.

En general, el Qt Widgets Designer integrado contiene las mismas funciones que el Qt Widgets Designer independiente. Para obtener más información sobre las diferencias, consulte el manualQt Creator .

Si tiene formularios grandes que no caben en el modo de diseño de Qt Creator, puede abrirlos en el diseñador independiente Qt Widgets Designer.

La interfaz de usuario

Cuando se utiliza como aplicación independiente, la interfaz de usuario de Qt Widgets Designer puede configurarse para proporcionar una interfaz de usuario multiventana (el modo predeterminado) o puede utilizarse en modo de ventana acoplada. Cuando se utiliza desde un entorno de desarrollo integrado (IDE), sólo está disponible la interfaz de usuario multiventana. Puede cambiar de modo en el cuadro de diálogo Preferencias del menú Edición.

En el modo multiventana, puede organizar cada una de las ventanas de herramientas para adaptarlas a su estilo de trabajo. La ventana principal consta de una barra de menús, una barra de herramientas y un cuadro de widgets que contiene los widgets que puede utilizar para crear su interfaz de usuario.

Qt Widgets Designer mostrando todos los componentes que se pueden añadir a la ventana" src="images/designer-main-window.png" title="Captura de pantalla del Qt Widgets Designer mostrando todos los componentes que se pueden añadir a la ventana"/>

Qt Widgets Ventana principal del Diseñador La barra de menús proporciona todas las acciones estándar para gestionar formularios, utilizar el portapapeles y acceder a la ayuda específica de la aplicación. También se puede acceder al modo de edición actual, a las ventanas de herramientas y a los formularios en uso a través de la barra de menús. La barra de herramientas muestra las acciones habituales que se utilizan al editar un formulario. También se puede acceder a ellas a través del menú principal. El cuadro de widgets proporciona widgets y diseños comunes que se utilizan para diseñar componentes. Están agrupados en categorías que reflejan sus usos o características.

La mayoría de las funciones de Qt Widgets Designer son accesibles a través de la barra de menús, la barra de herramientas o el cuadro de widgets. Algunas funciones también están disponibles a través de menús contextuales que pueden abrirse sobre las ventanas de formulario. En la mayoría de las plataformas, se utiliza el botón derecho del ratón para abrir los menús contextuales.

Qt Widgets Designer" src="images/designer-widget-box.png" title="Captura de pantalla que muestra todos los componentes de widgets para Qt Widgets Designer"/>

Qt Widgets Cuadro de widgets del diseñador La caja de widgets proporciona una selección de widgets Qt estándar, diseños y otros objetos que pueden utilizarse para crear interfaces de usuario en los formularios. Cada una de las categorías de la caja de widgets contiene widgets con usos similares o características relacionadas. Puede visualizar todos los objetos disponibles en una categoría haciendo clic en el asa situada junto a la etiqueta de la categoría. En el modo de edición de widgets, puede añadir objetos a un formulario arrastrando los elementos apropiados del cuadro de widgets al formulario y soltándolos en las ubicaciones requeridas. Qt Widgets El Diseñador ofrece una función de bloc de notas que permite agrupar los objetos más utilizados en una categoría independiente. La categoría del bloc de notas puede rellenarse con cualquier widget que se muestre actualmente en un formulario, arrastrándolos desde el formulario y soltándolos en la caja de widgets. Estos widgets pueden utilizarse del mismo modo que cualquier otro widget, pero también pueden contener widgets hijos. Abre un menú contextual sobre un widget para cambiar su nombre o eliminarlo del bloc de notas.

El concepto de diseño en Qt

Un diseño se utiliza para organizar y gestionar los elementos que componen una interfaz de usuario. Qt proporciona una serie de clases para manejar automáticamente los layouts - QHBoxLayout, QVBoxLayout, QGridLayout, y QFormLayout. Estas clases resuelven el reto de disponer los widgets automáticamente, proporcionando una interfaz de usuario que se comporta de forma predecible. Afortunadamente, no es necesario conocer las clases de diseño para organizar los widgets con Qt Widgets Designer. En lugar de ello, seleccione una de las opciones Lay Out Horizontally, Lay Out in a Grid, etc., del menú contextual.

Cada widget Qt tiene un tamaño recomendado, conocido como sizeHint(). El gestor de diseño intentará cambiar el tamaño de un widget para que se ajuste a su tamaño recomendado. En algunos casos, no es necesario tener un tamaño diferente. Por ejemplo, la altura de un QLineEdit es siempre un valor fijo, dependiendo del tamaño y estilo de la fuente. En otros casos, puede que necesites que el tamaño cambie, por ejemplo, la anchura de un QLineEdit o la anchura y altura de los widgets de la vista de elementos. Aquí es donde entran en juego las restricciones de tamaño de los widgets: minimumSize y maximumSize. Son propiedades que puedes establecer en el editor de propiedades. Por ejemplo, para anular el valor predeterminado sizeHint(), basta con establecer minimumSize y maximumSize en el mismo valor. Alternativamente, para utilizar el tamaño actual como valor de restricción de tamaño, elija una de las opciones de Restricción de tamaño del menú contextual del widget. El diseño se asegurará de que se cumplan esas restricciones. Para controlar el tamaño de tus widgets mediante código, puedes reimplementar sizeHint() en tu código.

La siguiente captura de pantalla muestra el desglose de una interfaz de usuario básica diseñada utilizando una cuadrícula. Las coordenadas en la captura de pantalla muestran la posición de cada widget dentro de la rejilla.

Para visualizarlo, imagina el diseño como una caja que se encoge todo lo posible, intentando apretar tus widgets en una disposición ordenada y, al mismo tiempo, maximizar el uso del espacio disponible.

Los layouts de Qt te ayudan cuando:

1. Redimensionar la interfaz de usuario para ajustarla a diferentes tamaños de ventana.
2. Redimensionar elementos de la interfaz de usuario para adaptarlos a diferentes localizaciones.
3. Organizar los elementos para que se adhieran a las directrices de diseño para diferentes plataformas.

Así, ya no tendrás que preocuparte de reorganizar los widgets para diferentes plataformas, configuraciones e idiomas.

El siguiente ejemplo muestra cómo las diferentes localizaciones pueden afectar a la interfaz de usuario. Cuando una localización requiere más espacio para cadenas de texto más largas, el diseño de Qt se escala automáticamente para adaptarse a ello, al tiempo que garantiza que la interfaz de usuario tenga un aspecto presentable y siga cumpliendo las directrices de la plataforma.

El proceso de disposición de los widgets consiste en crear la jerarquía de disposición estableciendo el menor número posible de restricciones de tamaño para los widgets.

Para obtener una perspectiva más técnica sobre las clases de diseño de Qt, consulte la documentación sobre gestión de diseño.