Qt Tutorial de introducción

Tutorial de introducción al uso del framework Qt 5.x enfocado en la creación de Interfaces Gráficas de Usuario (GUI) en este primer documento estudiaremos las ventanas y sus diversos componentes, aprenderemos a mostrarlas, configurarlas, añadir elementos en ella y demás, para este propósito utilizaremos la clase QWidget, la cuál es la base para todos los elementos de la UI en el framework.

Nuestro primer programa, creando una ventana simple.

#include <QApplication>
#include <QWidget>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    QWidget ventana;
    ventana.resize(800, 300);
    ventana.setWindowTitle("Qt 5.x :: My primera ventana");
    ventana.show();

    return a.exec();
}

Lo primero que debemos observar es el objeto QApplication, este es el encargado de manejar todo lo respectivo a las GUIs, inicialización, destrucción, manejo de eventos, muchos cosas más, usando el método exec() iniciamos el bucle de eventos y esperamos ha que termine la aplicación.

La clase QWidget representa una ventana, en nuestro ejemplo usamos los siguientes métodos para configurarla, resize() cambia el tamaño, setWindowTile("...") establece el título, y show() muestra la ventana, con lo que hemos hecho tenemos esto:

Añadir icono a la ventana

Lo primero que haremos será añadir un archivo de recursos, para ello, damos clic derecho sobre el proyecto y presionamos la opción Add New... en la ventana que aparece seleccionamos Qt | Qt Resource File, presionamos Choose... y en la ventana siguiente le damos un nombre y ubicación al archivo.

Ahora añadimos la imagen que utilizaremos como icono, en nuestro caso un archivo PNG existente, para hacerlo damos clic derecho sobre el archivo que acabamos de crear y seleccionamos Add Existing Files... esta acción abre un cuadro de dialogo que nos permite ubicar el icono o imagen que deseamos añadir al proyecto.

Para utilizar este icono primero añadimos #include <QIcon> y escribimos el siguiente código:

ventana.setWindowIcon(QIcon(":/icon/designer.png"));

Agregar elementos de la UI

Para añadir elementos de la UI reorganizaremos el código y trabajaremos con clases, los primeros componentes que veremos son: el botón y las etiquetas de texto, nos centraremos mas que nada en cómo añadirlas a la ventana, más adelante planeamos escribir tutoriales para cada uno de los componentes que podemos utilizar en Qt 5.x.

#include <QApplication>
#include <QWidget>
#include <QIcon>
#include <QPushButton>
#include <QLabel>
#include <QFont>

class Ventana : public QWidget
{
public:
    Ventana(QWidget *parent = 0);
};

Ventana::Ventana(QWidget *parent) : QWidget(parent)
{
    QPushButton* btn = new QPushButton("Salir", this);
    btn->setGeometry(340, 160, 250, 30);

    connect(btn, &QPushButton::clicked, this, &QWidget::close);

    QLabel* lbl = new QLabel(this);
    lbl->setGeometry(130, 10, 300, 30);
    lbl->setFont(QFont("Segoe UI", 12));
    lbl->setText("Tutor de programación <b>Qt 5.x</b> 2017");
}

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);

    Ventana ventana;
    ventana.resize(600, 200);
    ventana.setWindowIcon(QIcon(":/icon/designer.png"));
    ventana.setWindowTitle("Qt 5.x :: My primera ventana");
    ventana.show();

    return app.exec();
}

Para empezar debemos extender la clase QWidget, con ella representaremos nuestra ventana, del mismo modo que lo hicimos anteriormente, salvo que esta vez el código está en la siguiente clase.

class Ventana : public QWidget
{
public:
    Ventana(QWidget *parent = 0);
};

En el constructor de esta clase comenzamos a ingresar los componentes de la UI, de esta manera:

Ventana::Ventana(QWidget *parent) : QWidget(parent)
{
    QPushButton* btn = new QPushButton("Salir", this);
    btn->setGeometry(340, 160, 250, 30);

    connect(btn, &QPushButton::clicked, this, &QWidget::close);

    QLabel* lbl = new QLabel(this);
    lbl->setGeometry(130, 10, 300, 30);
    lbl->setFont(QFont("Segoe UI", 12));
    lbl->setText("Tutor de programación <b>Qt 5.x</b> 2017");
}

Para agregar un botón a la ventana usamos la clase QPushButton, en su constructor indicamos el texto que mostrará el mismo y el QWidget al que pertenece, es decir, en nuestro caso la ventana sobre la que se posicionará, para ubicar el botón usamos el método setGeometry(x, y, w, h) con él establecemos la posición (x, y) del componente y sus dimensiones (ancho, alto).

QPushButton* btn = new QPushButton("Salir", this);
btn->setGeometry(340, 160, 250, 30);

La etiqueta de texto la creamos con la clase QLabel en su constructor indicamos la ventana en la que se ubicará, pudimos haber indicado también el texto, usando setGeometry() posicionamos el componente, del mismo modo que con el botón, setFont() utiliza un objeto QFont para establecer la fuente, además usamos setText() para cambiar el texto que muestra la etiqueta.

QLabel* lbl = new QLabel(this);
lbl->setGeometry(130, 10, 300, 30);
lbl->setFont(QFont("Segoe UI", 12));
lbl->setText("Tutor de programación <b>Qt 5.x</b> 2017");

Obtenemos el resultado:

Para finalizar este tutorial vamos a darle funcionalidad al botón, cuando lo presionemos queremos que la ventana se cierre, para ello requerimos el siguiente código:

connect(btn, &QPushButton::clicked, this, &QWidget::close);

Usando connect() podemos enlazar el evento clicked del botón, este se produce cuando hacemos clic sobre el botón, los primeros dos parámetros indican el componente y el evento que deseamos conectar, los últimos dos parámetros establecen el objetivo, en nuestro caso el QWidget que representa la ventana y el método que se ejecutará al producirse el evento, &QWidget::close el cuál cierra la ventana, dedicaremos un tutorial a explicar este mecanismo.

Qt Creator Project: introducción.zip