https://www.qt.

io/

Qt – C++
Introducción
Bibliografía
• (Qt, 2020) link
• Anónimo/ Aprendiendo a programar aplicaciones gráficas en C++ con Qt5
• Lee Zhi Eng/ Hands‐On GUI Programming with C++ and Qt5/Packt>
Qt1
Framework multiplataforma orientado a objetos ampliamente usado para 
desarrollar programas que utilicen interfaz gráfica de usuario

1 https://es.wikipedia.org/wiki/Qt_(biblioteca)
¿Qué es el Qt?1
Un paquete de SDK (kit de desarrollo de software) que contiene una amplia 
gama de herramientas y bibliotecas para ayudar a los desarrolladores a 
realizar su trabajo. Estas funcionalidades que no están en C++. Para ello 
usa su propio preprocesador llamado MOC(Meta Object Compiler)

https://www.qt.io/

1 Lee Zhi Eng/ Hands‐On GUI Programming with C++ and Qt5/Packt> 
 https://www.qt.io/

Qt – C++
Entorno de consola
 Introducción Herramienta

https://www.iconfinder.com/
Introducción ‐ Programa en consola 
Solicitar un texto y pasarlo a mayúsculas
Pasos:
1. Se inicializa QtCreator
2. Seleccionamos [File],[New File or Project].  2

1
o

3. Se muestra una ventana donde se debe seleccionar: 
• [Application] ‐ [Qt Console Application]. Y luego [Choose…] 

2
1
Introducción ‐ Programa en consola 
4. Dar un nombre al proyecto(1), y el lugar donde guardarlo(2). Luego se  
pulsa [Next](3).

2 3
Introducción ‐ Programa en consola 
5. A continuación, se deja las opciones que se muestran como están, y se 
pulsa [Next]. 

Pantalla 1

Pantalla 2

Pantalla 3
Introducción ‐ Programa en consola 
6. Continuar realizando lo mismo hasta llegar a la pantalla que contiene 
el botón [Finish]. Pulsarlo para crear el proyecto. 
 Introducción ‐ Programa en consola 
7. Puedes observar el aspecto creado de forma automática y se han añadido 
al proyecto.

Ventana de 
Proyectos
Ventana de edición de código
Introducción ‐ Programa en consola 
8. Al código existente aumentar el siguiente código 

1 Librería QString

2
Librería QDebug

3 Declaración de Variable tipo Qstring
Mostrar texto en consola a través de 
qDebug()
Resumen
Click
Primer programa (QDebug)‐ consola
Resumen
Archivo de Cabecera
Primer programa (QDebug)‐ consola

Argumentos de entrada
argc tamaño del arreglo

Objeto de la clase QcoreAplication

Genera lazo infinito hasta terminar o cerrar el aplicativo
Resumen
Primer programa (QDebug)‐ consola
Qdebug
Librería: #include <QDebug>

Utilidad: Muestra en consola cualquier texto o número

Declaración de QDebug

Llamada qDebug("Hola Mundo");
 QDebug
https://www.iconfinder.com/
Clase QDebug – ideas básicas (Consola)
QDebug se usa cuando el desarrollador necesita escribir información de 
depuración o rastreo en un dispositivo, archivo, cadena o consola.
Uso básico
Librería:   #include <QDebug>
Clase QDebug – ideas básicas (Consola)

#include <QCoreApplication>
#include <QDebug>
#include <QDate>
int main(int argc, char *argv[]) {
QCoreApplication a(argc, argv);
int valor=202;
QString cadena;
qDebug()<<"El valor es= "<<valor;
qDebug()<<"El valor es= "+QString::number(valor);
qDebug("El valor es %d",valor);
qDebug()<<"La fecha es= "<<QDate::currentDate().toString();
return a.exec();
}
Clase QString – ideas básicas
QString Almacena una cadena de QChars de 16 bits (QChar corresponde a una 
unidad de código UTF‐16). Tratamiento de las cadenas.  

Librería  #include <QString>

Clase QString – ideas básicas
#include <QCoreApplication>
#include <QDebug>
int main(int argc, char *argv[]) {
QCoreApplication a(argc, argv);
QString cadena="Hola Mundo";
//añadir valores al incio
cadena.prepend("1.- ");
//anadir valores al final
cadena.append(" - Feliz");
//reemplazar cadena por otra
cadena.replace(2,0,"Buenos días");
//Remover cadenas
cadena.remove(0,14);
qDebug()<<cadena;
//tamaño cadena
cadena="Hola Mundo";
qDebug()<<cadena.length();
return a.exec();
}
Ejemplo 
#include <QCoreApplication>
#include<QDebug>
#include<QDate>
#include<QString>
int main(int argc, char *argv[]) {
QCoreApplication a(argc, argv);
int valor=34;
QString cadena="45";
qDebug()<<"El valor es= "<<valor;
qDebug("El dato es %d - valor numerico",valor);
qDebug()<<"Valor cadena es= "<<cadena;
qDebug()<<"Convertir cadena a número= "<<cadena.toInt();
qDebug()<<"numero a cadena= "<<QString::number(valor);
qDebug()<<"La fecha es= "<<QDate::currentDate().toString().toUpper();
return a.exec();
}
 QString
https://www.iconfinder.com/
Clase QString – ideas básicas
Sintaxis:
variable.propiedad

• Añadir caracteres al inicio de una cadena: prepend(cadena)
• Añadir caracteres al final de una cadena: append(cadena)
• reemplazar una cadena por otra: replace(inicio, tamaño, cadena)
• Convertir en mayúsculas toUpper(cadena);
• Buscar texto dentro de la cadena: contains(cadena) retorna verdadero si 
existe.
• Buscar texto que comienza: startsWith(cadena)
• Tamaño de la cadena: size()
Ejemplo
Ejemplo
 https://www.qt.io/

Qt – C++
Ventanas
 Introducción ‐ crear ventana
Un ejemplo podría ser crear un objeto Qwidget (padre) con dos botones 
(QPushButton) y una línea de texto editable (QLineEdit)(hijos de la 
ventana).

Qwidget
Padre
widget

Hijos
QLineEdit QPushButton QPushButton
Línea de Texto Boton 1 Boton 2

Jerarquía
Clases Qt
El número de clases de Qt es extenso, por tanto, se describen algunas de 
las mas utilizadas.
• QObject: Describe el objeto básico Qt, gestiona las signals y slots.
• QWidget: Permite crear el elemento básico de interfaz de usuario.
• QMainWindow: MainWindow (ventana principal de programa).
• QDialogBox: Cuadro de diálogo estándar.
• QLabel: Etiquetas de texto o imágenes.
• QLineEdit: Muestra una línea de texto.
• QTextEdit: Equivalente a  QLineEdit (muestra texto ‐ formato HTML).
• QPushButton: Botón.
• QMessageBox: Message Box.
• QLayout: Gestión de la geometría de los widgets.
Qt MainWindow Framework
Proporciona un marco de trabajo, para construir una GUI. QMainWindow
tiene su propio layout al que se puede añadir QToolBars, QDockWidgets, un
QMenu, y una QStatusBar.

Salvador Alemany Garrido Introducción a Qt
Entorno

http://profesores.elo.utfsm.cl/~agv/elo329/1s17/lectures/C++/DesarrolloEnQt.pdf
Ejemplo
Elementos1
Un proyecto se conforma de los siguientes elementos:
• Headers: Conjunto de archivos con extensión .h (definiciones de las clases).
• Sources: Conjunto de archivos con extensión .cpp (implementaciones de los métodos).
• Forms: Conjunto de archivos con extensión .ui (archivos con formato XML ‐ contienen las 
características de los distintos elementos gráficos).
• Archivo .pro: Es el archivo que contiene las directivas de compilación (qmake ‐ encargado 
degenerar makefiles)

1 http://profesores.elo.utfsm.cl/~agv/elo329/1s17/lectures/C++/DesarrolloEnQt.pdf
 Habilitar Edit Signals/Slots 1
Introducción

1.Botón Edit Signals/Slots
• lineEdit
• Labet
Deshabilitar Edit Signals/Slots 1
Introducción
Habilitar Edit Buddies 2

2.Botón Edit Budidies (mover teclado)

• lineEdit
• Labet

Deshabilitar Edit Buddies 2
QLayout
Acomodar los componentes de las ventanas de mejor manera
Edit tab order Edit tab order

Acomodar el orden de acceso a los elementos
Introducción

Programa: solicitar un texto y pasarlo a mayúsculas
Pasos:
6. A continuación, dejar las opciones que presenta tal y como están, y 
pulsar [Next]. 

Pantalla 1

Pantalla 2

Pantalla 3
Introducción

Programa: solicitar un texto y pasarlo a mayúsculas
Pasos:
7. Seguir realizando lo mismo hasta llegar a la pantalla que contiene el 
botón [Finish]. Pulsarlo para crear el proyecto. 
 Introducción

Programa: solicitar un texto y pasarlo a mayúsculas
Pasos:
8. En la ventana projects, abrir [Forms] y dar doble‐click sobre 
mainwindow.ui (diseño del formato de la ventana del programa) 

Ventana de 
Proyectos
1 Ventana de edición de código 

2
Introducción

Programa: solicitar un texto y pasarlo a mayúsculas
Pasos:
9. En la ventana projects, abrir [Forms] y dar doble‐click sobre 
mainwindow.ui.

2
Introducción

Programa: solicitar un texto y pasarlo a mayúsculas
Pasos:
10. Se mostrara la ventana de diseño del formulario 

Widgets Diseño de Formulario

Propiedades
Introducción

Programa: solicitar un texto y pasarlo a mayúsculas
Pasos:
10. Antes de comenzar, se debe tener claro el aspecto visual 

Titulo
Botón

Etiqueta

Cuadro de Texto
Introducción

Programa: solicitar un texto y pasarlo a mayúsculas
Pasos:
11. Se tienen que seleccionar los diferentes elementos en la ventana 

2 Soltar

1 Arrastrar
Introducción

Programa: solicitar un texto y pasarlo a mayúsculas
Pasos:
11. Se tienen que seleccionar los diferentes elementos en la ventana 
Introducción

Programa: solicitar un texto y pasarlo a mayúsculas
Pasos:
12. Programar en el evento 
Introducción

Programa: solicitar un texto y pasarlo a mayúsculas
Pasos:
1. Inicializar QtCreator
2. Seleccionar [File],[New File or Project].  2

1
o

3. En la ventana que aparece, seleccionar: 
4. [Application] y [Qt Widgets Application]. A continuación [Choose…] 
2
1
Introducción

Programa: solicitar un texto y pasarlo a mayúsculas
Pasos:
5. Dar un nombre al proyecto, y la ubicación donde guardarlo. Finalizar  
pulsando [Next] 

2 3
Widgets y Layouts
Bibliografía 
• Anónimo/ APRENDA Qt4 DESDE HOY MISMO/ Octubre 
de 2010
Widgets y Layouts

Una interfaz gráfica muestra al

usuario ventanas(elementos) con los
que puede interactuar. Los elementos  
gráficos básicos que dividiremos en 2 
tipos: 
• Widgets 
• Layouts
widgets
Son elementos gráficos que se 
dibujan dentro de una ventana.
Ejemplo:
• un botón
• una etiqueta
• un combobox
Layout 
Son componente que se usa 
para disponer 
espacialmente los widgets 
dentro de la ventana 
(organizar su posición).

Ejemplo:
• Layout Vertical
• Layout Horizontal
• Layout Grid
• Layout Form
Widgets y Layouts

Layout

Widgets