Qt Tutorial
Empezando con Qt

Observaciones

Versiones

Instalación y configuración en Windows y Linux

Descargar Qt para Linux Open Source Version

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

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

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

Recuerde cambiar 'x' para la versión real del instalador. Luego ejecuta el instalador

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

Descargar Qt para Windows Open Source Version

Vaya a https://www.qt.io/download-open-source/ . La siguiente captura de pantalla muestra la página de descarga en 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 archivo 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-xxxexe o qt-opensource-windows-x86-msvc2015_32-xxxexe (donde xxx 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 xxx para Windows de 32 bits (MinGW xxx, 1.2 GB) en Windows Host.

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

Instalar Qt en cualquier sistema operativo.

Una vez que haya descargado Qt y haya 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 parecer un poco diferentes. Las capturas de pantalla proporcionadas aquí son de Linux.

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

Seleccione una ruta para instalar las bibliotecas y herramientas Qt

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

Después de descargar y terminar 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.

Hola Mundo

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

Esto representa el programa Qt más simple posible.

En primer lugar necesitamos un archivo de proyecto:

helloworld.pro

QT       += core gui

greaterThan(QT_MAJOR_VERSION, 4): QT += widgets

TARGET = helloworld
TEMPLATE = app

SOURCES += main.cpp

• QT se utiliza para indicar qué bibliotecas (módulos Qt) se están utilizando en este proyecto. Ya que nuestra primera aplicación es una pequeña GUI, necesitaremos QtCore y QtGui. Como Qt5 separa los QtWidgets de QtGui, necesitamos agregar greaterThan línea mayor que la compilación con Qt5.
• TARGET es el nombre de la aplicación o la biblioteca.
• PLANTILLA describe el tipo de construir. Puede ser una aplicación (aplicación), una biblioteca (lib) o simplemente subdirectorios (subdirectorios).
• FUENTES es una lista de archivos de código fuente que se utilizarán al crear el proyecto.

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

main.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'    
}

• QApplication object. 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 comando. Cuando se llama a.exec() se inicia el bucle de eventos Qt.
• Objeto QPushButton. El pulsador con la etiqueta Hello world! . 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 el directorio en el que tiene el archivo .cpp del programa. Escriba los siguientes comandos de shell para construir el programa.

qmake -project
qmake
make

Aplicación básica con QtCreator y QtDesigner.

QtCreator es, en este 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:

A continuación, elija la aplicación Proyectos-> Aplicación-> Widgets Qt

Luego puedes elegir el nombre y la ruta de tu proyecto:

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

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.

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 es necesario cambiarlas.

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

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

Ahora añadiremos un texto y un botón. Para ello, utilizaremos Qt Designer. Haga doble clic en mainwindow.ui. Ahora debería ver: (si no, y ve un archivo xml, haga clic en el botón Diseño a la izquierda)

Aquí Qt Designer! Parece bastante complicado. Pero una vez que te acostumbras, es realmente genial. Añadiremos un 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 busque la etiqueta y haga lo mismo (tiene un filtro en la parte superior izquierda donde puede escribir el objeto que está buscando).

Deberías tener algo como esto ahora:

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 que es ahora y encontrar la propiedad de texto. Aquí también puedes cambiar el nombre.

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

Eh ¿Por qué mi etiqueta y botón son así cuando corro? Es porque no hay diseño en nuestro objeto central. Por cierto, si cambia el tamaño de la ventana principal, puede ver que el objeto mantiene su lugar. Así que para solucionarlo añadiremos 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:

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 Lay out-> Lay Out verticalmente. Ahora debería ver que sus objetos están alineados verticalmente en su ventana. Entonces ahora mueva (con arrastrar y soltar nuevamente) su etiqueta y botón en el diseño. ahora deberías obtener:

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

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 cambian de tamaño.

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

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

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

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

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

Y en nuestra mainwindow.h, necesitamos agregar:

public slots:
    void whenButtonIsClicked();

Las ranuras públicas significan que este método se puede llamar cuando se recibe una señal. Conecte el enlace de la señal cuando hacemos clic en el botón y un método para llamar.

Así que ahora, si ejecutamos nuestra aplicación y hacemos clic en el botón, obtenemos:

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 forma diferente), vuelva a mainwindow.ui y haga clic con el botón derecho en el botón. Haga clic en Ir a la ranura ..., seleccione clic () y presione Aceptar.

Entonces deberías ser movido a esta función:

void MainWindow::on_pushButton_clicked()
{
}

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

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

En ello. Vaya a mainwindow.h para guardar el cambio (cuando vaya a la ranura, cree un método vinculado con la señal que solicitó. Define la función en .h pero no la guarde. Por lo tanto, debe ir al archivo y guárdelo).

Y ahora, cuando ejecuta su aplicación y presiona el botón, puede ver el nuevo mensaje (si aún ve el anterior, es que no eliminó la conexión).

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. Así que a la izquierda agrega un int que aumenta cuando pulsamos el botón.

Así que 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 correr de nuevo. Cada vez que hace clic en el botón, muestra "¡es aún más fácil!" Con el valor de _smallCounter. Entonces deberías tener algo como:

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 en la documentación de Qt.