Ce tutoriel nécessite l’installation de Qt Creator – vous pouvez le télécharger gratuitement sur le site Web de Qt. Allez sur https://www.qt.io/download et téléchargez le paquet Qt. Vous pouvez choisir d’installer seulement Creator pendant l’installation.
Ouvrir Qt Creator et vous serez présenté avec la fenêtre principale. Le concepteur est disponible via l’onglet sur le côté gauche. Cependant, pour l’activer, vous devez d’abord commencer à créer un fichier .ui.
L’interface de Qt Creator, avec la section Design présentée à gauche.
Pour créer un fichier .ui, allez dans Fichier -> Nouveau fichier ou projet…. Dans la fenêtre qui apparaît, sélectionnez Qt sous Fichiers et Classes à gauche, puis sélectionnez Qt Designer Form à droite. Vous remarquerez que l’icône a « ui », montrant le type de fichier que vous créez.
Créer un nouveau fichier Qt .ui.
Dans l’étape suivante, on vous demandera quel type de widget vous voulez créer. Si vous démarrez une application, alors Fenêtre principale est le bon choix. Cependant, vous pouvez également créer des fichiers .ui pour les boîtes de dialogue, les formulaires et les widgets composés personnalisés.
Sélectionnez le type de widget à créer, pour la plupart des applications, ce sera Main Window.
Choisissez ensuite un nom de fichier et un dossier d’enregistrement pour votre fichier. Enregistrez votre fichier .ui avec le même nom que la classe que vous allez créer, juste pour simplifier les commandes suivantes.
Choisissez le nom et le dossier d’enregistrement de votre fichier.
Enfin, vous pouvez choisir d’ajouter le fichier à votre système de contrôle de version si vous en utilisez un. N’hésitez pas à sauter cette étape – elle n’affecte pas votre interface utilisateur.
Optionnellement, ajoutez le fichier à votre contrôle de version, par exemple Git.
Mise en page de votre fenêtre principale
Vous serez présenté avec votre fenêtre principale nouvellement créée dans le concepteur d’interface utilisateur. Il n’y a pas grand chose à voir pour commencer, juste une zone de travail grise représentant la fenêtre, ainsi que les débuts d’une barre de menu de la fenêtre.
La vue initiale de la fenêtre principale créée.
Vous pouvez redimensionner la fenêtre en cliquant sur la fenêtre et en faisant glisser les poignées bleues sur chaque coin.
La vue initiale de la fenêtre principale créée.
La première étape dans la construction d’une application est d’ajouter quelques widgets à votre fenêtre. Dans nos premières applications, nous avons appris que pour définir le widget central d’une QMainWindow, nous devons utiliser .setCentralWidget(). Nous avons également vu que pour ajouter plusieurs widgets avec une mise en page, nous avons besoin d’une QWidget intermédiaire à laquelle appliquer la mise en page, plutôt que d’ajouter la mise en page à la fenêtre directement.
Qt Creator s’en occupe pour vous automatiquement, bien que ce ne soit pas particulièrement évident.
Pour ajouter plusieurs widgets à la fenêtre principale avec une mise en page, faites d’abord glisser vos widgets sur la QMainWindow. Ici, nous faisons glisser 3 étiquettes. L’endroit où vous les déposez n’a pas d’importance.
Fenêtre principale avec 1 étiquettes et 1 bouton ajoutés.
Nous avons créé 2 widgets en les faisant glisser sur la fenêtre, nous en avons fait des enfants de cette fenêtre. Nous pouvons maintenant appliquer une mise en page.
Recherchez le QMainWindow dans le panneau de droite (il devrait être juste en haut). En dessous, vous voyez centralwidget représentant le widget central de la fenêtre. L’icône du widget central montre la disposition actuelle appliquée. Initialement, il a un cercle rouge-croix à travers elle, montrant qu’il n’y a pas de mise en page active.
Cliquez droit sur l’objet QMainWindow, et trouvez ‘Layout’ dans la liste déroulante résultante.
Cliquez droit sur la fenêtre principale, et choisissez layout.
Après, vous verrez une liste de mises en page que vous pouvez appliquer à la fenêtre. Sélectionnez Lay Out Horizontally et la mise en page sera appliquée au widget.
Sélectionnez la mise en page à appliquer à la fenêtre principale.
La mise en page sélectionnée est appliquée au the centralwidget du QMainWindow et les widgets sont ajoutés la mise en page, étant disposés selon la mise en page sélectionnée. Notez que dans Qt Creator, vous pouvez réellement faire glisser et réorganiser les widgets dans la disposition, ou sélectionner une disposition différente, comme vous le souhaitez. Cela le rend particulièrement agréable pour prototyper et essayer des choses.
Mise en page verticale appliquée aux widgets sur la fenêtre principale.
Utilisation de votre fichier .ui généré
Nous avons créé une interface utilisateur très simple. L’étape suivante consiste à l’intégrer dans Python et à l’utiliser pour construire une application fonctionnelle.
En premier lieu, enregistrez votre fichier .ui – par défaut, il sera enregistré à l’emplacement que vous avez choisi lors de sa création, bien que vous puissiez choisir un autre emplacement si vous le souhaitez.
Le fichier .ui est au format XML. Pour utiliser notre interface utilisateur depuis Python, nous avons deux méthodes alternatives disponibles –
- charger dans une classe en utilisant la méthode
.loadUI() - convertir en Python en utilisant l’outil
pyuic5.
Ces deux approches sont couvertes ci-dessous. Personnellement, je préfère convertir l’interface utilisateur en un fichier Python pour garder les choses similaires d’un point de vue &de l’empaquetage de la programmation.
Chargement du fichier .ui directement
Pour charger les fichiers .ui, nous pouvons utiliser le module uic inclus avec PyQt5, spécifiquement la uic.loadUI()méthode. Cela prend le nom de fichier d’un fichier d’interface utilisateur et le charge en créant un objet PyQt5 entièrement fonctionnel.
Pour PySide2, vous pouvez utiliser une instance QUiLoader et appeler la méthode loader.load() pour accomplir la même chose.
UI (très) simple conçue dans Qt Creator
Comme la méthode uid.loadUI() transforme un objet d’instance, vous ne pouvez pas attacher de code __init__() personnalisé. Vous pouvez cependant gérer cela par le biais d’une fonction de configuration personnalisée
Pour charger une interface utilisateur à partir du bloc __init__ d’un widget existant (par exemple un QMainWindow), vous pouvez utiliser uic.loadUI(filename, self) pour PyQt5.
Le chargeur PySide2 ne supporte pas cette approche – le deuxième paramètre est pour le widget parent du widget que vous créez. Cela vous empêche d’ajouter du code personnalisé à l’initialisation du widget, mais vous pouvez contourner cela avec une fonction init séparée.
Convertir votre fichier .ui en Python
Pour générer un fichier de sortie Python, exécutez pyuic5 à partir de la ligne de commande, en passant le fichier .ui et le fichier cible pour la sortie, avec un paramètre -o. Ce qui suit va générer un fichier Python nommé MainWindow.py qui contient notre interface utilisateur créée.
pyuic5 mainwindow.ui -o MainWindow.pySi vous utilisez PyQt4, l’outil s’appelle `pyuic4`, mais est sinon complètement identique.
Vous pouvez ouvrir le fichier MainWindow.py résultant dans un éditeur pour y jeter un coup d’œil, bien que vous ne devriez pas modifier ce fichier. La puissance de l’utilisation de Qt Creator est d’être capable d’éditer, d’affiner et de mettre à jour votre application pendant que vous développez. Toute modification apportée à ce fichier sera perdue lors de sa mise à jour. Cependant, vous pouvez remplacer et modifier tout ce que vous voulez lorsque vous importez et utilisez le fichier dans vos applications.
L’importation du fichier Python résultant fonctionne comme pour tout autre. Vous pouvez importer votre classe comme suit . L’outil pyuic5 ajoute Ui_ au nom de l’objet défini dans Qt Creator, et c’est cet objet que vous voulez importer.
from MainWindow import Ui_MainWindowPour créer la fenêtre principale de votre application, créez une classe comme d’habitude mais en la sous-classant à la fois à partir de QMainWindow et de votre classe Ui_MainWindow importée. Enfin, appelez self.setupUi(self) à partir de la __init__ pour déclencher la configuration de l’interface.
Ceci produit exactement le même résultat que précédemment.
UI (très) simple conçue dans Qt Creator
C’est tout. Votre fenêtre est maintenant entièrement configurée. Comme l’utilisation d’un fichier .ui abstrait le code spécifique à l’interface utilisateur, vous pouvez utiliser ce même modèle pour charger n’importe quelle interface que vous concevez.
Ajouter une logique d’application
Vous pouvez interagir avec les widgets créés par Qt Creator comme vous le feriez avec ceux créés avec du code. Pour simplifier les choses, uic ajoute tous les widgets enfants à l’objet fenêtre par leur nom d’id comme spécifié dans Qt Creator. Nous couvrirons la façon de travailler avec ceux-ci dans la prochaine partie.