Créez vos applications GUI plus rapidement – Real Python

Installation et exécution de Qt Designer

Il existe plusieurs façons d'obtenir et d'installer Qt Designer en fonction de votre plate-forme actuelle. Si vous utilisez Windows ou Linux, vous pouvez exécuter les commandes suivantes à partir de votre terminal ou de votre ligne de commande:

$ python3 -m venv ./venv
$ la source venv / bin / activer
(venv) $ pip installer pyqt5 pyqt5-tools

Ici, vous créez un environnement virtuel Python, l'activez et installez pyqt5 et pyqt5-outils. pyqt5 installe PyQt et une copie des bibliothèques Qt requises, tandis que pyqt5-outils installe un ensemble d'outils Qt qui inclut Qt Designer.

L'installation placera l'exécutable Qt Designer dans un répertoire différent en fonction de votre plateforme:

• Linux: ... lib / python3.x / site-packages / qt5_applications / Qt / bin / designer
• Les fenêtres: ... Lib site-packages pyqt5_tools designer.exe

Sur les systèmes Linux, tels que Debian et Ubuntu, vous pouvez également installer Qt Designer en utilisant le gestionnaire de packages système avec la commande suivante:

$ sudo apt installer qttools5-dev-tools

Cette commande télécharge et installe Qt Designer et d'autres outils Qt sur votre système. En d'autres termes, vous aurez une installation à l'échelle du système et vous pourrez exécuter Qt Designer en cliquant sur son icône dans un gestionnaire de fichiers ou un menu système.

Sous macOS, si vous avez installé Qt depuis Homebrew à l'aide de infusion installer qt commande, alors vous devriez avoir Qt Designer déjà installé sur votre système.

Enfin, vous pouvez télécharger le programme d'installation de Qt pour votre plate-forme actuelle à partir du site de téléchargement officiel, puis suivre les instructions à l'écran. Dans ce cas, pour terminer le processus d'installation, vous devez créer un compte Qt.

Si vous avez déjà installé Qt Designer en utilisant l’une des options décrites jusqu’à présent, lancez l’application. Vous devriez avoir les deux fenêtres suivantes sur votre écran:

La fenêtre au premier plan est celle de Qt Designer Nouvelle forme dialogue. La fenêtre en arrière-plan est la fenêtre principale de Qt Designer. Dans les deux sections suivantes, vous apprendrez les bases de l’utilisation de ces composants de l’interface Qt Designer.

Utilisation de la boîte de dialogue Nouveau formulaire de Qt Designer

Lorsque vous exécutez Qt Designer, la fenêtre principale de l’application et le Nouvelle forme dialogue. Dans cette boîte de dialogue, vous pouvez sélectionner parmi cinq modèles d'interface graphique disponibles. Ces modèles incluent des options pour créer des boîtes de dialogue, des fenêtres principales et des widgets personnalisés:

Par défaut, lorsque vous exécutez Qt Designer, le Nouvelle forme La boîte de dialogue apparaît au premier plan. Si ce n'est pas le cas, vous pouvez cliquer sur Nouveau dans la barre d'outils de Qt Designer. Vous pouvez également cliquer sur Fichier → Nouveau dans le menu principal ou appuyez sur Ctrl+N sur votre clavier.

dans le Nouvelle forme , vous pouvez sélectionner le modèle de formulaire avec lequel vous souhaitez commencer, puis cliquer sur Créer pour générer un nouveau formulaire:

Pour créer un nouveau formulaire vide à l'aide d'un modèle Qt Designer, il vous suffit de sélectionner le modèle souhaité dans le Nouvelle forme puis cliquez sur Créer ou appuyez sur Alt+R sur votre clavier.

Notez que les deux premiers modèles de boîte de dialogue ont leurs propres boutons par défaut. Ce sont des boutons standard inclus dans un QDialogButtonBox. Cette classe gère automatiquement la position ou l'ordre des boutons sur différentes plates-formes.

Par exemple, si vous utilisez un Annuler bouton et un D'accord , alors la norme sous Linux et macOS consiste à afficher ces boutons dans le même ordre. Mais sous Windows, l'ordre des boutons sera inversé, avec D'accord apparaissant en premier, suivi de Annuler. QDialogButtonBox gère automatiquement ce problème pour vous.

Utilisation de la fenêtre principale de Qt Designer

Concepteur Qt fenêtre principale fournit une barre de menus avec des options pour enregistrer et gérer les formulaires, modifier les formulaires et changer le mode d'édition, disposer et prévisualiser les formulaires, ainsi que pour régler les paramètres de l'application et accéder à sa documentation d'aide:

La fenêtre principale fournit également une barre d'outils qui affiche les options couramment utilisées. Vous utiliserez la plupart de ces options lors de la modification et de la mise en page de vos formulaires. Ces options sont également disponibles dans le menu principal, notamment dans le Fichier, Éditer, et Forme menus:

La fenêtre principale de Qt Designer comprend également quelques fenêtres de quai qui fournissent un riche ensemble de fonctionnalités et d'outils:

• Boîte de widget
• Inspecteur d'objets
• Éditeur de propriété
• Navigateur de ressources
• Éditeur d'actions
• Éditeur de signal / slot

La Boîte de widget fournit une sélection de gestionnaires de disposition, d'espaceurs, de widgets standard et d'autres objets que vous pouvez utiliser pour créer une interface graphique pour vos boîtes de dialogue et fenêtres:

La Widget Box propose une option de filtre en haut de la fenêtre. Vous pouvez taper le nom d'un objet ou d'un widget donné et y accéder rapidement. Les objets sont regroupés en catégories qui reflètent leur utilisation spécifique. Vous pouvez afficher ou masquer tous les objets disponibles dans une catégorie en cliquant sur la poignée en regard de l'étiquette de catégorie.

Lorsque vous créez vos formulaires, vous pouvez prendre des objets de la fenêtre Widget avec le pointeur de votre souris, puis les faire glisser et les déposer sur le formulaire pour créer son interface graphique.

La Widget Box fournit également un Scratchpad section en bas de la fenêtre. Dans cette section, vous pouvez regrouper les objets fréquemment utilisés dans une catégorie distincte. Vous pouvez remplir la catégorie Scratchpad avec n'importe quel widget actuellement placé sur un formulaire en les faisant glisser et en les déposant de nouveau sur la Widget Box. Vous pouvez supprimer des widgets de la catégorie Scratchpad en cliquant dessus avec le bouton droit de la souris et en sélectionnant Retirer dans le menu contextuel.

La Inspecteur d'objets fournit une arborescence de tous les objets du formulaire courant. L'inspecteur d'objets a également une boîte de filtre en haut pour vous permettre de trouver des objets dans l'arborescence. Vous pouvez utiliser l'inspecteur d'objets pour définir le nom et d'autres propriétés du formulaire et de ses widgets. Vous pouvez également cliquer avec le bouton droit sur n'importe quel widget pour accéder à un menu contextuel avec des options supplémentaires:

Avec l'inspecteur d'objets, vous pouvez gérer les widgets de votre formulaire. Vous pouvez les renommer, mettre à jour certaines de leurs propriétés, les supprimer du formulaire, etc. L'arborescence de l'inspecteur d'objets reflète relation parent-enfant des widgets et objets du formulaire courant.

La Éditeur de propriété est une autre fenêtre de dock qui apparaît dans la fenêtre principale de Qt Designer. Cette fenêtre contient un tableau à deux colonnes avec les propriétés de l'objet actif et leurs valeurs. Vous pouvez utiliser l’éditeur de propriétés pour modifier la valeur des propriétés d’un objet, comme son nom l’indique:

L’éditeur de propriétés offre un moyen convivial d’accéder et de modifier les valeurs des propriétés de l’objet actif, telles que son nom, sa taille, sa police, son icône, etc. Les propriétés répertoriées dans l'éditeur changeront en fonction de l'objet que vous sélectionnez sur votre formulaire.

Les propriétés sont répertoriées de haut en bas selon la hiérarchie des classes. Par exemple, si vous sélectionnez un QPushButton sur le formulaire, l'éditeur de propriétés affiche les propriétés de QWidget, suivi des propriétés de QAbstractButton, et enfin les propriétés de QPushButton lui-même. Notez que les lignes de l'éditeur affichent des couleurs différentes pour différencier visuellement la classe sous-jacente.

Enfin, vous disposez de trois fenêtres de dock qui apparaissent généralement sous forme d'onglets dans le coin inférieur droit:

1. Navigateur de ressources fournit un moyen rapide d'ajouter des ressources, telles que des icônes, des fichiers de traduction, des images et d'autres fichiers binaires à vos applications.
2. Éditeur d'actions fournit un moyen de créer des actions et de les ajouter à vos formulaires.
3. Éditeur de signal / slot fournit un moyen de connecter des signaux et des emplacements dans vos formulaires.

Voici quelques-unes des options offertes par ces outils:

C'est tout! Ces trois fenêtres de dock complètent l'ensemble d'outils et d'options que Qt Designer fournit pour vous permettre de créer et de personnaliser les interfaces graphiques de vos boîtes de dialogue et fenêtres.

Utilisation de Qt Designer vs codage manuel de vos interfaces graphiques

Avec PyQt, vous avez au moins deux options pour créer l'interface graphique d'une fenêtre ou d'une boîte de dialogue: Vous pouvez utiliser Qt Designer, ou vous pouvez coder manuellement l'interface graphique en code Python brut. Les deux options ont leurs avantages et leurs inconvénients. Parfois, il est difficile de décider quand utiliser l’un ou l’autre.

Qt Designer fournit une interface graphique conviviale qui vous permet de créer rapidement des interfaces graphiques. Cela peut augmenter votre productivité en tant que développeur et raccourcir vos cycles de développement.

Le codage manuel de vos interfaces graphiques peut vous donner beaucoup plus de contrôle sur elles. Avec cette approche, l'ajout de nouveaux composants et fonctionnalités ne nécessite aucun outil supplémentaire au-delà de votre éditeur de code ou de votre IDE, ce qui peut être très pratique dans certains environnements de développement.

Que vous utilisiez Qt Designer ou que vous codiez manuellement vos interfaces graphiques est une décision personnelle. Voici quelques considérations générales sur les deux approches:

Au-delà de ces préoccupations, si vous ne faites que commencer avec PyQt, Qt Designer peut vous aider à découvrir les widgets disponibles, les gestionnaires de disposition, les classes de base, les propriétés et leurs valeurs typiques, etc.

Une dernière différence entre l'utilisation de Qt Designer et le codage manuel d'une interface graphique est que vous devez exécuter une étape supplémentaire lors de l'utilisation de Qt Designer: traduire .ui fichiers en code Python.

Création du menu principal

Le modèle de fenêtre principale de Qt Designer fournit un barre de menu en haut du formulaire. Vous pouvez ajouter les menus à cette barre de menus à l'aide de l'éditeur de menus. Les menus sont des listes déroulantes d'options qui offrent un accès rapide aux options de l'application. Revenez à Qt Designer et à votre fenêtre principale nouvellement créée. En haut du formulaire, vous verrez une barre de menus avec le texte de l'espace réservé Écrivez ici.

Si vous double-cliquez ou appuyez sur Entrer sur ce texte d'espace réservé, vous pouvez alors taper le nom de votre premier menu. Pour confirmer le nom du menu, appuyez simplement sur Entrer.

Supposons que vous souhaitiez créer votre propre éditeur de texte. En règle générale, ce type d'application a un Fichier menu avec au moins certaines des options suivantes:

• Nouveau pour créer un nouveau document
• Ouvert pour ouvrir un document existant
• Ouverte récente pour ouvrir des documents récemment consultés
• sauver pour enregistrer un document
• Sortie pour quitter l'application

Voici comment vous pouvez utiliser Qt Designer pour créer ce menu:

L'éditeur de menus de Qt Designer vous permet d'ajouter des menus à la barre de menus de manière conviviale. Lorsque vous entrez le nom d'un menu ou d'une option de menu, vous pouvez utiliser une esperluette (&) avant une lettre donnée pour fournir un accélérateur de clavier.

Par exemple, si vous ajoutez une esperluette avant le F dans le Fichier menu, vous pouvez accéder à ce menu en appuyant sur Alt+F. De même, si vous ajoutez une esperluette avant le N dans Nouveau, puis une fois que vous avez lancé le Fichier menu, vous pouvez accéder au Nouveau option en appuyant sur N.

Avec l'éditeur de menu, vous pouvez également ajouter séparateurs à vos menus. C'est un bon moyen de séparer visuellement les options de menu et de les regrouper de manière logique. Pour ajouter un séparateur, double-cliquez sur le Ajouter un séparateur option à la fin du menu actif dans l'éditeur de menu. Vous pouvez supprimer un séparateur existant en cliquant dessus avec le bouton droit de la souris, puis en sélectionnant Supprimer le séparateur dans le menu contextuel. Ce menu vous permet également d'ajouter de nouveaux séparateurs.

Si vous avez besoin de déplacer un séparateur vers un autre endroit dans un menu donné, vous pouvez faire glisser le séparateur vers la position souhaitée et le déposer là. Une ligne rouge indiquera la position où le séparateur sera placé.

Vous pouvez également ajouter un sous-menu à une option de menu donnée. Pour ce faire, cliquez sur l'icône sur le côté droit de l'option de menu à laquelle vous souhaitez attacher le sous-menu, comme vous l'avez fait avec le Ouverte récente option dans l'exemple ci-dessus.

Pour exécuter un aperçu de votre formulaire, accédez à Formulaire → Aperçu, ou appuyez sur la combinaison de touches Ctrl+R sur votre clavier.

Lorsque vous créez un menu comme le Fichier menu dans votre exemple d'éditeur de texte, un nouveau QMenu l'objet est automatiquement ajouté à votre barre de menus. Lorsque vous ajoutez une option de menu à un menu donné, vous créez un action. Qt Designer fournit un éditeur d'actions pour créer, personnaliser et gérer des actions. L'outil fournit quelques options pratiques que vous pouvez utiliser pour affiner vos actions:

Avec l'éditeur d'actions, vous pouvez affiner, mettre à jour ou définir les options suivantes:

• Le texte de l'action, qui sera affiché sur les options de menu et les boutons de la barre d'outils
• Le nom de l'objet, que vous utiliserez dans votre code pour référencer l'objet action
• Les icônes qui seront affichées sur vos options de menu et les boutons de la barre d'outils
• La propriété vérifiable de l'action
• Les raccourcis clavier, qui fourniront à l'utilisateur un moyen rapide d'accéder à l'action

Les points de suspension finaux (...) dans le texte de vos options de menu est une convention largement utilisée pour nommer les options qui n'effectuent pas d'action immédiate mais lancent une boîte de dialogue contextuelle pour effectuer d'autres actions.

Dans le cas des icônes, vous devez emballer ces icônes avec votre application en tant que fichiers indépendants, ou vous pouvez créer un fichier de ressources, également appelé .qrc fichier. Pour cet exemple, vous pouvez télécharger les icônes requises et d'autres ressources en cliquant sur le lien ci-dessous:

Une fois que vous avez téléchargé les icônes, créez un Ressources répertoire à côté de votre main_window.ui fichier et copiez-y les icônes. Revenez ensuite à l'éditeur d'actions et ajoutez des icônes à vos actions comme ceci:

Notez que vos options de menu affichent désormais une icône dans la marge gauche. Cela fournit des informations visuelles supplémentaires à vos utilisateurs et les aide à trouver l'option souhaitée. Maintenant, allez-y et ajoutez un Éditer menu avec les options suivantes:

• Copie pour copier du texte
• Pâte pour coller du texte
• Couper pour couper du texte
• Trouver et remplacer pour rechercher et remplacer du texte

Ensuite, ajoutez un Aidez-moi menu avec un À propos de option pour lancer une boîte de dialogue avec des informations générales sur votre éditeur de texte. Enfin, allez dans l'éditeur de propriétés et définissez le titre de votre fenêtre sur Éditeur d'échantillons. Après ces ajouts, votre fenêtre principale devrait ressembler à ceci:

Avec ces ajouts, le menu principal de votre exemple d’éditeur de texte commence à ressembler au menu d’un véritable éditeur de texte!

Créer une barre d'outils

Vous pouvez ajouter autant de barres d'outils que nécessaire à l'interface graphique de votre fenêtre principale à l'aide de Qt Designer. Pour ce faire, faites un clic droit sur le formulaire et sélectionnez Ajouter une barre d'outils dans le menu contextuel. Cela ajoute une barre d'outils vide en haut de la fenêtre. Vous pouvez également prédéfinir la zone de la barre d'outils dans laquelle vous souhaitez placer une barre d'outils donnée en sélectionnant Ajouter la barre d'outils à une autre zone:

Une fois que vous avez vos barres d'outils en place, vous pouvez les remplir avec des boutons. Pour ce faire, vous utilisez Actions plutôt que des boutons de barre d'outils spécifiques de la Widget Box. Pour ajouter des actions à vos barres d'outils, vous pouvez utiliser l'éditeur d'actions:

Les actions peuvent être partagées entre les options de menu et les boutons de la barre d'outils, donc dans ce cas, vous réutilisez les actions que vous avez créées lorsque vous avez rempli vos menus dans la section précédente. Pour remplir la barre d'outils, cliquez sur une action dans l'éditeur d'actions, puis faites-la glisser et déposez-la sur la barre d'outils. Notez qu'en cliquant avec le bouton droit sur la barre d'outils, vous pouvez ajouter des séparateurs pour séparer visuellement les boutons d'outils.

Disposition d'un seul widget central

Qt Designer utilise QMainWindow pour créer son modèle de fenêtre principale. Cette classe fournit une disposition par défaut qui vous permet de créer une barre de menus, une ou plusieurs barres d'outils, un ou plusieurs widgets de dock, une barre d'état et un widget central. Par défaut, Qt Designer utilise un QWidget objet comme widget central sur le modèle de la fenêtre principale.

Utiliser un bare-bones QWidget objet comme widget central sur l'interface graphique d'une fenêtre principale est un bon choix car, au-dessus de ce widget, vous pouvez placer un widget unique ou plusieurs widgets dans une mise en page cohérente.

Par exemple, dans votre exemple d'éditeur de texte, vous souhaiterez peut-être utiliser un seul widget qui fournit à vos utilisateurs une zone de travail pour taper, copier, coller et modifier leur texte. Pour cela, vous pouvez utiliser un QTextEdit objet, puis ajoutez une disposition verticale (ou horizontale) comme disposition du widget central:

Dans cet exemple, vous faites d'abord glisser un QTextEdit sur le formulaire. Ensuite, vous cliquez sur le formulaire pour sélectionner votre widget central. Enfin, vous appliquez une disposition verticale à votre widget central en cliquant sur Disposer verticalement dans la barre d'outils de Qt Designer.

Depuis l'espacement autour du QTextEdit ne semble pas correct, vous utilisez l'inspecteur d'objets pour modifier les marges de la mise en page de 9 pixels à 1 pixel.

Avec Qt Designer, vous pouvez utiliser différents gestionnaires de mise en page pour organiser rapidement vos widgets. On peut dire que le moyen le plus accessible de mettre en page vos interfaces graphiques avec Qt Designer consiste à utiliser la section relative à la mise en page de la barre d'outils principale:

De gauche à droite, vous trouverez les options suivantes pour créer différents types de mises en page:

Les deux dernières options de la barre d'outils sont liées aux mises en page, mais ne les créent pas:

1. Disposition de rupture vous permet de casser une mise en page existante. Une fois les widgets organisés dans une mise en page, vous ne pouvez pas les déplacer ou les redimensionner individuellement car leur géométrie est contrôlée par la mise en page. Pour modifier des widgets individuels, vous devrez peut-être casser la mise en page et la refaire plus tard. Pour accéder à cette option, vous pouvez appuyer sur Ctrl+0 sur votre clavier.

2. Ajuster la taille ajuste la taille de la mise en page pour accueillir les widgets contenus et pour s'assurer que chacun dispose de suffisamment d'espace pour être visible. Pour accéder à cette option, vous pouvez appuyer sur Ctrl+J sur votre clavier.

Vous pouvez également accéder à toutes ces options liées à la mise en page via la barre de menus principale de Qt Designer, sous la Forme menu:

dans le Forme menu, vous avez accès à toutes les options liées à la mise en page, avec une référence complète des raccourcis clavier pour y accéder. Vous pouvez également accéder à ces options via le menu contextuel du formulaire, sous la Disposition option.

Disposition d'un widget central composé

Lorsque vous créez vos fenêtres principales, vous pouvez être confronté à des situations dans lesquelles vous devez utiliser plusieurs widgets dans une mise en page donnée en tant que widget central. Étant donné que le modèle de fenêtre principale de Qt Designer est livré avec un QWidget objet en tant que widget central, vous pouvez en profiter pour créer votre propre agencement personnalisé de widgets, puis le définir comme disposition de niveau supérieur de ce widget central.

Avec Qt Designer, vous pouvez mettre en page vos widgets à l'aide de gestionnaires de disposition, comme vous l'avez déjà vu dans la section ci-dessus. Si vous avez besoin d'une disposition composée de widgets pour l'interface graphique de votre fenêtre principale, vous pouvez la créer en exécutant les étapes suivantes:

1. Faites glisser et déposez les widgets sur votre formulaire et essayez de les placer près de la position souhaitée.
2. Sélectionnez les widgets qui doivent être gérés ensemble par une mise en page donnée.
3. Appliquez la mise en page appropriée à l'aide de la barre d'outils ou du menu principal de Qt Designer, ou avec le menu contextuel du formulaire.

Bien que vous puissiez faire glisser des mises en page sur un formulaire, puis faire glisser des widgets sur les mises en page, la meilleure pratique consiste à faire d'abord glisser tous les widgets et les espaceurs, puis à sélectionner à plusieurs reprises les widgets et les espaceurs associés pour leur appliquer des dispositions.

Par exemple, supposons que vous construisiez une application de calculatrice. Tu as besoin d'un QLineEdit objet en haut de votre formulaire pour afficher les opérations et leurs résultats. Sous la ligne modifier, vous avez besoin de quelques QPushButton objets pour les nombres et les opérations. Cela vous donne une fenêtre comme celle-ci:

Cela ressemble à une calculatrice, mais l'interface graphique est désordonnée et encombrée. Pour organiser cela dans une interface graphique de calculatrice plus raffinée, vous pouvez utiliser une disposition de grille pour les boutons et une disposition de boîte verticale comme disposition de niveau supérieur de la calculatrice:

Votre calculatrice a encore besoin de polissage supplémentaire, mais elle est beaucoup mieux maintenant. Pour obtenir une version plus complète, vous pouvez utiliser l'éditeur de propriétés pour modifier les valeurs de certaines propriétés de vos boutons, telles que leur taille maximale et minimale. Vous pouvez également définir une taille fixe pour la fenêtre principale de votre calculatrice, et ainsi de suite. Vas-y, essaies!

Avoir une barre d'état

Le modèle de fenêtre principale de Qt Designer fournit une barre d'état par défaut. Une barre d'état est un panneau horizontal qui est généralement placé au bas de la fenêtre principale d'une application GUI. Son objectif principal est d'afficher des informations sur le courant statut de l'application.

Vous pouvez diviser une barre d'état en plusieurs sections et afficher différentes informations sur chaque section. Les informations de la barre d'état peuvent être temporaire ou permanent, et la plupart du temps, il s'agit de messages texte. Le but des informations affichées sur la barre d'état est de tenir vos utilisateurs informés de ce que fait actuellement l'application et de son état général à un moment donné.

Vous pouvez également utiliser la barre d'état pour afficher conseils d'aide, qui sont de courts messages d'aide décrivant ce que fait un bouton ou une option de menu donné. Ce type de message apparaît dans la barre d'état lorsque l'utilisateur place le pointeur de la souris sur un bouton de la barre d'outils ou une option de menu.

Création d'une interface graphique de dialogue

Pour créer une boîte de dialogue personnalisée avec Qt Designer, sélectionnez le modèle approprié pour la boîte de dialogue dans le Nouvelle forme dialogue. Faites glisser et déposez les widgets requis sur le formulaire, disposez-les correctement et enregistrez le formulaire dans un .ui fichier pour une utilisation ultérieure dans votre application.

Revenez à votre exemple d'éditeur de texte et supposez que vous souhaitez ajouter un Trouver et remplacer dialogue comme celui-ci:

Pour créer cette boîte de dialogue, commencez avec le modèle Boîte de dialogue sans boutons et ajoutez les widgets requis au formulaire:

Ici, vous créez d'abord une boîte de dialogue vide à l'aide du modèle Boîte de dialogue sans boutons et définissez le titre de la fenêtre sur Trouver et remplacer dans l'inspecteur d'objets. Ensuite, vous faites glisser et déposez deux QLabel objets sur le formulaire à l'aide de la Widget Box. Ces étiquettes demandent aux utilisateurs les mots dont ils ont besoin pour trouver et remplacer. Ces mots seront inscrits dans le QLineEdit objets près des étiquettes.

Ensuite, vous faites glisser et déposez trois QPushButton objets sur le formulaire. Ces boutons permettront à vos utilisateurs de rechercher et de remplacer des mots dans leur document actuel. Enfin, vous ajoutez deux QCheckBox objets à fournir Cas de correspondance et Correspond à un mot entier options.

Une fois que vous avez tous les widgets sur le formulaire, assurez-vous de les placer dans une position similaire à celle que vous souhaitez obtenir dans votre boîte de dialogue finale. Il est maintenant temps de mettre en page les widgets.

Disposition de l'interface graphique de dialogue

Comme vous l'avez vu précédemment, pour organiser les widgets dans un formulaire, vous pouvez utiliser plusieurs gestionnaires de mise en page. Pour présenter votre Trouver et remplacer , utilisez une disposition de grille pour les étiquettes, les modifications de ligne et les cases à cocher. Pour les boutons, utilisez une disposition verticale. Enfin, utilisez une mise en page horizontale comme gestionnaire de mise en page de premier niveau de votre boîte de dialogue:

Ici, vous sélectionnez les étiquettes, les modifications de ligne et les cases à cocher avec le pointeur de votre souris et vous leur appliquez une disposition de grille. Après cela, vous ajoutez une entretoise verticale entre le Remplacer et Annuler boutons pour les garder visuellement séparés.

La dernière étape consiste à définir la disposition de niveau supérieur de la boîte de dialogue. Dans ce cas, vous utilisez un gestionnaire de mise en page horizontal. C'est tout! Vous avez créé l'interface graphique de votre Trouver et remplacer dialogue avec Qt Designer. Enregistrez-le avec le nom de fichier find_replace.ui.

Il existe un tas d'autres propriétés et fonctionnalités que vous pouvez modifier dans vos boîtes de dialogue à l'aide de Qt Designer. Par exemple, vous pouvez définir l'ordre de tabulation de votre widget d'entrée pour améliorer l'expérience des utilisateurs qui naviguent dans vos boîtes de dialogue avec leur clavier. Vous pouvez également fournir des accélérateurs de clavier, connecter des signaux et des slots, etc.

Connexion des signaux et des slots

Jusqu'à présent, vous avez utilisé Qt Designer dans le mode Modifier les widgets, qui est son mode par défaut. Dans ce mode, vous pouvez ajouter des widgets à vos formulaires, modifier les propriétés des widgets, disposer les widgets sur le formulaire, etc. Cependant, Qt Designer a jusqu'à quatre modes différents pour vous permettre de travailler sur différentes fonctionnalités de vos formulaires:

Vous pouvez également accéder à ces modes en cliquant sur leurs boutons correspondants dans la section relative au mode de la barre d’outils de Qt Designer, qui ressemble à ceci:

Pour pouvoir modifier les signaux intégrés et les slots de vos widgets et formulaires, vous devez d'abord passer en mode Edit Signals / Slots.

Les actions des utilisateurs sur les widgets et les formulaires, comme un clic ou une pression sur une touche, sont appelées événements dans PyQt. Lorsqu'un événement se produit, le widget à portée de main émet un signal. Ce mécanisme vous permet d'exécuter des actions en réponse à des événements. Ces actions sont appelées fentes, qui sont des méthodes ou des fonctions.

Pour exécuter un slot en réponse à un événement, vous devez sélectionner l'un des signaux émis par le widget en réponse à un événement et le connecter au slot souhaité.

La plupart des widgets, y compris les boîtes de dialogue et les fenêtres, implémentent des signaux intégrés qui sont émis lorsqu'un événement donné se produit sur le widget. Les widgets fournissent également des emplacements intégrés qui vous permettent d'effectuer certaines actions standardisées.

Pour établir une connexion signal et slot entre deux widgets à l'aide de Qt Designer, vous devez sélectionner le widget fournisseur de signal avec votre souris, puis faites-le glisser et déposez-le sur le widget de fournisseur d'emplacement. Cela lance Qt Designer Configurer la connexion dialogue. Revenez maintenant à la Trouver et remplacer et passez au mode Edit Signals / Slots de Qt Designer. Ensuite, faites glisser et déposez le Annuler bouton sur le formulaire:

La Configurer la connexion La boîte de dialogue comporte deux panneaux. Sur le panneau de gauche, vous pouvez sélectionner un signal à partir du widget de fournisseur de signal, et sur le panneau de droite, vous pouvez sélectionner un emplacement dans le widget de fournisseur d'emplacement. Pour créer la connexion, appuyez sur D'accord:

La connexion apparaît sous la forme d'une flèche entre le widget du fournisseur de signal et le widget du fournisseur de slot, indiquant que la connexion est établie. Vous verrez également le nom du signal et le slot que vous venez de connecter.

Dans ce cas, vous avez connecté le cliqué () signal du Annuler bouton avec le rejeter() emplacement de la boîte de dialogue. Maintenant quand vous cliquez Annuler, votre action sera ignorée et la boîte de dialogue se fermera.

Pour modifier une connexion, double-cliquez sur la flèche ou sur l'une des étiquettes. Cela affiche le Configurer la connexion dialog, in which you can change the signal or the slot involved in the connection according to your needs.

To delete a connection, select the arrow that represents the connection or one of the labels that identify the signal and slot, then press Del.

Setting the Tab Order of Widgets

To improve the usability of your dialogs, you can set a coherent tab order for your input widgets. The tab order is the order in which the widgets on your form come into focus when you press Tab ou Décalage+Tab on your keyboard.

If you’re using Qt Designer to create your forms, then the default tab order of your widgets is based on the order in which you place each widget on the form. Sometimes this order isn’t right, and when you hit Tab ou Décalage+Tab, the focus jumps to an unexpected widget. Take a look at the tab order behavior in your Find and Replace dialog:

The focus starts on the Find line edit, then it goes through the Replace line edit, then through the checkboxes, and finally through the buttons. What if you want the focus to jump from the Find line edit to the Replace line edit and then to the Find button? In this case, you can change the tab order of the input widgets on the dialog. Switch to Edit Tab Order mode in Qt Designer. You’ll see something like this:

In Edit Tab Order mode, each input widget in the form shows a number that identifies its position in the tab-order chain. You can change that order by clicking on the numbers in the desired order:

You change the tab order of the input widgets by clicking the numbers in the desired order. Note that when you select a number, it changes to red, indicating that this is the currently edited position in the tab-order chain. Numbers you haven’t set are shown in blue, and the numbers you have set are shown in green. If you make a mistake, then you can restart the ordering by choosing Restart from the form’s context menu.

Providing Keyboard Accelerators

A keyboard accelerator is a key combination that you can press on your keyboard to quickly move the focus onto a given widget on a dialog or window. Normally, keyboard accelerators consist of the Alt key and a letter that identifies the widget or option that you want to access. This can help you improve the usability of your applications.

To define a keyboard accelerator on a widget that includes a label, such as a button or a checkbox, you just need to place an ampersand symbol (&) before the letter in the label text that you want to use in the accelerator. For example, place an ampersand before the C sur le Cancel button of your Find and Replace dialog, run a preview, and press Alt+C like in the following example:

By placing an ampersand before the letter C in the text of the Cancel button, you create a keyboard accelerator. If you press Alt+C on your keyboard, then the Cancel button is selected and the dialog closes.

To define a keyboard accelerator on a widget that doesn’t include a label, such as a line edit, you need to make that widget a buddy of a label object. There are four steps that you need to take if you want to create a buddy connection:

1. Select a letter in the text of the label to identify the buddy connection and provide the keyboard accelerator.
2. Place an ampersand (&) before the selected letter in the text of the label.
3. Switch to Edit Buddies mode in Qt Designer.
4. Drag and drop the label onto the buddy widget.

Here’s how you can create a buddy relationship between the Find label and its related line edit:

To create a buddy relationship between a label and a widget, select the label with your mouse and drag it onto the input widget that you want to set as its buddy. The label and the input widget will become buddies. From this point on, you can press Alt plus the selected letter in the label text to move the focus to the related widget.

It’s important to note that you shouldn’t have two widgets with the same keyboard accelerator in a given form. This means that you need to select a unique letter for each keyboard accelerator.

Go ahead and use Qt Designer to set keyboard accelerators for the widgets on your Find and Replace dialog. The final result should look like the dialog you saw at the beginning of the section Creating a Dialog GUI.

Setting Up Windows and Dialogs for Use

Now it’s time to set up your windows and dialogs for use in a real application (in this case, a sample text editor). If you’ve been following this tutorial, then you should have at least two .ui files:

1. main_window.ui with the GUI of a sample text editor application
2. find_replace.ui with the GUI of a Find and Replace dialog

Go ahead and create a new directory called sample_editor/. Inside this directory, create another directory called ui/ and copy your .ui files into it. Also, copy the resources/ directory that contains the icons for your menu options and toolbar buttons to the sample_editor/ui/ directory. So far, the structure of your application should look like this:

sample_editor/
│
└── ui/
    ├── resources/
    │   ├── edit-copy.png
    │   ├── edit-cut.png
    │   ├── edit-paste.png
    │   ├── file-exit.png
    │   ├── file-new.png
    │   ├── file-open.png
    │   ├── file-save.png
    │   └── help-content.png
    │
    ├── find_replace.ui
    └── main_window.ui

Since the main-window GUI is relatively complex, you can use pyuic5 to translate the content of main_window.ui into Python code.

You can download all the required code and resources to build your sample text editor by clicking the link below:

Now open a terminal and navigate to the sample_editor/ directory. Once you’re there, run the following command:

$ pyuic5 -o main_window_ui.py ui/main_window.ui

This command generates a Python module called main_window_ui.py du ui/main_window.ui file and places it in your sample_editor/ directory. This module contains the Python code for your main window’s GUI. Here’s a small sample of the code:

# -*- coding: utf-8 -*-

# Form implementation generated from reading ui file 'ui/main_window.ui'
#
# Created by: PyQt5 UI code generator 5.15.1
#
# WARNING: Any manual changes made to this file will be lost when pyuic5 is
# run again.  Do not edit this file unless you know what you are doing.

de PyQt5 import QtCore, QtGui, QtWidgets

class Ui_MainWindow(object):
    def setupUi(soi, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(413, 299)
        soi.centralwidget = QtWidgets.QWidget(MainWindow)
        # Snip...

    def retranslateUi(soi, MainWindow):
        _translate = QtCore.QCoreApplication.translate
        MainWindow.setWindowTitle(_translate("MainWindow", "Sample Editor"))
        soi.menu_File.setTitle(_translate("MainWindow", "&File"))
        # Snip...

Ui_MainWindow has all the code for generating the GUI of the sample editor’s main window. Note that .setupUi() contains the code to create all the required widgets and lay them out on the GUI. .retranslateUi() contains code for internationalization and localization, but this topic is beyond the scope of this tutorial.

Now your working directory should look like this:

sample_editor/
│
├── ui/
│   ├── resources/
│   │   ├── edit-copy.png
│   │   ├── edit-cut.png
│   │   ├── edit-paste.png
│   │   ├── file-exit.png
│   │   ├── file-new.png
│   │   ├── file-open.png
│   │   ├── file-save.png
│   │   └── help-content.png
│   │
│   ├── find_replace.ui
│   └── main_window.ui
│
└── main_window_ui.py

Since your Find and Replace dialog is quite small, you can load its GUI directly from your .ui file using uic.loadUi(). This function takes a string with the path to a .ui file as an argument and returns a QWidget subclass that implements the GUI.

This way of loading .ui files dynamically is rarely used in practice. You can use it with small dialogs that don’t require too much effort to load. With this approach, you don’t need to generate the Python code for the dialog’s GUI every time you modify the .ui file with Qt Designer, which can be a productivity and maintainability win in some cases.

Now that you’ve chosen a strategy for building each of your GUIs, it’s time to put everything together in a real application.

Putting Everything Together in an Application

With all the pieces in place for your sample text editor, you can create the application and write the required code to use the main window and the Find and Replace dialog. Fire up your favorite code editor or IDE in your sample_editor/ directory and create a new file called app.py. Add the following code to it:

    1import sys
    2
    3de PyQt5.QtWidgets import (
    4    QApplication, QDialog, QMainWindow, QMessageBox
    5)
    6de PyQt5.uic import loadUi
    sept
    8de main_window_ui import Ui_MainWindow
    9
dixclass Fenêtre(QMainWindow, Ui_MainWindow):
11    def __init__(soi, parent=Aucun):
12        super().__init__(parent)
13        soi.setupUi(soi)
14        soi.connectSignalsSlots()
15
16    def connectSignalsSlots(soi):
17        soi.action_Exit.déclenché.relier(soi.proche)
18        soi.action_Find_Replace.déclenché.relier(soi.findAndReplace)
19        soi.action_About.déclenché.relier(soi.à propos de)
20
21    def findAndReplace(soi):
22        dialog = FindReplaceDialog(soi)
23        dialog.exec()
24
25    def à propos de(soi):
26        QMessageBox.à propos de(
27            soi,
28            "About Sample Editor",
29            "
A sample text editor app built with:
"
30            "
- PyQt
"
31            "
- Qt Designer
"
32            "
- Python
",
33        )
34
35class FindReplaceDialog(QDialog):
36    def __init__(soi, parent=Aucun):
37        super().__init__(parent)
38        loadUi("ui/find_replace.ui", soi)
39
40si __name__ == "__main__":
41    app = QApplication(sys.argv)
42    win = Fenêtre()
43    win.montrer()
44    sys.sortie(app.exec())

Here’s what this code does:

• Line 3 imports the required PyQt classes to build the application and the GUI.
• Line 6 imports loadUi() du uic module. This function provides a way of loading the content of a .ui file dynamically.
• Line 8 imports Ui_MainWindow, which contains the GUI for your main window.
• Line 10 defines Fenêtre, which will provide your application’s main window. In this case, the class uses multiple inheritance. It inherits the main window functionality from QMainWindow and the GUI functionality from Ui_MainWindow.
• Line 13 calls .setupUi(), which creates the whole GUI for your main window.
• Line 16 defines .connectSignalsSlots(), which connects the required signals and slots.
• Line 21 defines .findAndReplace(). This method creates an instance of your Find and Replace dialog and execute it.
• Line 25 defines .about(), which creates and launches a small dialog to provide information about the application. In this case, you use a built-in dialog based on QMessageBox.
• Line 35 defines FindReplaceDialog, which provides the Find and Replace dialog.
• Line 38 calls loadUi() to load the dialog’s GUI from the files ui/find_replace.ui.

Finally, on lines 41 to 44, you create the application, create and show the main window, and run the application’s main loop by calling .exec() on the application object.

It’s important to note that Qt Designer can name your actions a bit differently from what you saw in the above code. For example, you might find the name .actionE_xit au lieu de .action_Exit to refer to the Exit action. So, for this example to work properly, you need to make sure you’re using the right names.

If you want to use your own names instead of the names that Qt Designer generates, then you can go to the Property Editor and change the .objectName property to the name that seems right for you.

class Fenêtre(QMainWindow):
    def __init__(soi, parent=Aucun):
        super().__init__(parent)
        soi.ui = Ui_MainWindow()
        soi.ui.setupUi(soi)
        soi.connectSignalsSlots()

    def connectSignalsSlots(soi):
        soi.ui.action_Exit.déclenché.relier(soi.proche)
        soi.ui.action_Find_Replace.déclenché.relier(
            soi.findAndReplace
        )
        soi.ui.action_About.déclenché.relier(soi.à propos de)
    # Snip...

If you run this application, then you’ll get the following window on your screen:

That’s it! You’ve created a sample text editor with minimal functionality using Qt Designer. Note that to code this application, you wrote only forty-four lines of Python code, which is substantially less than what you’d need to write to hand code the GUI of an equivalent application from scratch.