Ahora vamos a hacer un ejemplo que nos permita utilizar en más profundidad las señales y vamos a introducirnos en el uso de layout.
La aplicación consiste en 3 widget un QSpinBox, un QSlider y un QWidget. Qwidget va a ser la ventana de la aplicación. Como es de esperar QSpinBox y QSlider se van a dibujar dentro de QWidget. Por lo tanto podemos afirmar que QWidget es contenedor de QSpinBox y QSlider. Veamos el código:
#include <QApplication>
#include <QHBoxLayout>
#include <QSlider>
#include <QSpinBox>
int main(int argc, char *argv[])
{
QApplication app(argc, argv);
QWidget *window = new QWidget;
window->setWindowTitle("Enter Your Age");
QSpinBox *spinBox = new QSpinBox;
QSlider *slider = new QSlider(Qt::Horizontal);
spinBox->setRange(0, 130);
slider->setRange(0, 130);
QObject::connect(spinBox, SIGNAL(valueChanged(int)), slider, SLOT(setValue(int)));
QObject::connect(slider, SIGNAL(valueChanged(int)), spinBox, SLOT(setValue(int)));
spinBox->setValue(35);
QHBoxLayout *layout = new QHBoxLayout;
layout->addWidget(spinBox);
layout->addWidget(slider);
window->setLayout(layout);
window->show();
return app.exec();
}
Luego de crear la ventana se puede ver que se puede establecer el texto de la barra de titulo. Después creamos los dos componentes QSpinBox y QSpinBox y configuramos el rango de 0 a 130. Además indicamos a Qt que si spinBox lanza la señal valueChanged (que indica que el valor del componente ha cambiado) ejecute la función setValue de slider.
QHBoxLayout es un layout, los layouts nos permiten configurar fácilmente la disposición de los componentes en una ventana. QHBoxLayout es un layout que organiza los componentes de forma horizontal. Agregamos QSpinBox y QspinBox al layout y luego agregamos el layout a la ventana para que se muestre.
Qt nos brinda 3 grandes tipos de layouts:
- QHBoxLayout que permite organizar los componentes de forma horizontal y de izquierda a derecha.
- QVBoxLayout que permite organizar los componentes de forma vertical y de arriba a abajo.
- QGridLayout organiza los componentes como una grilla.
Con el método setLayout indicamos el layout a la ventana. Como se deben imaginar es posible indicar un árbol de componentes y de esta forma una ventana puede tener diferentes layouts.
