Introducción rápida a Qt Widgets Designer

El uso de Qt Widgets Designer implica cuatro pasos básicos:

1. Elegir el formulario y los objetos
2. Coloca los objetos en el formulario
3. Conectar las señales a las ranuras
4. Previsualizar el formulario

Supongamos que quieres diseñar un pequeño widget (ver captura de pantalla anterior) que contenga los controles necesarios para manipular valores de Rojo, Verde y Azul (RGB) - un tipo de widget que se puede ver por todas partes en los programas de manipulación de imágenes.

Elegir un formulario Empiece eligiendo Widget en el diálogo Nuevo formulario.

Colocación de widgets en un formulario Arrastre tres etiquetas, tres cajas giratorias y tres deslizadores verticales a su formulario. Para cambiar el texto por defecto de la etiqueta, simplemente haga doble clic sobre ella. Puede colocarlos como desee.

Para asegurarte de que se disponen exactamente así en tu programa, necesitas colocar estos widgets en un diseño. Lo haremos en grupos de tres. Seleccione la etiqueta "ROJO". A continuación, mantenga pulsada la tecla Ctrl mientras selecciona el cuadro giratorio y el control deslizante correspondientes. En el menú Formulario, selecciona Distribuir en cuadrícula.

Repita el paso para las otras dos etiquetas junto con sus correspondientes cuadros de giro y controles deslizantes.

El siguiente paso es combinar los tres diseños en un diseño principal. El diseño principal es el diseño del widget de nivel superior (en este caso, QWidget). Es importante que el widget de nivel superior tenga un diseño; de lo contrario, los widgets de la ventana no cambiarán de tamaño cuando se cambie el tamaño de la ventana. Para establecer el diseño, haz clic con el botón derecho del ratón en cualquier parte de tu formulario, fuera de los tres diseños separados, y selecciona Diseño horizontal. Alternativamente, también puede seleccionar Disposición en cuadrícula - seguirá viendo la misma disposición (mostrada a continuación).

Cuando haga clic en el control deslizante y lo arrastre hasta un valor determinado, querrá que el cuadro de giro muestre la posición del control deslizante. Para lograr este comportamiento, necesita conectar la señal valueChanged() del deslizador a la ranura setValue() de la caja de giro. También necesitas hacer las conexiones inversas, por ejemplo, conectar la señal valueChanged() de la caja de giro a la ranura setValue() del deslizador.

Para ello, debe cambiar al modo Editar señales/ranuras, pulsando F4 o seleccionando Editar señales/ranuras en el menú Edición.

Conectar señales a ranuras Pulse sobre el deslizador y arrastre el cursor hacia el cuadro de giro. Aparecerá el cuadro de diálogo Configurar conexión, que se muestra a continuación. Seleccione la señal y la ranura correctas y pulse Aceptar.

Repita el paso (en orden inverso), haciendo clic en el cuadro de giro y arrastrando el cursor hacia el deslizador, para conectar la señal valueChanged() del cuadro de giro a la ranura setValue() del deslizador.

Puede utilizar la siguiente captura de pantalla como guía para seleccionar la señal y la ranura correctas.

Ahora que has conectado correctamente los objetos para el componente "ROJO" del Controlador RGB, haz lo mismo para los componentes "VERDE" y "AZUL".

Dado que los valores RGB oscilan entre 0 y 255, necesitamos limitar el cuadro de giro y el deslizador a ese rango en particular.

Configuración de las propiedades del widget Haga clic en el primer cuadro giratorio. Dentro del Editor de Propiedades, verá las propiedades de QSpinBox. Introduzca "255" para la propiedad maximum. A continuación, haga clic en el primer control deslizante vertical, verá las propiedades de QAbstractSlider. Introduzca también "255" para la propiedad maximum. Repita este proceso para el resto de cajas giratorias y deslizadores.

Ahora, previsualizamos tu formulario para ver cómo quedaría en tu aplicación - pulsa Ctrl + R o selecciona Previsualizar en el menú Formulario. Prueba a arrastrar el deslizador - el cuadro de giro reflejará también su valor (y viceversa). Además, puede cambiar su tamaño para ver cómo los diseños que se utilizan para gestionar los widgets hijo, responden a diferentes tamaños de ventana.