Application mobile: Votre première application graphique avec Python et PyQt – Python For Engineers

REMARQUE: un didacticiel PyQt5 et PySide2 mis à jour est disponible ici, ainsi que des captures d’écran à jour de Qt Creator.

introduction

De nombreuses personnes ont du mal à apprendre à créer une application graphique. La raison la plus courante est qu’ils ne savent même pas par où commencer. La plupart des didacticiels sont purement basés sur du texte, et il est difficile d’apprendre le développement d’une GUI en utilisant du texte, car les GUI sont principalement un support visuel.

Nous allons contourner cela en créant une application GUI simple et vous montrer à quel point il est facile de commencer. Une fois que vous avez compris les bases, il est facile d’ajouter des éléments avancés.

C’est ce que nous allons construire:

Une application GUI simple qui prend un prix, un taux de taxe et calcule le prix final.

La plupart des didacticiels sur les applications GUI essaient de mettre en page les blocs GUI à l’aide de code, mais c’est très pénible à faire. Nous utiliserons le superbe outil QT Designer pour mettre en page notre application:

Donc pas de mal à disposer le design à la main. Tout se fera graphiquement.

Tout le code source est ici.

Conditions préalables

Si vous avez suivi mes conseils et installé Anaconda, vous aurez déjà PyQt4. Sinon, vous devrez l’obtenir à partir d’ici.

Vous avez également besoin de Qt Designer.

Mise à jour: comme le souligne Steve dans les commentaires, Anaconda est livré avec qt-designer, vous n’avez donc pas besoin de télécharger quoi que ce soit! Il se trouve dans:… Anaconda3 Library bin et s’appelle designer-qt4.exe.

Je vous recommande de télécharger l’intégralité de la suite QT, car il contient également d’autres outils utiles.

Commencer

Remarque: Vous pouvez cliquer sur n’importe quelle image ci-dessous pour voir la taille réelle, au cas où vous voudriez plus de détails.

Démarrez QT Designer. Dans la fenêtre qui apparaît, choisissez la fenêtre principale, car elle donnera une toile vierge:

La prochaine chose à faire est de sélectionner Édition de texte encadré à gauche:

Traîne Édition de texte à la fenêtre principale, pour obtenir une boîte comme:

Voir le côté droit, où j’ai maladroitement encerclé une boîte rouge? C’est là que se trouve le nom de l’objet. Le nom est la façon dont cet objet sera appelé à partir de notre code Python, alors appelez-le quelque chose de sensé.

Je l’appelle price_box, car nous entrerons le prix dans cette case. La prochaine chose que nous ferons est d’attacher une étiquette à la boîte, pour indiquer clairement à l’utilisateur à quoi sert cette boîte.

Ci-dessus, j’ai encerclé l’étiquette. Faites-le glisser vers la fenêtre principale.

Il obtient le texte par défaut de TextLabel. Double-cliquez dessus et changez-le en Prix. Vous pouvez également rendre le texte volumineux et gras, comme illustré ici:

Pour la boîte d’impôt, nous allons utiliser quelque chose de différent. Voir le boîte de rotation:

Le cercle de gauche est un boîte de rotation. Cela limite les valeurs que vous pouvez saisir. Nous n’avons pas besoin d’un spinbox, il est juste intéressant de voir comment vous pouvez utiliser les différents widgets fournis par QT Creator. Faites glisser le boîte de rotation à la fenêtre. La première chose que nous faisons est de changer la objectName à quelque chose de sensible, taux d’imposition dans notre cas. Rappelez-vous, c’est ainsi que cet objet sera appelé depuis Python.

Nous pouvons choisir une valeur par défaut pour notre spinbox. Je choisis 20:

Si vous regardez l’image ci-dessus, vous pouvez également définir les limites minimale et maximale. Nous les garderons tels qu’ils sont.

Nous ajouterons également un autre étiquette appelé Taux d’imposition, comme nous l’avons fait auparavant. Regardez aussi le cercle Bouton poussoir nous utiliserons ensuite:

Maintenant, sélectionnez le Bouton poussoir boîte et faites-la glisser vers notre fenêtre.

Le bouton dit juste Bouton, ce qui n’est pas très utile. À présent, vous devez savoir comment changer cela. Mais avant cela, nous changeons le nom du bouton (et non le texte) en calc_tax_button.

Ensuite, nous changeons le texte réel:

Faites glisser un autre Édition de texte sur la fenêtre. Vous n’avez pas besoin de l’étiqueter, car nous imprimerons la sortie ici. Changez son nom en results_window (non illustré ci-dessous, mais vous devez savoir comment le faire maintenant).

Si vous le souhaitez, vous pouvez ajouter un en-tête. C’est simple boîte à étiquettes avec la police augmentée:

Et enregistrez votre travail:

Ce fichier sera utilisé dans la partie suivante lorsque nous écrirons le code, donc stockez-le quelque part où vous pourrez y accéder.

Ce fichier que nous avons créé n’est qu’un fichier XML. Ouvrez-le dans un éditeur de texte, si vous le souhaitez, et vous trouverez quelque chose comme ceci:


Écrire le code

Le code de Qt est orienté objet et d’une manière facile à suivre. Chacun des widgets que nous avons ajoutés est un objet, avec ses propres fonctions comme toPlainText () (pour lire la valeur dans une case). Cela le rend assez facile à utiliser.

Je suis sûr que la documentation officielle le mentionne quelque part, mais vous devez effectuer une configuration avant de pouvoir utiliser le code. Je ne pouvais trouver cette configuration nulle part, alors j’ai travaillé à partir des exemples officiels (ainsi que d’autres didacticiels en ligne) pour trouver le plus petit programme dont vous avez besoin pour initialiser la classe. J’ai vérifié cette fonction en tant que pyqt_skeleton.py.

Ceci est utile, car chaque fois que vous démarrez un nouveau projet PyQt, utilisez ce squelette pour commencer et ajoutez votre code.

Le code est:

La principale chose à noter est la ligne 3:

C’est là que vous ajoutez le fichier que vous avez créé précédemment. Il est chargé à l’aide de la fonction intégrée:

Jetons un coup d’œil au code:

Le code principal crée une nouvelle application Qt Gui. Passer sys.argv est requis, car QT peut être configuré à partir de la ligne de commande. Nous ne le ferons pas.
Enfin, nous créons une classe appelée MyApp, qui hérite des bibliothèques Qt et initialise les classes parentes:

Vous n’avez pas besoin de connaître les détails de ce code. Utilisez simplement le squelette et travaillez dessus.

Prenez ce fichier, pyqt_skeleton.pyet renommez-le en pyqt_first.py. C’est parce que nous ne voulons pas modifier le fichier d’origine.
La première chose à faire est d’ajouter notre fichier XML, celui qui contient notre interface graphique, au code. Remplacez cette ligne:

avec

Cela chargera notre fichier GUI en mémoire. Maintenant, le widget clé de notre interface graphique était le bouton. Une fois que vous appuyez sur le bouton, quelque chose se produit. Quelle? Nous devons indiquer à notre code ce qu’il doit faire lorsque l’utilisateur appuie sur la touche Calculer la taxe bouton. dans le __init__ fonction, ajoutez cette ligne:

Qu’est-ce que cela fait? N’oubliez pas que nous avons appelé notre bouton calc_tax_button? (C’était le nom de l’objet, pas le texte qui y était affiché.) cliqué est une fonction interne qui est appelée lorsque (surprise) quelqu’un clique sur le bouton. Tous les widgets QT ont des fonctions spécifiques, que vous pouvez trouver sur Google. La dernière partie du code dit se connecter (self.CalculateTax). Cela signifie que connecter ce bouton à une fonction appelée self.CalculateTax, de sorte que chaque fois que l’utilisateur appuie sur ce bouton, cette fonction est appelée.

Nous n’avons pas encore écrit cette fonction. Faisons-le maintenant.

dans le MyApp Classe, ajoutez une autre fonction. Nous allons d’abord regarder toute la fonction, puis entrer dans les détails:

D’accord, regardons le code ci-dessus ligne par ligne.

Nous devons faire deux choses: lire la boîte de prix, lire la boîte de taxe et calculer le prix final. Faisons-le maintenant. Rappelez-vous, nous appellerons les objets par les noms que nous leur avons donnés (c’est pourquoi je vous ai demandé de ne pas utiliser les noms génériques par défaut comme box1, car cela aurait prêté à confusion très bientôt).

Nous lisons notre price_box. toPlainText () est une fonction interne qui lit la valeur stockée dans cette boîte. Soit dit en passant, vous n’avez pas à vous souvenir de toutes ces fonctions. Je viens de chercher sur Google quelque chose comme «Qt Textbox read data» pour savoir quel est le nom de la fonction, bien que vous commenciez à vous souvenir des noms après un certain temps, car ils sont très logiquement nommés.

La valeur lue est une chaîne, nous la convertissons donc en entier et la stockons dans une variable appelée prix.

Ensuite, nous lisons la boîte d’impôt:

Encore, valeur() est la fonction de lecture d’un spinbox. Merci Google.

Maintenant que nous avons ces deux valeurs, nous pouvons calculer le prix final en utilisant des mathématiques de très haute technologie:

Nous créons une chaîne avec notre prix final. En effet, nous allons afficher cette chaîne directement dans notre application:

Dans notre results_window, nous appelons la fonction Définir le texte(), qui génère la chaîne que nous avons créée.

Exécutez simplement le fichier en utilisant:

Et voilà. Une introduction simple à PyQt.

Si vous voulez plus de plaisir, essayez de jouer avec les différents widgets, mais soyez averti, vous pouvez ajouter trop de widgets et rendre votre application confuse à utiliser.

Souhaitez-vous en savoir plus à ce sujet? Si oui, veuillez laisser un commentaire ou contactez-moi.

#Votre #première #application #graphique #avec #Python #PyQt #Python #Engineers