Créer les widgets
Exclusif Premium
Débloquez votre potentiel ! ✨
Cette session fait partie de notre programme Premium exclusif
+100h de formations exclusives
+180 exercices de code avancés
+100h de mentorats en réécriture
20 projets guidés pas à pas
Mentorats groupés hebdomadaires
Support individuel avec nos mentors
Prêt à passer au niveau supérieur ?
Découvrez tous les avantages Premium et transformez votre apprentissage dès aujourd'hui!
Inscris-toi
(c'est gratuit !)
Un compte est nécessaire pour participer aux discussions.
Créer un compteToutes les questions
Fethi CHOUDER
2 juin 2025
Résolue
2 réponses
Variables dynamiques vs dictionnaire pour la création de boutons
J'aurais une petite question.
Lors de la création de la boucle pour générer les boutons, il est dit qu'un dictionnaire doit être créé pour que tous les boutons soient affectés à une clé et ne soient pas écrasés.
Aurait-on cependant pu créer des variables dynamiques directement dans la boucle avec la fonction globals(), et nous épargner ainsi la création d'un dictionnaire, comme indiqué ci-dessous ?
Dans le cas où cela serait possible, quelle est cependant la meilleure solution ?
Patlord
24 mai 2024
Résolue
1 réponse
Impossible de créer une seconde instance QApplication
Quand je lance le script la première fois pour vérifier si la fenêtre d'application s'affiche correctement, pas de soucis. Par contre, dès que je relance le script, je reçois le message d'erreur: "Please destroy the QApplication singleton before creating a new QApplication instance."
J'ai essayé de rajouter la condition :
```
if QApplication.instance():
app.quit()
```
mais là, il me dit que "app" n'est pas défini. J'ai remplacé cette ligne par "QApplication.instance().exit()" mais je reçois toujours le message d'erreur indiquant qu'une instance est toujours en cours.
Auriez-vous une idée?
Créer les widgets
Pour créer les boutons, nous allons utiliser un dictionnaire qui contiendra le texte à afficher sur chaque bouton ainsi que les coordonnées du bouton en X et Y ainsi que la taille qu'ils doivent occuper sur la grille de notre layout :
BUTTONS = {"C": (1, 0, 1, 1),
"/": (1, 3, 1, 1),
"7": (2, 0, 1, 1),
"8": (2, 1, 1, 1),
"9": (2, 2, 1, 1),
"x": (2, 3, 1, 1),
"4": (3, 0, 1, 1),
"5": (3, 1, 1, 1),
"6": (3, 2, 1, 1),
"-": (3, 3, 1, 1),
"1": (4, 0, 1, 1),
"2": (4, 1, 1, 1),
"3": (4, 2, 1, 1),
"+": (4, 3, 1, 1),
"0": (5, 0, 1, 2),
".": (5, 2, 1, 1),
"=": (5, 3, 1, 1)}
On crée ensuite un QGridLayout qui va nous permettre d'ajouter les widgets selon un agencement en grille :
from PySide6.QtWidgets import QApplication, QWidget, QGridLayout
BUTTONS = {"C": (1, 0, 1, 1),
"/": (1, 3, 1, 1),
"7": (2, 0, 1, 1),
"8": (2, 1, 1, 1),
"9": (2, 2, 1, 1),
"x": (2, 3, 1, 1),
"4": (3, 0, 1, 1),
"5": (3, 1, 1, 1),
"6": (3, 2, 1, 1),
"-": (3, 3, 1, 1),
"1": (4, 0, 1, 1),
"2": (4, 1, 1, 1),
"3": (4, 2, 1, 1),
"+": (4, 3, 1, 1),
"0": (5, 0, 1, 2),
".": (5, 2, 1, 1),
"=": (5, 3, 1, 1)}
class Calculator(QWidget):
def __init__(self):
super().__init__()
self.setWindowTitle("Calculatrice")
self.main_layout = QGridLayout(self)
app = QApplication()
win = Calculator()
win.show()
app.exec()
!!!warning
Il ne faut pas oublier de parenter le layout à la fenêtre en passant
self en argument lors de la création du QGridLayout.!!!
On crée ensuite le QLineEdit qui servira à afficher le résultat de l'opération en affichant par défaut le nombre 0. Notes les guillemets autour du 0 : le QLineEdit n'accepte en effet que des chaînes de caractères.
from PySide6.QtWidgets import QApplication, QWidget, QGridLayout, QLineEdit, QPushButton
BUTTONS = {"C": (1, 0, 1, 1),
"/": (1, 3, 1, 1),
"7": (2, 0, 1, 1),
"8": (2, 1, 1, 1),
"9": (2, 2, 1, 1),
"x": (2, 3, 1, 1),
"4": (3, 0, 1, 1),
"5": (3, 1, 1, 1),
"6": (3, 2, 1, 1),
"-": (3, 3, 1, 1),
"1": (4, 0, 1, 1),
"2": (4, 1, 1, 1),
"3": (4, 2, 1, 1),
"+": (4, 3, 1, 1),
"0": (5, 0, 1, 2),
".": (5, 2, 1, 1),
"=": (5, 3, 1, 1)}
class Calculator(QWidget):
def __init__(self):
super().__init__()
self.setWindowTitle("Calculatrice")
self.main_layout = QGridLayout(self)
self.le_result = QLineEdit("0")
self.main_layout.addWidget(self.le_result, 0, 0, 1, 4)
app = QApplication()
win = Calculator()
win.show()
app.exec()
Pour ajouter le QLineEdit au layout, on utilise la méthode addWidget.
Le premier argument correspond au widget que l'on souhaite ajouter au layout. On indique ensuite les coordonnées X et Y (ici 0, 0 car on souhaite placer le QLineEdit en partant en haut à gauche de la fenêtre).
Les 2 derniers arguments correspondent à la taille que doit occuper le widget en hauteur et en largeur. On indique donc 1 en hauteur et 4 en largeur :
self.main_layout.addWidget(self.le_result, 0, 0, 1, 4)
Il ne reste plus qu'à ajouter les boutons. On boucle sur les éléments de notre dictionnaire BUTTONS pour récupérer le texte et la position ainsi que la taille des boutons :
from PySide6.QtWidgets import QApplication, QWidget, QGridLayout, QLineEdit, QPushButton
BUTTONS = {"C": (1, 0, 1, 1),
"/": (1, 3, 1, 1),
"7": (2, 0, 1, 1),
"8": (2, 1, 1, 1),
"9": (2, 2, 1, 1),
"x": (2, 3, 1, 1),
"4": (3, 0, 1, 1),
"5": (3, 1, 1, 1),
"6": (3, 2, 1, 1),
"-": (3, 3, 1, 1),
"1": (4, 0, 1, 1),
"2": (4, 1, 1, 1),
"3": (4, 2, 1, 1),
"+": (4, 3, 1, 1),
"0": (5, 0, 1, 2),
".": (5, 2, 1, 1),
"=": (5, 3, 1, 1)}
class Calculator(QWidget):
def __init__(self):
super().__init__()
self.setWindowTitle("Calculatrice")
self.buttons = {}
self.main_layout = QGridLayout(self)
self.le_result = QLineEdit("0")
self.main_layout.addWidget(self.le_result, 0, 0, 1, 4)
for button_text, button_position in BUTTONS.items():
button = QPushButton(button_text)
self.main_layout.addWidget(button, *button_position)
self.buttons[button_text] = button
app = QApplication()
win = Calculator()
win.show()
app.exec()
Pour envoyer la position et la taille des boutons à la méthode
addWidget, notez l'utilisation de l'unpacking (avec l'astérisque) :self.main_layout.addWidget(button, *button_position)
Cela nous permet d'envoyer les 4 informations contenues dans le tuple (la position X,Y et la taille) de façon individuelles. Cela revient au même que de faire :
self.main_layout.addWidget(button, button_position[0], button_position[1], button_position[2], button_position[3])
Pour garder une trace des boutons et pouvoir les modifier par la suite, on passe par un autre dictionnaire, self.buttons. À chaque création d'un nouveau QPushButton, on ajoute une clé dans le dictionnaire avec le texte du bouton et le widget associé en valeur :
self.buttons[button_text] = button
Cela nous permettra par la suite d'accéder par exemple au bouton avec le nombre 1 de cette façon :
self.buttons["1"]
00:00:00 :Dans cette partie, on va voir comment créer les différents widgets et les ajouter dans le layout.Donc on va commencer à faire toute la logique d'affichage de notre application.
00:00:09 :Alors pour créer les boutons, on va utiliser un dictionnaire qui va contenir d'un côté dans la clé le texte qu'on va afficher sur chaque boutonet en valeur, on va avoir les coordonnées du bouton en X et en Y et la taille qu'ils doivent occuper sur la grille du layout.
00:00:22 :Donc le dictionnaire il ressemble à ça, vous voyez qu'on a une constante ici qui s'appelle bouton,qui est égal à un dictionnaire et on a comme je vous disais en clé le nom du bouton et en valeur les coordonnées.
00:00:39 :Ici en premier on a la coordonnée en Y et ici on a la coordonnée en X.Donc Y ça va être sur la hauteur et X ça va être sur la largeur.
00:00:47 :Et ces deux nombres ici ça va être la taille du bouton là encore en hauteur pour commencer et ensuite en largeur.Donc je vais vous faire un petit dessin pour vous montrer ce que ça donne et illustrer un peu tout ça.
00:00:56 :Donc là on va voir la fenêtre de notre application.On va avoir un line edit qui va être tout en haut ici et ensuite on va avoir des boutons qui vont être disposés sur la grille.
00:01:05 :Donc des boutons comme ça qui vont être les uns à côté des autres et on va avoir quatre boutons comme ça qui vont être sur la largeuret qui vont prendre tous la même place.
00:01:20 :On va avoir le premier élément ici qui va prendre toute la largeur et ensuite on va avoir des boutons carrés.On a juste le bouton 0 à la fin ici qui va prendre deux espaces en largeur.
00:01:46 :Donc la coordonnée du line edit ça va être 0, 0 et 1 en hauteur 4 en largeur tout simplement.Ensuite on va avoir le premier bouton ici et donc ce premier bouton on va avoir une coordonnée différente pour l'axe d'Y.
00:01:59 :Donc l'axe d'Y c'est la première coordonnée donc on va commencer à 1 ensuite on va avoir 0 en X puisqu'on commence au bord gauche ici de notre applicationet pour la taille on va avoir 1 par 1 puisqu'on a un bouton qui est carré ici.
00:02:18 :Donc on va commencer à 5 on va avoir 0 là encore puisqu'on commence tout à gauche de notre applicationet pour la taille on va avoir 1 en hauteur et 2 en largeur.
00:02:26 :Donc ça ça va être la coordonnée du bouton 0 ici.Et si on va voir un bouton de l'autre côté donc par exemple le bouton égal ici qui va nous permettre de calculer l'opérationlà on va être à 5 en hauteur puisqu'on est sur la même ligne que ce bouton là donc on commence à 5 en hauteur
00:02:41 :par contre après on va se déplacer donc là le bouton tout à gauche il va être à 0 sur l'axe des Xensuite on va avoir une deuxième case ici à 1 donc qui correspond à ces boutons ce bouton là et ce bouton làon va avoir ensuite un élément à 2 et cet élément là il sera à la position 3
00:02:57 :et pour la taille on va avoir encore là 1 par 1.Donc voilà pour le petit schéma n'hésitez pas à faire ce genre de schéma quand vous utilisez des grid layoutmoi je trouve que c'est très important surtout que le fait d'avoir la première coordonnée ici qui correspond à la hauteur
00:03:10 :je trouve que ce n'est pas forcément très évident et généralement quand on se lance directement dans le codepour ajouter des widgets dans un grid layout on s'en mêle toujours les pinceauxdonc moi vraiment je vous conseille de commencer par dessiner comme ça que ce soit sur votre ordinateur
00:03:22 :ou carrément avec une feuille et un stylo pour bien comprendre ce système de coordonnéesdonc si on revient dans le code on a notre dictionnaire ici avec le texte et les coordonnéeset on va pouvoir dans la méthode ici déjà créer notre layout et ensuite créer les boutons, le line edit
00:03:37 :et ajouter tout ça à l'intérieur de la fenêtre.Donc le layout je vais l'appeler MainLayout et ça va être un QGridLayoutdonc là il n'est pas encore importé, dans PyCharm vous pouvez facilement importer une classe en faisant option entréeet vous allez voir qu'il va automatiquement trouver où se trouve cette classe et la rajouter au début dans les imports ici
00:03:57 :donc sinon vous pouvez le rajouter à la main dans Visual Studio Code égalementvous avez maintenant ces fonctionnalités d'import automatique qui sont bien pratiques.Donc maintenant qu'on a le layout il ne faut pas oublier de le parenter à notre application donc à Selfdonc on met ça entre les parenthèses, si vous ne faites pas ça le layout ne sera pas parenté à la fenêtre
00:04:14 :et vous ne le verrez pas et vous ne verrez pas non plus donc tous les widgets qui sont contenus à l'intérieur du layout.Ensuite on va créer notre line edit donc je vais l'appeler le-resultdonc moi je préfixe très souvent le nom des widgets par un raccourci ici qui me permet de savoir de quoi il s'agit
00:04:28 :donc dans ce cas-ci d'un line edit et on va créer un QLineEdit avec le texte 0 qui va être affiché par défaut.Donc là encore j'utilise l'auto import pour importer cette classe QLineEdittoutes ces classes elles sont contenues à l'intérieur du même module QtWidgetdonc vous pouvez les rajouter après QApplication et QWidget.
00:04:46 :Donc on passe une chaîne de caractère ici, QLineEdit n'accepte que des chaînes de caractèredonc même si on a un nombre ici il faut absolument l'entourer de guillemets pour ne pas avoir d'erreur.
00:04:54 :Et on va ensuite ajouter donc ce line edit dans notre layoutdonc pour ça on va utiliser la méthode AddWidget et on va mettre les coordonnées pour ce line edit.
00:05:03 :Donc on commence à 0,0 et on va avoir une hauteur de 1 et une largeur de 4.Donc on a les bonnes coordonnées ici j'ai juste oublié de préciser quel widget on souhaitait ajouterdonc ça c'est le premier argument donc on va mettre self.le-result et ensuite on passe les coordonnées ici et la taille.
00:05:19 :Donc on va ajouter self.le-result dans le widget MainLayout qui est donc le grid layout à ces coordonnées et avec cette taille.Donc je vais lancer l'application et on va vérifier qu'on a bien ce qu'il fautdonc on a bien notre line edit ici avec le texte qui est correctement affiché.
00:05:34 :Donc pour l'instant on ne se rend pas bien compte de la taille de notre grillepuisque quand on change la taille de la fenêtre vous voyez que le line edit va correspondre à la longueur de la fenêtreet quand on va commencer à ajouter des boutons vous allez voir que la grille va se dessiner petit à petit.
00:05:47 :Donc comme on l'avait vu on a enclé dans le dictionnaire le texte du bouton et en valeur la position et la taille.Donc je vais faire for button text et button position in buttons.items
00:06:00 :et donc là ça va me permettre de boucler sur les clés et les valeurs de mon dictionnaire.A l'intérieur de cette boucle on va créer notre bouton que je vais récupérer dans une variable que je vais appeler tout simplement buttonet on va utiliser la classe QPushButton qui là encore n'est pas importée
00:06:15 :donc on va refaire option entrée import QPushButtonet à l'intérieur ici on va mettre le texte du bouton qui est dans la variable button text.
00:06:23 :On va ensuite ajouter ce bouton dans le layout donc on va faire self.mainlayout.addwidgeton va ajouter le bouton et on va l'ajouter aux coordonnées qu'on a récupérées dans button position ici.
00:06:34 :Alors pour passer rapidement les coordonnées comme ceci donc passer la coordonnée en Y en X et ensuite la tailleon pourrait utiliser les crochets donc aller récupérer l'élément 0 dans la listeensuite aller récupérer l'élément 1 etc mais ce serait assez fastidieux à faire pour les quatre éléments qu'on souhaite ajouter.
00:06:51 :Là vous voyez en fait on a un tuple qui contient quatre élémentset pour les passer directement à cette fonction on peut utiliser ce qu'on appelle l'unpackingdonc là je vais juste mettre un astérisque et le nom de la variable et ça va en fait unpackerdonc ça veut dire déballer en français c'est à dire que plutôt que d'avoir un tuple comme ceci qu'on passerait directement avec cette variable
00:07:09 :et bien en fait on va passer les éléments les uns à la suite des autres séparés par des virgules.Donc ça permet d'éviter d'avoir à faire crochet 0, crochet 1, 2, 3, 4 etc pour passer les quatre éléments du tuple.
00:07:20 :Et pour finir on va créer en fait un dictionnaire qui va nous permettre de récupérer, de stocker les boutons qu'on a crééparce que pour l'instant vous voyez qu'on crée une variable mais là cette variable à chaque fois qu'on passe dans notre boucle on va l'écraseret nous ces boutons on va devoir y accéder par la suite pour par exemple les connecter à différentes méthodes
00:07:37 :et il faut bien qu'on les récupère quelque part.Le problème c'est que je ne peux pas créer à la volée comme ça une variable.Je peux pas mettre par exemple bouton et insérer comme on pourrait le faire avec un fstring.
00:07:46 :Donc si j'essayais de faire quelque chose du genre faire un fstring bouton et ici de mettre bouton texte ça ne marcherait pas.On ne peut pas créer une variable de cette façon.
00:07:54 :Donc comment est-ce qu'on peut faire pour récupérer quand même ce widget quelque part ?Et bien on va passer par un dictionnaire.Donc ce dictionnaire je vais le créer par exemple ici et on va l'appeler tout simplement self.buttons
00:08:05 :et au début il sera vide et on va le remplir petit à petit ici à l'intérieur de notre boucle.Donc qu'est-ce qu'on va faire ?
00:08:11 :Et bien on va tout simplement créer à chaque fois une clé avec une valeur et la clé ça va être tout simplement button textedonc le texte du bouton et la valeur ça va être le widget en question.
00:08:21 :Et ainsi dans le reste du script on pourra accéder à nos différents widgets donc aux différents boutons de notre interfaceen utilisant le dictionnaire et par exemple en récupérant le bouton avec le texte 0 ou le texte 1ou le bouton pour l'opération ou pour les opérateurs pour faire une addition, une soustraction etc.
00:08:38 :Donc ça c'est très pratique, ça me permet comme ça en passant par un dictionnairede garder une trace de ces widgets pour pouvoir les réutiliser par la suite.
00:08:45 :Donc normalement c'est tout bon, on a créé le line edit, le layout, on a ajouté les boutons à l'intérieur du grid layoutdonc on va tester tout ça.
00:08:52 :Je vais lancer l'application et là vous voyez qu'on remarque la grille que j'avais donc dessinée au début de cette partie.On remarque également qu'on a bien donc une largeur de 4 puisqu'on a 4 boutons et même si j'ai élargi la fenêtre icivous voyez qu'on reste avec cette grille de 4 en largeur ici avec le line edit qui prend toute la largeur ici
00:09:09 :et les boutons qui prennent également toute la largeur.On retrouve le bouton 0 qui lui prend bien 2 en largeur donc qui va couvrir l'équivalent de 2 boutons en largeuret si je voulais par exemple mettre une hauteur différente et bien on pourrait le faire.
00:09:21 :Par exemple on pourrait à la fin donc si je change mon dictionnaire ici,on pourrait se dire que pour la dernière ligne on va avoir 2 en hauteur,donc la hauteur c'est le troisième élément ici puisqu'on commence avec la position en Y, la position en X,ensuite la hauteur et la largeur.
00:09:35 :Donc par exemple je pourrais la mettre 2 ici et on va voir automatiquement ce que ça change quand je lance l'applicationet là vous voyez que le symbole d'égalité il va prendre 2 en hauteurdonc là ça ne donne pas quelque chose de très satisfaisant puisque les autres boutons ici prennent une seule unité en hauteur
00:09:49 :donc on pourrait le changer également pour le 0 et le .Donc je vais mettre également 2 ici pour le 0 et le .Et si je relance et que je change la taille de la fenêtre vous voyez qu'ici on va avoir une plus grande hauteur.
00:09:59 :Donc pour l'instant ce n'est pas très visible puisque par défaut les boutons vont prendre le minimum de place possible en hauteurmais par la suite on va voir comment changer ce comportement pour dire aux boutons qu'il faut qu'ils prennent le maximum de place possibleet qu'ils remplissent leur espace.
Ce n'est pas fini...
✋
Tu as complété % du parcours 🔥
Termine l'intégralité de la formation pour pouvoir débloquer ton attestation de réussite.
