Comenzando con Qt

Instalación y configuración en Windows y Linux

Descargar Qt para la versión de código abierto de Linux

Vaya a https://www.qt.io/download-open-source/ y haga clic en Descargar ahora, asegúrese de descargar el instalador de Qt para Linux.

Página de descarga de código abierto de Qt Linux

Se descargará un archivo con el nombre qt-unified-linux-x-online.run, luego se agregará el permiso exec

chmod +x qt-unified-linux-x-online.run

Recuerde cambiar ‘x’ por la versión actual del instalador. Luego ejecuta el instalador

./qt-unified-linux-x-online.run

Descargar Qt para la versión de código abierto de Windows

Vaya a https://www.qt.io/download-open-source/. La siguiente captura de pantalla muestra la página de descarga en Windows:

Página de descarga de código abierto de Qt Windows

Lo que debe hacer ahora depende del IDE que vaya a utilizar. Si va a utilizar Qt Creator, que se incluye en el programa de instalación, simplemente haga clic en Descargar ahora y ejecute el ejecutable.

Si va a usar Qt en Visual Studio, normalmente el botón Descargar ahora también debería funcionar. Asegúrese de que el archivo descargado se llame qt-opensource-windows-x86-msvc2015_64-x.x.x.exe o qt-opensource-windows-x86-msvc2015_32-x.x.x.exe (donde x.x.x es la versión de Qt, por ejemplo, 5.7.0). Si ese no es el caso, haga clic en Ver todas las descargas y seleccione una de las primeras cuatro opciones en Windows Host.

Si va a utilizar Qt en Code::Blocks, haga clic en Ver todas las descargas y seleccione Qt x.x.x para Windows de 32 bits (MinGW x.x.x, 1,2 GB) en Windows Host.

Una vez que haya descargado el archivo de instalación apropiado, ejecute el ejecutable y siga las instrucciones a continuación. Tenga en cuenta que debe ser administrador para instalar Qt. Si no es administrador, puede encontrar varias soluciones alternativas aquí.

Instalar Qt en cualquier sistema operativo

Una vez que haya descargado Qt y abierto el programa de instalación, el procedimiento de instalación es el mismo para todos los sistemas operativos, aunque las capturas de pantalla pueden verse un poco diferentes. Las capturas de pantalla proporcionadas aquí son de Linux.

Inicie sesión con una cuenta Qt existente o cree una nueva:

Instalador de Qt

Seleccione una ruta para instalar las bibliotecas y herramientas de Qt

ruta de instalación

Seleccione la versión de la biblioteca y las características que desea

Características Qt

Una vez finalizada la descarga y la instalación, vaya al directorio de instalación de Qt e inicie Qt Creator o ejecútelo directamente desde la línea de comandos.

ingrese la descripción de la imagen aquí

Hola Mundo

En este ejemplo, simplemente creamos y mostramos un botón pulsador en un marco de ventana en el escritorio. El pulsador tendrá la etiqueta ¡Hola mundo!

Esto representa el programa Qt más simple posible.

En primer lugar, necesitamos un archivo de proyecto:

holamundo.pro

QT       += core gui

greaterThan(QT_MAJOR_VERSION, 4): QT += widgets

TARGET = helloworld
TEMPLATE = app

SOURCES += main.cpp
  • QT se usa para indicar qué bibliotecas (módulos Qt) se están usando en este proyecto. Dado que nuestra primera aplicación es una GUI pequeña, necesitaremos QtCore y QtGui. Como Qt5 separa QtWidgets de QtGui, necesitamos agregar la línea greaterThan para compilarla con Qt5.
  • TARGET es el nombre de la aplicación o la biblioteca.
  • PLANTILLA describe el tipo a construir. Puede ser una aplicación (app), una biblioteca (lib) o simplemente subdirectorios (subdirs).
  • FUENTES es una lista de archivos de código fuente que se utilizarán al construir el proyecto.

También necesitamos el main.cpp que contiene una aplicación Qt:

principal.cpp

#include <QApplication>
#include <QPushButton>

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

    QPushButton button ("Hello world!");
    button.show();

    return a.exec(); // .exec starts QApplication and related GUI, this line starts 'event loop'    
}
  • Objeto QApplication. Este objeto administra los recursos de toda la aplicación y es necesario para ejecutar cualquier programa Qt que tenga una GUI. Necesita argv y args porque Qt acepta algunos argumentos de línea de comandos. Al llamar a a.exec(), se inicia el bucle de eventos de Qt.
  • Objeto QPushButton. El pulsador con la etiqueta ¡Hola mundo!. La siguiente línea, button.show(), muestra el botón pulsador en la pantalla en su propio marco de ventana.

Finalmente, para ejecutar la aplicación, abra un símbolo del sistema e ingrese al directorio en el que tiene el archivo .cpp del programa. Escriba los siguientes comandos de shell para compilar el programa.

qmake -project
qmake
make

Aplicación básica con QtCreator y QtDesigner

QtCreator es, por el momento, la mejor herramienta para crear una aplicación Qt. En este ejemplo, veremos cómo crear una aplicación Qt simple que administre un botón y escriba texto.

Para crear una nueva aplicación, haga clic en Archivo->Nuevo archivo o proyecto:

ingrese la descripción de la imagen aquí

Luego elija Proyectos->Aplicación->Aplicación Qt Widgets

ingrese la descripción de la imagen aquí

Luego puede elegir el nombre y la ruta de su proyecto:

ingrese la descripción de la imagen aquí

A continuación, puede elegir los kits que utilizará. Si no tiene ningún kit, QtCreator creará un kit con su versión de Qt y el compilador principal de su computadora. Si no tiene ningún compilador, puede instalar uno. En Windows: instale Visual Studio. En Linux/Mac: instale g++ o clang++.

ingrese la descripción de la imagen aquí

Luego puede elegir el nombre de su clase de ventana principal, la clase heredada, el nombre del archivo correspondiente a su clase de ventana principal. Si está aprendiendo o probando Qt, realmente no necesita cambiarlos.

ingrese la descripción de la imagen aquí

El último paso puede ser elegir un subproyecto de este proyecto y agregar un control de versión como git y svn. Nuevamente, si es solo para pruebas, no necesita cambiarlas.

ingrese la descripción de la imagen aquí

Luego haga clic en el botón Finalizar. Ahora deberías estar aquí:

ingrese la descripción de la imagen aquí

Esta es la base de su aplicación. si lo ejecuta ahora haciendo clic en Build->Run o ctrl+R (por defecto) verá una ventana vacía.

Ahora añadiremos un texto y un botón. para hacer eso, usaremos Qt Designer. Haga doble clic en mainwindow.ui Entonces ahora debería ver: (si no y ve algún archivo xml, haga clic en el botón Diseño a la izquierda)

ingrese la descripción de la imagen aquí

¡Aquí Qt Designer! Parece bastante complicado. Pero una vez que te acostumbras, es realmente genial. Agregaremos algo de texto y un botón. A la izquierda, está la lista de los artículos. Puede hacer clic en uno y arrastrar y soltar los objetos. Haga clic en el botón pulsador y suéltelo en la ventana. Luego busca la Etiqueta, y haz lo mismo (tienes un filtro en la parte superior izquierda donde puedes escribir el objeto que buscas).

Deberías tener algo como esto ahora:

ingrese la descripción de la imagen aquí

Al hacer doble clic en el objeto, puede cambiar el texto en ellos. O puede ver en la parte inferior derecha las propiedades del objeto en el que se encuentra ahora y encontrar la propiedad de texto. Aquí también puede cambiar el nombre.

Ahora, si guarda y ejecuta (mejor haga clic en el botón editar y luego vuelva a guardar para asegurarse de que sus modificaciones se hayan guardado), obtiene:

ingrese la descripción de la imagen aquí

¿Eh? ¿Por qué mi etiqueta y mi botón son así cuando ejecuto? Es porque no hay diseño en nuestro objeto central. Por cierto, si cambia el tamaño de su ventana principal, puede ver que los objetos mantienen su lugar. Entonces, para solucionarlo, agregaremos un diseño. Digamos un diseño vertical. Así que arrastre y suelte un diseño vertical de la lista de objetos a la izquierda. Ahora deberías ver:

ingrese la descripción de la imagen aquí

Un diseño flotante.

Así que ahora haga clic derecho en la ventana principal, en cualquier lugar excepto en la etiqueta y el botón. c\Haga clic en Disposición->Disposición vertical. Ahora debería ver que sus objetos están alineados verticalmente en su ventana. Así que ahora mueva (con arrastrar y soltar de nuevo) su etiqueta y botón en el diseño. ahora deberías obtener:

ingrese la descripción de la imagen aquí

En tu diseñador. Y si ejecutas tu aplicación:

ingrese la descripción de la imagen aquí

Aquí puedes ver tu aplicación con la etiqueta y el botón. Y si cambia el tamaño de su ventana, la etiqueta y el botón también cambiarán de tamaño.

Pero nuestro botón sigue sin hacer nada. Podemos cambiarlo de 2 maneras diferentes. El primero es conectar el botón con un método que creamos. Podemos hacerlo con el nombre del método connect. Así que volvamos a nuestro código y vayamos a mainwindow.cpp ahora agrega:

connect(ui->pushButton, SIGNAL(clicked(bool)), this, SLOT(whenButtonIsClicked()));

En el constructor de MainWindow DESPUÉS de ui->setupUI(this); que inicializa la interfaz de usuario.

Luego podemos crear MainWindow::whenButtonIsClicked() en nuestra clase .cpp que podría cambiar el texto de la etiqueta así:

void MainWindow::whenButtonIsClicked()
{
    ui->label->setText("the button has been clicked !");
}

Y en nuestro mainwindow.h, necesitamos agregar:

public slots:
    void whenButtonIsClicked();

Las franjas horarias públicas significan que se puede llamar a este método cuando se recibe una señal. conectar vincular la señal cuando hacemos clic en el botón y un método para llamar.

Entonces, si ejecutamos nuestra aplicación y hacemos clic en el botón, obtenemos:

ingrese la descripción de la imagen aquí

Lo que significa que nuestra conexión está funcionando. Pero con Qt Designer tenemos una forma aún más sencilla de hacerlo. Si desea hacer lo contrario, elimine la conexión para desconectar el botón (porque lo conectaremos de manera diferente), regrese a mainwindow.ui y haga clic con el botón derecho en el botón. Haga clic en Ir a la ranura…, seleccione clicked() y presione ok.

ingrese la descripción de la imagen aquí

Entonces deberías moverte a esta función:

void MainWindow::on_pushButton_clicked()
{
}

Esta es la función que se llamará cuando haga clic en el botón. Entonces puedes agregar

ui->label->setText("it's even easier !");

En ello. Vaya a mainwindow.h para guardar el cambio (cuando va a la ranura, crea un método vinculado con la señal que solicitó. Define la función en .h pero no la guarda. Entonces debería ir en el archivo y guárdelo).

Y ahora cuando ejecutas tu aplicación y presionas el botón, puedes ver el nuevo mensaje (si todavía ves el anterior, es que no quitaste el connect).

ingrese la descripción de la imagen aquí

También podemos agregar un int, double, etc. en nuestra etiqueta gracias a QVariant, que es una clase increíble que puede convertir muchas cosas en muchas otras cosas. Entonces, a la izquierda, agregue un int que aumente cuando presionemos el botón.

Entonces el .h:

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>

namespace Ui {
class MainWindow;
}

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    explicit MainWindow(QWidget *parent = 0);
    ~MainWindow();

public slots:
    void whenButtonIsClicked();

private slots:
    void on_pushButton_clicked();

private:
    Ui::MainWindow  *ui;
    double          _smallCounter;
};

#endif // MAINWINDOW_H

El .cpp:

#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
//    connect(ui->pushButton, SIGNAL(clicked(bool)), this, SLOT(whenButtonIsClicked()));
    _smallCounter = 0.0f;
}

MainWindow::~MainWindow()
{
    delete ui;
}

void MainWindow::whenButtonIsClicked()
{
    ui->label->setText("the button has been clicked !");
}

void MainWindow::on_pushButton_clicked()
{
    _smallCounter += 0.5f;
    ui->label->setText("it's even easier ! " + QVariant(_smallCounter).toString());
}

Y ahora, podemos guardar y ejecutar de nuevo. Cada vez que hace clic en el botón, muestra “¡es aún más fácil!” con el valor de _smallCounter. Así que deberías tener algo como:

ingrese la descripción de la imagen aquí

Este tutorial está hecho. Si desea obtener más información sobre Qt, veamos otros ejemplos y documentación de Qt en la documentación de StackOverflow o la documentación de Qt