Première application

00:00:00 :Pour créer des applications un peu plus intéressantes, on va devoir ajouter beaucoup de widgets à l'intérieur de notre fenêtre.Pour ça, on va devoir organiser les widgets de différentes façons et on va donc devoir utiliser ce qu'on appelle des layouts.
00:00:13 :Alors il y a 4 layouts que l'on utilise généralement qui sont QVBoxLayout, QHBoxLayout, QStackedLayout et QGridLayout.Donc c'est les 4 layouts que vous allez retrouver.
00:00:25 :Le StackedLayout, je l'utilise personnellement assez rarement et je vais donc me concentrer la plupart du temps sur VBoxLayout, HBoxLayout et GridLayout.Donc VBox et HBox, comme leur nom l'indique, ce sont des layouts qui permettent d'organiser les widgets sur un axe vertical pour VBoxLayout et horizontal pour HBoxLayout.
00:00:43 :Pour GridLayout, ça permet d'organiser les widgets selon un modèle de grille.Donc ça peut être très pratique dans certains cas de figure.Par exemple, si vous souhaitez faire une calculatrice, vous allez probablement utiliser le QGridLayout.
00:00:55 :Dans cette vidéo, je vais vous montrer le VBoxLayout et le HBoxLayout qui vont nous permettre d'organiser les widgets sur un axe vertical et horizontal.Pour créer un layout, c'est très simple.
00:01:06 :On fait une instance à partir de QVBoxLayout par exemple et je vais le stocker dans une variable que je vais appeler MainLayout.Si je fais ça, pour l'instant, on ne va voir aucun changement.
00:01:15 :Si je lance l'application, on a toujours ici une fenêtre vide.Ce qu'il va falloir faire par la suite, c'est donc créer des widgets et les ajouter à l'intérieur de ce layout.
00:01:23 :Donc je vais créer un bouton tout simplement à partir de QPushButton et je vais lui mettre un texte.Donc par exemple, click me là encore.
00:01:30 :Assurez-vous de bien importer tous ces éléments au début de votre script.Moi, ça le fait automatiquement avec Visual Studio Code.Donc là, je vais juste enlever tout ce qui ne sert plus à rien.
00:01:38 :On a donc le QPushButton, VBoxLayout et le QWidget.Maintenant qu'on a créé notre QPushButton, je vais pouvoir l'ajouter dans mon layout.Pour ça, on va faire MainLayout.AddWidget.
00:01:50 :AddWidget, c'est la méthode qui nous permet d'ajouter un widget dans le layout.Et si je lance l'application, vous allez voir que mon widget n'apparaît pas.
00:01:57 :Pourquoi ? Et bien tout simplement parce que le layout n'est pas parenté à ma fenêtre.Pour parenter le layout à la fenêtre, il va falloir passer le parent de notre layout à l'intérieur des parenthèses quand on crée notre layout ici.
00:02:10 :Le parent, c'est ma fenêtre ici, c'est ma classe.Et donc, je vais passer le self tout simplement pour indiquer que mon layout doit être parenté à ma fenêtre.
00:02:19 :Et si je relance l'application, vous voyez que cette fois-ci, on a bien le bouton qui apparaît.Pour l'instant, j'ai juste un élément.Ça ne change pas grand-chose.
00:02:26 :On ne se rend pas bien compte de l'axe vertical de mon layout.Mais si j'ajoute plusieurs boutons, vous allez voir qu'on va avoir tous ces boutons qui vont être sur un axe vertical.
00:02:34 :Pour ça, je vais faire une boucle.Je vais dire tout simplement pour I une range de 10 et je vais décaler ces deux lignes ici à l'intérieur de la boucle.
00:02:41 :Si je relance le script, vous voyez que cette fois-ci, on a 10 boutons qui sont sur un axe vertical.Si je change uniquement ici le V pour un H et que je m'assure ici de bien changer l'import également pour importer QHBoxLayout,vous allez voir que cette fois-ci, on a les layouts qui sont sur un axe horizontal.
00:02:58 :Donc voilà pour les deux layouts que sont QHBoxLayout et QVBoxLayout,qui sont les deux layouts principaux qu'on utilise et qui vous permettent d'organiser vos widgets selon un axe vertical ou horizontal.
00:03:09 :Dernière chose avant de terminer cette vidéo, si jamais vous ne mettez pas le self ici,donc vous avez vu que le layout ne sera pas parenté à la fenêtre et ne sera pas affiché,il faut savoir qu'il y a une autre façon de parenter un layout à un widget.
00:03:22 :Et pour ça, on peut utiliser la méthode setLayout.Donc si je fais self.setLayout, je vais indiquer à self, qui correspond à ma fenêtre ici,que je souhaite utiliser ce layout ici, donc mainLayout, comme layout pour mon widget.
00:03:36 :Et donc si je relance l'application, vous voyez que cette fois-ci, on a bien les widgets qui sont affichés puisque le layout est bien contenu à l'intérieur de ma fenêtre.
00:03:44 :Donc voilà deux façons de faire. Soit vous mettez directement le self ici pour le passer en parent,pour indiquer que self est le parent de ce layout.
00:03:52 :Et si vous ne le faites pas ici, vous pouvez le faire à un autre endroit grâce à cette méthode setLayout que vous utilisez sur l'élément sur lequel vous souhaitez parenter le layout,donc dans ce cas-ci le self qui correspond à ma fenêtre.

Les layouts

Débloquez votre potentiel ! ✨

Prêt à passer au niveau supérieur ?

Toutes les questions

Christophe SCHULZ

Problème d'import automatique dans VSCode

Rechercher sur le site