En este tutorial explicamos diseñar tu interfaz en Qt Designer Python e importarla en tu código de Python. Qt Designer es una herramienta para crear interfaces de usuario de manera fácil y rápida, usando widgets, que solo se arrastran y acomodan. Es una manera de crear la interfaz grafica de manera visual, sin usar código.
Instalando Qt Designer
Primero necesitamos tener instalado Qt Designer. Puedes buscarlo en Google, o bien te dejamos algunos enlaces:
De la página oficial, solo necesitas crear una cuanta al momento de instalarlo.
Página principal, donde puedes leer las obligaciones y consideraciones, es un programa open soruce.
https://www.qt.io/download-open-source
En el siguiente enlace esta la descarga desde la página oficial.
https://www.qt.io/download-qt-installer
Y te dejamos un link más, desde otra página que encontramos en internet.
https://build-system.fman.io/qt-designer-download
Configurando UI en QT designer.
Abrimos el programa QT Designer, y veremos una ventana en medio con dos barras de opciones en los lados.
La ventana de en medio nos pregunta qué tipo de UI vamos a crear. Hay algunas opciones, en nuestro caso vamos a seleccionas MainWindow.
Es importante seleccionar MainWIndow y no otra opción, por lo menos para este ejemplo. Ya que más adelante importaremos datos de la MainWIndow.
Luego nos aparece una ventana en medio. Y en el lado izquierdo ubicamos los widgets, los cuales solo es cuestión de arrastrarlos a la ventana de en medio para comenzar a crear nuestro diseño.
Podemos encontrar varios widget, como Label que es un texto, diferentes botones, listas, layouts, tablas, etc. Tenemos todo para crear nuestra interfaz gráfica de manera sencilla.
En el panel de la derecha, encontramos las características de cada elemento. Es decir, si arrastramos un Label a la ventana y lo seleccionamos, en el lado derecho veremos sus propiedades. Como nombre del objeto, el texto que contiene, el tamaño, etc.
Como ves, es un software muy sencillo de usar.
Diseño sencillo de la interfaz gráfica.
En nuestro caso solo agregaremos un texto. Para esto arrastramos un Label a la ventana y le indicamos como testo “Hola mundo”. Como se ve en la siguiente imagen.
Una vez que la creamos, vamos a guardar la UI, en archivo y guardar. Le daremos el nombre de “ui_ej”, se guardará con la extensión “.ui”.
Convertir ui a Python.
Luego, necesitamos convertir la interfaz gráfica creada por QT Designer, a un archivo de Python con terminación “.py”
Esto lo hacemos usando la consola CMD o alguna similar.
Solo la buscamos en Windows inicio como “CMD”, y la abrimos.
Luego debemos ubicarnos en la carpeta donde guardamos el archivo “ui_ej.ui”.
Nota: Algunos comandos para moverse en la consola CMD son:
- cd nombreDirectorio, con cd + el nombre de la carpeta, podras moverte a una carpeta. (Ejemplo: cd desktop, otro ejemplo: cd documentos/programas/pyqt).
- cd .., con este comando regresamos a la carpeta anterior.
- dir, puedes ver los archivos de la carpeta en la que te encuentras.
Una vez en la carpeta donde está el archivo, escribimos el siguiente comando para convertir el archivo “.ui” a uno “.py”. El nuevo nombre será: ui_ej_python.py
pyuic5 –x ui_ej.ui –o ui_ej_python.py
Nota: Puedes elegir el nombre que desees, el nombre que elegimos no nos gustó.
Podemos corroborar en el CMD que todo está bien. Solo ejecutamos con Python el nuevo archivo que acabamos de crear.
python ui_ej_python.py
Podemos abrir el código que se acaba de crear y explorar el código para entender mejor como se agregan elementos si solo usamos el código.
Nosotros usamos Geany para ejecutar y escribir el código de Python.
Python, hola mundo y código base (comentarios, ciclo for, sumas, etc).
Agregando UI al código Python.
Por ultimo vamos a crear un nuevo archivo de Python, en el cual agregaremos la interfaz que acabamos de crear. Es decir el archivo ui_ej_python.py
from ui_ej_python import *
class VentanaPrincipal(QtWidgets.QMainWindow, Ui_MainWindow):
def __init__(self, *args, **kwargs):
QtWidgets.QMainWindow.__init__(self, *args, **kwargs)
self.setupUi(self)
if __name__ == "__main__":
app = QtWidgets.QApplication([])
ventana = VentanaPrincipal ()
ventana.show()
app.exec_()
Importando UI.
Primero importamos la UI que ya diseñamos.
from ui_ej_python import *
Creando clase que contiene la UI.
Luego creamos una clase llamada VentanaPrincipal y heredamos algunas propiedades de la MainWindow, como la UI y los widgets. Por eso es importante que en QT Designer hayamos creado un “MainWindow”.
Luego, dentro de la clase “VentanaPrincipal” inicializamos un QtWidget con los elementos que heredamos de la MainWindow.
Mostrando la UI en Python.
Ahora vamos a mostrar la ventana llamando a la clase Ventana principal.
Primero agregamos el comando if, con el objetivo de evitar ejecuciones duplicadas.
Dentro del comando if, creamos una aplicación de PyQt con QtApplication, con esto podremos controlar el ciclo del programa.
Luego creamos una variable tipo VentanaPrincipal, que llamamos “ventana”.
Y después ejecutamos el comando show() sobre la variable “ventana”. Esto mostrará la interfaz grafica que diseñamos en Qt Designer y que heredamos a la clase VentanaPrincipal.
Al final no se nos debe olvidar agregar el comando app.exec_(). Ya que si no lo colocamos, la ventana se abrirá y cerrará inmediatamente.
Lo siguiente es hacer mejores diseños y darle la lógica con Python.