- Formations
- conversion_path Parcours & Formations
- science Projets
- data_object Exercices de code
- psychology Exercices IA
- quiz Quiz
- Articles
- rss_feed Blog
- sort_by_alpha Glossaire
- menu_book Guides
- help_center FAQ
- media_link Ressources
- Communauté
- groups La communauté
- forum Questions
- live_tv Mentorats
- science Projets mensuels
- Formations
- conversion_path Parcours & Formations
- science Projets
- data_object Exercices de code
- psychology Exercices IA
- quiz Quiz
- Articles
- rss_feed Blog
- sort_by_alpha Glossaire
- menu_book Guides
- help_center FAQ
- media_link Ressources
- Communauté
- groups La communauté
- forum Questions
- live_tv Mentorats
- science Projets mensuels
Deviens membre Premium magic_button
Débloque cette session en devenant Membre Premium 🚀
Inscris-toi
(c'est gratuit !)
Un compte est nécessaire pour participer aux discussions.
Créer un compte person00:00:00 :Dans cette partie, on va voir la création du layout et comment ajouter les widgets à l'intérieur de ce layout.Je vous ai fait une petite présentation pour vous montrer à quoi ça va ressembler.
00:00:10 :On retrouve ici tous les widgets qu'on a créé dans la partie précédente,à savoir les 3 QLabel, les 2 Spinbox, le LineEdit, le ListWidget et le QPushButton.
00:00:19 :Je n'ai pas inclus sur ce schéma le label qui va être mis juste en dessous du ListWidgetet qui va être affiché quand on va déposer des images sur l'interface,mais il va se trouver juste en dessous du ListWidget,donc ça ne sera pas bien compliqué à rajouter dans l'interface une fois qu'on aura agencé tout le reste des widgets.
00:00:35 :Là encore, pour y voir un peu plus clair au niveau des coordonnées et des tailles,j'aime bien ramener tout ça à un format un petit peu plus carré,donc ça va donner ça ici.
00:00:43 :Et on va avoir tous nos widgets avec leurs coordonnées,donc les 2 premiers éléments vont être les coordonnéeset les 2 derniers éléments vont être la taille des widgets.
00:00:52 :On a le QLabel qui se retrouve à 0,0.Ensuite, l'autre QLabel qui va être à 1,0.Le troisième à 2,0.Et ensuite, le ListWidget et le QPushButton à 3 et 4,0.
00:01:01 :Donc là, on fait juste 0,1,2,3,4.Il n'y a pas de mystère là-dessus.Et ensuite, pareil, pour le SpinBox, on va avoir 0,1.Le deuxième SpinBox, on va être à 1,1.
00:01:10 :Et ensuite, 2,1 pour le LineEdit.Et après, on a le ListWidget et le QPushButton.Au niveau des unités en hauteur, on va toujours avoir une hauteur de 1.
00:01:19 :Par contre, pour le ListWidget et le QPushButton,ils vont s'étendre sur toute la largeur du QLabel et du QSpinBox et le QLineEdit.Pour la largeur du ListWidget et du QPushButton,vous voyez que dans les 2 derniers numéros,on a 1,2 et 1,2 pour le ListWidget et le PushButton.
00:01:36 :Donc 1 en hauteur et 2 en largeur.J'aime bien faire des schémas comme ça pour y voir un peu plus clair.Et après, vous allez voir que quand on va faire le code,il suffira de se référer à ce schémapour ajouter les coordonnées et la taille des widgets à l'intérieur de notre layout.
00:01:50 :Au niveau du code, la première chose qu'on va devoir faire,c'est tout d'abord créer le layout.On va faire ça à l'intérieur de cette méthode CreateLayoutqui va contenir dans ce cas-ci un seul layout et donc une seule ligne de code.
00:02:02 :On va l'appeler MainLayoutet ça va être tout simplement un QGridLayout,donc un layout en gris.On n'oublie pas de mettre Self icipour que le layout soit parenté à notre widgetet qu'il puisse apparaître dans l'interface.
00:02:15 :On va ensuite se rendre dans AddWidgetToLayoutet c'est dans cette méthode qu'on va faire l'ajout de tous nos widgets à l'intérieur de la grille.A chaque fois, ça va être à peu près la même chose.
00:02:25 :On va avoir Self.MainLayout et on va utiliser AddWidgetet on va lui passer les widgets un par un.Dans ce cas-ci, le premier, ça va être Quality.
00:02:33 :Et là, vous vous référez à la partie précédente,au petit graphique pour mettre les coordonnées.Moi, je vais taper tout ça, je vais accélérer un peupuisque c'est beaucoup de code qui va être tapé à la mainet c'est toujours un peu la même chose avec les coordonnéesqu'on avait dans la partie précédente.
00:02:48 :Donc j'accélère cette partie et on se retrouve une fois que c'est terminé.Donc voilà, j'ai tapé tout le code avec les coordonnées iciet vous avez peut-être remarqué que j'en ai profité pour inclurele label DropInfo ici qui se retrouve juste entre le ListWidget et le bouton.
00:03:08 :Donc ça a modifié légèrement le schéma qu'on a fait dans la partie précédentepuisque le bouton Convert ne se retrouve pas à 4 en hauteur mais à 5et on a inséré le label ici qui se retrouve lui à 4.
00:03:20 :Donc on a le ListWidget qui ne bouge pas et qui est à 3et tous ces widgets, les 3 derniers ici, vont avoir tous une largeur de 2.
00:03:27 :Donc 1 hauteur, 2 en largeur pour les 3 derniers widgets.Donc voilà pour la création du layout et de l'interfaceet on va pouvoir tester le script pour vérifier que tout fonctionne.
00:03:36 :Donc je vais me rendre ici, sélectionner ma configuration Launch,la lancer et voir si tout fonctionne correctement.Donc voilà mon application qui est lancée et vous voyez qu'il y a un label qui manque.
00:03:46 :Donc le label de taille ici. Donc j'ai dû oublier quelque chose,on va aller vérifier ça tout de suite.Pour l'instant les Spinbox démarrent à 0, il n'y a pas vraiment de limite.
00:03:54 :Je crois que par défaut la limite c'est quand même 100.Donc si je mets 99 ça fonctionne mais si j'essaie de mettre 100,par défaut ça ne fonctionne pas.
00:04:02 :Donc par défaut la limite, le Spinbox va de 0 à 99mais on va modifier ça dans les prochaines parties.On n'a pour l'instant aucune feuille de style qui est appliquée.
00:04:11 :Donc on a juste l'interface avec la feuille de style du système d'exploitation sur lequel je suis.Donc dans mon cas macOS, si vous êtes sur Windows, vous aurez une interface du style Windows.
00:04:19 :La feuille de style on pourra l'ajouter à la fin.Je ne pense pas que j'enregistrerai une partie là-dessuspuisqu'on l'a déjà fait pour la première application.
00:04:26 :Donc c'est toujours la même chose.On va chercher le fichier CSS et on l'applique sur l'interface.On a le label ici qui pour l'instant est toujours affiché.
00:04:35 :Même quand on n'a pas des images qui sont déposées dedans.Donc ça on va le cacher par défaut dans les prochaines partieset on fera en sorte qu'il s'affiche uniquement quand on glisse des images sur l'interface.
00:04:45 :Donc je vais retourner dans mon code pour voir ce qui peut se passer iciqui fait qu'on n'a pas le label.Donc je vais retourner ici et j'ai dû oublier de changer quelque chose.
00:04:54 :Voilà donc ici on a 1, 1, 1.Donc je l'ai mis au mauvais endroit puisque là c'est 0, 0, 0, 1et ensuite on a 1, 0, 1, 1.
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.