Looking for qt Keywords? Try Ask4Keywords

QtEmpezando con Qt


Observaciones

Como se indica en la documentación oficial , Qt es un marco de desarrollo de aplicaciones multiplataforma para computadoras de escritorio, integradas y móviles. Las plataformas compatibles incluyen Linux, OS X, Windows, VxWorks, QNX, Android, iOS, BlackBerry, Sailfish OS y otros.

Esta sección proporciona una descripción general de qué es Qt y por qué un desarrollador puede querer usarlo.

También debe mencionar cualquier tema importante dentro de Qt, y vincular a los temas relacionados. Dado que la documentación para qt es nueva, es posible que deba crear versiones iniciales de esos temas relacionados.

Versiones

Versión Fecha de lanzamiento
Qt 3.0 2001-10-16
Qt 3.3 2004-02-05
Qt 4.1 2005-12-20
Qt 4.8 2011-12-15
Qt 5.0 2012-12-19
Qt 5.6 2016-03-16
Qt 5.7 2016-06-16
Qt 5.8 2017-01-23
Qt 5.9 2017-05-31

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:

introduzca la descripción de la imagen aquí

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

introduzca la descripción de la imagen aquí

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

introduzca la descripción de la imagen aquí

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 ++.

introduzca 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.

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

introduzca la descripción de la imagen aquí

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

introduzca la descripción de la imagen 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)

introduzca la descripción de la imagen aquí

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:

introduzca 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 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á:

introduzca la descripción de la imagen aquí

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:

introduzca 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 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:

introduzca la descripción de la imagen aquí

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

introduzca 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 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:

introduzca 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 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.

introduzca la descripción de la imagen aquí

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).

introduzca 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. 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:

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

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
 

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.

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 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:

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

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:

Instalador Qt

Seleccione una ruta para instalar las bibliotecas y herramientas Qt

ruta de instalación

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

Caracteristicas qt

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.

introduzca la descripción de la imagen aquí