Este tutorial requiere que Qt Creator esté instalado – puedes descargarlo gratis desde el sitio web de Qt. Vaya a https://www.qt.io/download y descargue el paquete de Qt. Usted puede optar por instalar sólo Creator durante la instalación.
Abra Qt Creator y se le presentará la ventana principal. El diseñador está disponible a través de la pestaña en el lado izquierdo. Sin embargo, para activarlo primero hay que empezar a crear un archivo .ui.
La interfaz de Qt Creator, con la sección de Diseño mostrada a la izquierda.
Para crear un archivo .ui ve a Archivo -> Nuevo archivo o proyecto… En la ventana que aparece selecciona Qt en Archivos y Clases a la izquierda, luego selecciona Qt Designer Form a la derecha. Notarás que el icono tiene «ui», mostrando el tipo de archivo que estás creando.
Crea un nuevo archivo Qt .ui.
En el siguiente paso se te preguntará qué tipo de widget quieres crear. Si estás iniciando una aplicación, entonces Main Window es la opción correcta. Sin embargo, también puede crear archivos .ui para cuadros de diálogo, formularios y widgets compuestos personalizados.
Seleccione el tipo de widget a crear, para la mayoría de las aplicaciones será Ventana principal.
A continuación, elija un nombre de archivo y una carpeta de almacenamiento para su archivo. Guarde su archivo .ui con el mismo nombre que la clase que va a crear, sólo para hacer más sencillos los comandos posteriores.
Elija el nombre y la carpeta para guardar su archivo.
Por último, puede elegir añadir el archivo a su sistema de control de versiones si está utilizando uno. Siéntase libre de omitir este paso – no afecta a su UI.
Opcionalmente agregue el archivo a su control de versiones, por ejemplo, Git.
Poniendo su Ventana Principal
Se le presentará su recién creada ventana principal en el diseñador de UI. No hay mucho que ver para empezar, sólo un área de trabajo gris que representa la ventana, junto con los inicios de una barra de menú de la ventana.
La vista inicial de la ventana principal creada.
Puedes cambiar el tamaño de la ventana haciendo clic en la ventana y arrastrando las asas azules en cada esquina.
La vista inicial de la ventana principal creada.
El primer paso en la construcción de una aplicación es añadir algunos widgets a su ventana. En nuestras primeras aplicaciones aprendimos que para establecer el widget central de una QMainWindow necesitamos usar .setCentralWidget(). También vimos que para añadir múltiples widgets con un diseño, necesitamos un QWidget intermedio al que aplicar el diseño, en lugar de añadir el diseño a la ventana directamente.
Qt Creator se encarga de esto por ti automáticamente, aunque no es particularmente obvio al respecto.
Para añadir múltiples widgets a la ventana principal con un diseño, primero arrastra tus widgets al QMainWindow. Aquí estamos arrastrando 3 etiquetas. No importa dónde las sueltes.
Ventana principal con 1 etiquetas y 1 botón añadidos.
Hemos creado 2 widgets arrastrándolos a la ventana, haciéndolos hijos de esa ventana. Ahora podemos aplicar un diseño.
Busca el QMainWindow en el panel de la derecha (debería estar justo arriba). Debajo verás que centralwidget representa el widget central de la ventana. El icono del widget central muestra el diseño actual aplicado. Inicialmente tiene un círculo rojo atravesado, mostrando que no hay ningún diseño activo.
Haga clic con el botón derecho del ratón en el objeto QMainWindow, y busque ‘Diseño’ en el desplegable resultante.
Haga clic con el botón derecho del ratón en la ventana principal, y elija Diseño.
A continuación verá una lista de diseños que puede aplicar a la ventana. Selecciona Lay Out Horizontally y el layout se aplicará al widget.
Selecciona layout para aplicar a la ventana principal.
El layout seleccionado se aplica al widget central de la QMainWindow y los widgets se añaden al layout, disponiéndose en función del layout seleccionado. Ten en cuenta que en Qt Creator puedes arrastrar y reordenar los widgets dentro del layout, o seleccionar un layout diferente, como quieras. Esto lo hace especialmente agradable para crear prototipos y probar cosas.
Diseño vertical aplicado a los widgets en la ventana principal.
Usando su archivo .ui generado
Hemos creado una UI muy simple. El siguiente paso es llevarlo a Python y utilizarlo para construir una aplicación que funcione.
Primero guarda tu archivo .ui – por defecto se guardará en la ubicación que elegiste al crearlo, aunque puedes elegir otra ubicación si quieres.
El archivo .ui está en formato XML. Para usar nuestra UI desde Python tenemos dos métodos alternativos disponibles –
- cargarla en una clase usando el método
.loadUI() - convertirla a Python usando la herramienta
pyuic5.
Estos dos enfoques se tratan a continuación. Personalmente prefiero convertir la UI a un archivo de Python para mantener las cosas similares desde el punto de vista del empaquetado de la programación.
Cargar el archivo .ui directamente
Para cargar los archivos .uipodemos utilizar el módulo uicincluido con PyQt5, concretamente el método uic.loadUI(). Esto toma el nombre de un archivo de UI y lo carga creando un objeto PyQt5 completamente funcional.
Para PySide2 puedes usar una instancia QUiLoader y llamar al método loader.load() para lograr lo mismo.
Una (muy) simple UI diseñada en Qt Creator
Como el método uid.loadUI() convierte un objeto de instancia no puedes adjuntar código personalizado __init__(). Sin embargo, puedes manejar esto a través de una función de configuración personalizada
Para cargar una UI desde el bloque __init__ de un widget existente (por ejemplo, un QMainWindow) puedes usar uic.loadUI(filename, self) para PyQt5.
El cargador de PySide2 no soporta este enfoque – el segundo parámetro es para el widget padre del widget que estás creando. Esto le impide añadir código personalizado a la inicialización del widget, pero puede trabajar alrededor de esto con una función init separada.
Convertir su archivo .ui a Python
Para generar un archivo de salida de Python ejecute pyuic5 desde la línea de comandos, pasando el archivo .ui y el archivo de destino para la salida, con un parámetro -o. Lo siguiente generará un archivo Python llamado MainWindow.py que contiene nuestra UI creada.
pyuic5 mainwindow.ui -o MainWindow.pySi estás usando PyQt4 la herramienta se llama `pyuic4`, pero por lo demás es completamente idéntica.
Puedes abrir el archivo MainWindow.py resultante en un editor para echarle un vistazo, aunque no deberías editar este archivo. El poder de usar Qt Creator es poder editar, ajustar y actualizar su aplicación mientras desarrolla. Cualquier cambio realizado en este archivo se perderá cuando lo actualices. Sin embargo, puedes anular y retocar todo lo que quieras cuando importes y uses el archivo en tus aplicaciones.
La importación del archivo Python resultante funciona como para cualquier otro. Usted puede importar su clase de la siguiente manera. La herramienta pyuic5 añade Ui_ al nombre del objeto definido en Qt Creator, y es este objeto el que quieres importar.
from MainWindow import Ui_MainWindowPara crear la ventana principal en tu aplicación, crea una clase de forma normal pero subclasificando tanto de QMainWindow como de tu clase importada Ui_MainWindow. Por último, llame a self.setupUi(self) desde dentro de la __init__ para desencadenar la configuración de la interfaz.
Esto produce exactamente el mismo resultado que antes.
Una (muy) simple UI diseñada en Qt Creator
Eso es todo. Tu ventana está ahora completamente configurada. Dado que el uso de un archivo .ui abstrae el código específico de la UI, puedes utilizar este mismo patrón para cargar cualquier interfaz que diseñes.
Añadir la lógica de la aplicación
Puedes interactuar con los widgets creados a través de Qt Creator igual que lo harías con los creados con código. Para simplificar las cosas, uicañade todos los widgets hijos al objeto ventana por su nombre de identificación, tal y como se especifica en Qt Creator. Cubriremos cómo trabajar con estos en la siguiente parte.